Deuropener van de Garage van de elektrische Imp (7 / 11 stap)

Stap 7: De HTML App-configuratiedetails

De applicatie die op de iPhone draait is een webpagina die is een combinatie van HTML, CSS en Javascript. Als u de webpagina wilt weergeven als een native iOS App, zijn er meta-tags die worden begrepen door de browser van de Safari die de navigatiebalk aan de bovenkant van het scherm en de knoopbar bij de bodem verbergen. Om de app te draaien zonder wordt geladen vanaf een webserver, kunt u de pagina op de telefoon cachen. Dit betekent dat u kunt laden van de pagina van een tijdelijk web-server naar de telefoon en sluit de webserver zodat niemand anders toegang tot de App krijgen kan. Zodra de pagina is opgeslagen op uw telefoon, zal Safari niet langer maken van HTTP-aanvragen voor de pagina wanneer deze opnieuw wordt geopend en laadt het direct vanuit de lokale cache, en weer te laten uitzien als een native app. De tags die de weergave-indeling bepalen zijn:

• Viewport

Dit bepaalt hoe de webpagina worden weergegeven en zou zijn set zoals volgens de richtlijnen van Apple. Je moet om ervoor te zorgen dat uw knoppen en afbeeldingen groot genoeg zijn, omdat de gebruiker zal niet zitten kundig voor zoom van de pagina.

• Apple-mobiele-web-app-staat

Deze tag zorgt ervoor dat de web-pagina uitvoeren in de modus volledig scherm. De navigatiebalken van de browser zijn verborgen

• Apple-Mobile-Web-app-Status-Bar-Style

Hiermee wordt een zwarte statusbalk weergegeven aan de bovenkant van de telefoon. Minder opdringerig ik veronderstel.

Dit is het begin van het HTML-bestand met de meta-tags gedefinieerd
< HTML-manifest="manifest.appcache" >
< head >
< meta charset = "utf-8" / >
< metanaam = "viewport" content = "eerste-schaal = 1.0, gebruiker-scalable = nee" / >
< metanaam = "apple-mobiele-web-app-capable" content = "yes" / >
< meta name="apple-mobile-web-app-status-bar-style" content = "zwart" / >

Toepassingspictogram
Om het pictogram van een toepassing, moet u een png-afbeelding van 114 x 114 pixels maken. iOS zal zorgen voor de afronding van de hoeken en de "shine" toe te passen.

Cache
Tot slot om de cache van de app, moet u een manifestbestand. Zorg ervoor dat uw webserver van het manifest bestand met MIME-type ' text/cache-manifest ' voor dit te werken. Voor IIS Express bewerken u het application.config bestand om toe te voegen van het bestandstype. Voor andere servers – kan jouw snelheid variëren.
De HTML App laadt met de laatste geladen versie van de afbeelding en de HTML-bestanden uit de cache. Als de verbinding met het netwerk beschikbaar is, zal de browser de status van het manifest bestand op de server controleren. Als het manifest bestand is gewijzigd, zal de nieuwe bestanden worden geladen. Dit is handig tijdens ontwikkeling wanneer bestanden worden bijgewerkt, kunt u het versienummer in het manifestbestand als u wilt dat nieuwe bestanden worden geladen en in de cache opgeslagen. Echter, soms je moet handmatig de cache om nieuwe bestanden te laden. Gewoon iets dat gebeurt dat u moet zich bewust zijn van. Ik vond het ook gemakkelijker tijdens de foutopsporing om te elimineren van de duidelijke instructie. Zodra het bestand is opgespoord, kunt u werken met de cache-versie.

Het manifestbestand bevat twee secties-bestanden die in cache opgeslagen zal worden en bestanden die vanuit het netwerk zal worden geladen. Voor dit app, we alle bestanden in de cache en de sectie netwerk leeg laat.

CACHE MANIFEST

3.3 #version

CACHE:

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

NETWERK:

Het versienummer is een trigger om de webbrowser te laden van nieuwe versies van het bestand.  Ik vond een goede blogbericht waarin dit op http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/ als u meer informatie over het uitvoeren van HTML Apps op iPhone nodig.