Ouvre-porte de Garage électrique Imp (7 / 11 étapes)

Étape 7: L’App HTML – détails de la Configuration

L’application qui fonctionne sur l’iPhone est une page web qui est une combinaison de HTML, CSS et Javascript. Pour obtenir la page web de paraître un application iOS en natif, il n’y a balises meta qui sont interprétés par le navigateur Safari que cachent la barre de navigation en haut de l’écran et la barre de boutons en bas. Pour obtenir l’application à s’exécuter sans être chargé à partir d’un serveur web, vous pouvez mettre en cache la page sur le téléphone. Cela signifie que vous pouvez charger la page d’un serveur web temporaire sur le téléphone et puis arrêtez le serveur web afin que personne d’autre ne peut accéder à l’App. Une fois que la page a été mise en cache sur votre téléphone, Safari n’est plus faire des requêtes HTTP pour la page lorsqu’il est à nouveau ouvert et sera chargera elle directement à partir du cache local et affichez-la pour ressembler à une application native. Les balises qui contrôlent le format d’affichage sont :

• Fenêtre d’affichage

Cela définit comment la page Web s’affichera et devrait être ensemble comme indiqué selon les directives d’Apple. Vous devrez vous assurer que vos boutons et les images sont assez grandes car l’utilisateur ne sera pas capable de zoomer la page.

• Apple-mobile-web-app-compatible

Ce tag fait la page web en mode plein écran. Les barres de navigation du navigateur sont cachés

• Apple-Mobile-Web-App-Status-bar-style

Affiche une barre noire en haut du téléphone. Moins envahissante, je suppose.

C’est le début du fichier HTML avec les balises meta défini
< html manifest="manifest.appcache" >
< tête >
< meta charset = « utf-8 » / >
< nom meta = « viewport » content = "échelle initiale = 1,0, utilisateur évolutive = non" / >
< nom meta = « apple-mobile-web-app-compatible » content = « yes » / >
< meta name="apple-mobile-web-app-status-bar-style" content = "black" / >

Icône de l’application
Pour faire une icône de l’application, vous devez créer une image png de 114 x 114 pixels. iOS prendra soin d’arrondir les angles et en appliquant la « brillance ».

Cache
Enfin pour mettre en cache l’app, vous avez besoin d’un fichier manifeste. Assurez-vous que votre serveur web vous propose le fichier de manifeste avec le type MIME « text/cache-manifest » pour cela à travailler. Pour IIS Express, vous éditez le fichier application.config pour ajouter le type de fichier. Pour les autres serveurs – votre kilométrage peut varier.
L’App HTML va charger avec la dernière version de chargement de l’image et les fichiers HTML du cache. Si la connectivité réseau est disponible, le navigateur va vérifier l’état du fichier manifeste sur le serveur. Si le fichier de manifeste a changé, les nouveaux fichiers seront chargés. Ceci est utile pendant le développement lorsque les fichiers sont mis à jour-vous pouvez changer le numéro de version dans le fichier de manifeste pour forcer les nouveaux fichiers à charger et mis en cache. Cependant, parfois il faut effacer manuellement le cache pour obtenir de nouveaux fichiers à charger. Juste quelque chose qui se passe que vous avez besoin de connaître. J’ai aussi trouvé plus facile pendant le débogage pour éliminer la déclaration manifeste. Une fois que le fichier est en cours de débogage, vous pouvez travailler avec la version cache.

Le fichier manifeste comporte deux sections – fichiers qui vont être mis en cache et les fichiers qui seront chargés depuis le réseau. Pour cette application, nous mettre en cache tous les fichiers et laisser la section réseau vide.

MANIFESTE DE CACHE

#version 3.3

CACHE :

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

RÉSEAU :

Le numéro de version est un déclencheur pour le navigateur web pour charger les nouvelles versions du fichier.  J’ai trouvé un bon billet auquel cela couvre à http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/ si vous désirez plus d’informations sur l’exécution de HTML applications sur l’iPhone.