Elektriska Imp Garage dörröppnare (7 / 11 steg)

Steg 7: HTML-App – konfigurationsdetaljer

De program som körs på iPhone är en webbsida som är en kombination av HTML, CSS och Javascript. För att få sidan att verkar vara en native iOS App, finns det meta-taggar som är förstås av Safari-webbläsaren som döljer navigeringsfältet högst upp i displayen och knappraden längst ned. För att få appen att köra utan som läses in från en webbserver, kan du cachelagra sidan på telefonen. Detta innebär att du kan ladda sidan från en tillfällig webbserver på telefonen och stäng sedan av webbservern så att ingen annan kan få tillgång till appen. När sidan har cachelagrats till telefonen, kommer Safari inte längre göra HTTP-förfrågningar för sidan när det åter öppnas kommer att ladda den direkt från den lokala cachen och Visa den att se ut som en inföding app. De taggar som styr visningsformatet är:

• Visningsområde

Definierar hur webbsidan ska visas och bör vara uppsättning som visas enligt riktlinjerna som Apple. Du kommer att behöva se till att dina knappar och bilder är tillräckligt stor eftersom användaren inte kommer att kunna zooma sidan.

• Apple-mobil-web-app-kompatibel

Denna tagg gör webbsidan körs i helskärmsläge. Webbläsarens navigeringsfält är dolda

• Apple-Mobile-Web-App-status-Bar-Style

Visar en svart statusfältet högst upp på telefonen. Mindre påträngande antar jag.
Detta är början av HTML-filen med metataggarna definierade < HTML-manifest="manifest.appcache" >
< head >
< meta charset = "utf-8" / >
< meta namn = "vyport" content = "initial-skala = 1,0, användare-scalable = ingen" / >
< meta namn = "apple-mobil-web-app-kompatibel" content = "ja" / >
< meta name="apple-mobile-web-app-status-bar-style" innehåll = "black" / >

Programikonen
För att göra en programikon, måste du skapa en 114 x 114 pixel png-bild. iOS hand tar om avrundning hörnen och tillämpa "shine".

Cache
Slutligen för att cachelagra app, behöver du en manifestfil. Kontrollera att webbservern hanterar upp manifestfil tillsammans med MIME-typ "text/cache-manifest" för att detta ska fungera. För IIS Express redigera du filen application.config för att lägga till filtypen. För andra servrar – maj din antall variera.
HTML App laddas med den senast inlästa versionen av bilden och HTML-filer från cache. Om nätverksanslutningen är tillgänglig, kommer webbläsaren kontrollera status för manifest-fil på servern. Om manifest-fil har förändrats, laddas de nya filerna. Detta är användbart under utveckling när filer uppdateras-du kan ändra versionsnumret inom manifestfilen för att tvinga fram nya filer för att laddas och cachelagrat. Men måste ibland man manuellt rensa cacheminnet för att få nya filer att ladda. Bara något som händer att du behöver vara medveten om. Jag hittade också det lättare under felsökning för att eliminera uttrycket manifest. När filen är debuggade, kan du arbeta med cache-versionen.

Manifest-fil har två sektioner-filer som cachelagras och filer som ska läsas från nätverket. För denna app, vi alla filer cachelagras och lämna avdelningen nätverk tomt.

CACHE MANIFEST

#version 3.3

CACHE:

index.html
bilder/hitchhikeguidetogalaxy0.png
bilder/hitchhikeguidetogalaxy1.png
bilder/hitchhikeguidetogalaxy2.png
bilder/hitchhikeguidetogalaxy3.png
images/garage_icon.png

NÄTVERK:

Versionsnumret är en utlösande faktor till webbläsaren att ladda nya versioner av filen. Jag hittade en bra bloggpost som täcker detta på http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/ om du behöver mer information om hur du kör HTML Apps på iPhone.