Comment utiliser AJAX pour créer une application pour la programmation HTML5 et CSS3 - les nuls

Tout le monde veut créer des applications mobiles de nos jours. Voici le grand secret. De nombreuses applications sont réellement écrites en HTML5, CSS et JavaScript. Vous savez déjà tout ce dont vous avez besoin pour créer des applications compatibles avec les appareils mobiles. Mieux encore, vous n'avez pas besoin d'apprendre une nouvelle langue ou d'obtenir l'autorisation de l'App Store ou d'acheter une licence, comme vous le faites pour les applications natives.

Il y a quelques trucs merveilleux que vous pouvez faire pour les utilisateurs d'iOS. Vous pouvez concevoir votre programme afin que l'utilisateur puisse ajouter une icône directement sur le bureau. L'utilisateur peut alors démarrer le programme comme n'importe quelle autre application. Vous pouvez également faire en sorte que le navigateur cache les accoutrements normaux du navigateur pour que votre programme ne semble pas fonctionner dans un navigateur!

Il s'avère que ces effets sont assez faciles à faire.

Ajouter une icône à votre programme

Les versions modernes d'iOS (le système d'exploitation iPhone / iPad) ont déjà la possibilité de stocker n'importe quelle page Web sur le bureau. Visualisez simplement la page Web dans Safari et cliquez sur le bouton Partager. Vous trouverez une option pour enregistrer la page Web sur le bureau. Vous pouvez demander à vos utilisateurs de le faire, et ils seront en mesure de lancer votre programme comme une application normale.

Cependant, l'icône par défaut pour une application enregistrée est plutôt moche. Si vous voulez une belle icône, vous pouvez enregistrer une petite image en tant que. fichier png et placez-le dans le même répertoire que votre programme. Ensuite, vous pouvez ajouter cette ligne à votre page (dans l'en-tête) et cette image apparaîtra sur le bureau lorsque l'utilisateur enregistre votre programme:

En prime, l'iPhone ou l'iPad ajuste automatiquement l'image pour qu'elle ressemble à Icône Apple, ajoutant les effets appropriés à la version installée d'iOS (arrondie et vitreuse dans iOS6, plate dans iOS7.)

Bien sûr, cette astuce icon est un mécanisme Apple uniquement. Avec la plupart des versions d'Android, n'importe quel signet que vous avez désigné avec votre navigateur principal peut être ajouté au bureau, mais il n'y a pas d'option d'icône personnalisée. La directive apple-touch-icon sera simplement ignorée si vous utilisez un autre système d'exploitation.

Supprimer la barre d'outils Safari

Bien que votre programme semble bien à partir de l'écran principal, lorsque l'utilisateur active le programme, il est toujours évident que le programme fait partie du navigateur Web. Vous pouvez facilement masquer la barre d'outils du navigateur avec une autre ligne dans l'en-tête:

Ce code ne fera rien d'autre que si le programme est appelé depuis le bureau. Cependant, dans ce cas, il cache la barre d'outils, ce qui fait que le programme ressemble et se sent comme une application à part entière. En prime, cela lance le programme en mode plein écran, ce qui vous donne un peu plus de place pour le jeu.

Encore une fois, il s'agit d'une solution spécifique à Apple. Il n'y a pas un moyen facile d'obtenir le même effet sur les appareils Android.

Stockez votre programme hors ligne

Votre programme ressemble beaucoup à une application, sauf qu'il ne fonctionne que lorsque vous êtes connecté à Internet. HTML5 a une fonctionnalité merveilleuse qui vous permet de stocker une page Web entière localement la première fois qu'il est exécuté.

Ensuite, si l'utilisateur tente d'accéder au programme et que le système ne peut pas se connecter, la copie locale du jeu est exécutée à la place. En substance, le programme est téléchargé la première fois qu'il est activé et reste sur l'appareil local.

C'est un effet relativement facile à réaliser:

• Stabilisez votre programme: Avant de pouvoir utiliser le mécanisme de stockage hors ligne, vous devez vous assurer que votre programme est prêt à être lancé. Au minimum, vous devrez vous assurer de connaître tous les fichiers externes nécessaires au jeu.

• N'utilisez que des ressources locales: Pour ce type de projet, vous ne pouvez pas compter sur Internet externe. Vous devez donc avoir tous vos fichiers en local. Cela signifie que vous ne pouvez pas vraiment utiliser PHP ou des fichiers externes. Vous aurez besoin d'avoir une copie locale de tout sur le serveur.

• Construire une cahce. fichier manifest: Regardez le répertoire contenant votre jeu, et créez un nouveau fichier texte appelé.

• Écrivez la première ligne: La première ligne du cache. Le fichier manifeste ne doit contenir que le texte CACHE MANIFEST (tous en majuscules).

• Faites une liste de tous les fichiers du répertoire: Écrivez le nom de chaque fichier dans le répertoire, un fichier par ligne. Soyez prudent avec votre capitalisation et l'orthographe.

• Ajouter l'attribut manifeste: Le tag a un nouvel attribut appelé manifeste. Utilisez ceci pour décrire au serveur où le manifeste de cache peut être trouvé:

• Chargez la page normalement: Vous devrez charger la page Web une fois normalement. Si tout est configuré correctement, le navigateur fera discrètement une copie du fichier.

• Test hors connexion: Le meilleur moyen de tester le stockage hors connexion est de désactiver temporairement l'accès sans fil sur votre appareil, puis d'essayer d'accéder au fichier. Si les choses ont fonctionné, vous devriez être en mesure de voir votre page comme si vous étiez encore en ligne.

• Vérifiez les paramètres du serveur: Si le stockage hors ligne ne fonctionne pas, vous devrez peut-être vérifier l'administration de votre serveur. Le type MIME texte / manifeste doit être configuré sur le serveur. Vous devrez peut-être demander à votre administrateur de serveur de définir cette option dans le. Fichier htaccess pour votre compte:

  addtype text / cache-manifest. manifest
  

Notez qu'il peut prendre plusieurs heures pour que le mécanisme du cache-manifeste reconnaisse les modifications. Ainsi, lorsque vous modifiez votre page, ces modifications ne sont pas automatiquement mises à jour dans le navigateur local. C'est pourquoi il est préférable d'économiser l'archivage hors ligne vers la fin du cycle de développement de votre projet.