Pièges communs à éviter lors de l'utilisation du cache d'application HTML5

Points clés

• N'incluez pas les fichiers manifestes dans le manifeste du cache d'application, qui peut créer une boucle qui n'informe presque plus votre site Web que de nouveaux fichiers de cache sont disponibles.
• Définissez toujours le type de type d'application Manifest dans le fichier .htaccess du serveur pour s'assurer que AppCache est en cours d'exécution correctement. Si le type de support n'est pas défini, AppCache ne fonctionnera pas.
• Notez que si aucun des fichiers individuels spécifiés dans le fichier manifeste ne peut être trouvé ou ne peut être téléchargé, l'ensemble du fichier manifeste sera jeté. Il s'agit d'un comportement spécial d'AppCache.
• Après la mise à jour du site Web, mettez toujours à jour le fichier manifeste, sinon l'utilisateur ne verra pas les modifications et ne verra que les données précédemment mises en cache. Vous pouvez mettre à jour le numéro de version ou la date dans les commentaires du fichier manifeste pour forcer le navigateur Web de l'utilisateur à télécharger une nouvelle version du fichier manifeste.

La mise en cache d'application HTML5 (également connue sous le nom d'AppCache) est devenue un sujet brûlant pour les développeurs Web récemment. AppCache vous permet de permettre aux visiteurs du site Web de parcourir votre site Web pendant la ligne hors ligne. Vous pouvez même stocker des parties du site Web, telles que des images, des feuilles de style ou des polices Web, dans un cache sur l'ordinateur de l'utilisateur. Cela peut aider votre site Web à se charger plus rapidement, réduisant ainsi la charge sur le serveur.

Pour utiliser AppCache, vous pouvez créer un fichier manifeste avec l'extension "AppCache", par exemple: manifest.appcache. Dans ce fichier, vous pouvez répertorier tous les fichiers en cache. Pour l'activer sur votre site, vous devez inclure une référence au fichier manifeste sur la page Web de l'élément HTML, comme indiqué ci-dessous:

<code class="language-html"></code>

Il s'agit d'un exemple de fichier manifeste:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

En plus des avantages de l'AppCache, il y a des pièges courants qui devraient être évités pour éviter de perturber l'expérience utilisateur et de détruire votre application.

Ne répertoriez pas les fichiers manifestes dans les fichiers manifestes

Si vous incluez le fichier manifeste lui-même dans le manifeste du cache d'application, il sera coincé dans une sorte de boucle qui informera à peine votre site Web qu'il existe un nouveau fichier de cache, et il devrait télécharger et utiliser le nouveau fichier manifeste au lieu de l'ancien fichier manifeste. Par conséquent, veillez à ne pas commettre les erreurs suivantes:

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

Les ressources non réalisables sur la page de cache ne chargeront pas

Il s'agit d'une erreur très courante lors de l'utilisation d'AppCache pour la première fois. C'est là que l'indicateur de réseau dans le fichier manifeste entre en jeu. La section réseau du fichier manifeste spécifie les ressources dont l'application Web a besoin pour accéder en ligne.

L'URL spécifiée sous l'indicateur réseau est essentiellement une "liste blanche", c'est-à-dire que le fichier spécifié sous cet drapeau est toujours chargé à partir du serveur lorsqu'il y a une connexion Internet. Par exemple, l'extrait de code suivant garantit que les demandes de chargement des ressources contenues dans / API / Subtree sont toujours chargées du réseau, pas à partir du cache.

<code class="language-html"></code>

Définissez toujours le type de type d'application Manifest dans le fichier .htaccess du serveur

Le fichier manifeste doit toujours être servi sous le texte du type de support / cache-manifest correct. Si le type de support n'est pas défini, AppCache ne fonctionnera pas.

Il doit toujours être configuré dans le fichier .htaccess du serveur de production. Ceci est mentionné dans la plupart des tutoriels expliquant AppCache, mais de nombreux développeurs l'ignorent lors de la migration des applications Web des serveurs de développement vers des serveurs de production.

Saisissez ce qui suit dans le fichier .htaccess d'Apache:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

Si vous téléchargez votre application sur Google App Engine, vous pouvez effectuer la même tâche en ajoutant l'extrait suivant au fichier app.yaml:

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

Évitez de jeter la liste entière car le fichier ne peut être trouvé

Si aucun des fichiers individuels spécifiés dans le fichier manifeste ne peut être trouvé ou ne peut être téléchargé, l'ensemble du fichier manifeste sera rejeté. Il s'agit d'un comportement étrange d'AppCache, qui doit être gardé à l'esprit lors de la conception d'applications Web qui utilisent AppCache.

Exemple:

<code>NETWORK:

/api</code>

Si vous supprimez le logo.gif, AppCache ne pourra pas trouver le fichier d'image supprimé, donc rien dans le fichier manifeste ne sera exécuté.

Les données sont chargées à partir d'appcache même si en ligne

Une fois que votre navigateur Web enregistre le fichier de manifeste de cache, le fichier sera chargé à partir du manifeste du cache lui-même même si l'utilisateur est connecté à Internet. Cette fonctionnalité aide à augmenter la vitesse de chargement de votre site Web et aide à réduire la charge du serveur.

Les modifications sur le serveur ne se produisent pas tant que le fichier manifeste n'est pas mis à jour

Parce que vous saviez à partir du point précédent que les données se chargeraient à partir d'AppCache même si l'utilisateur est en ligne, les modifications des fichiers du site Web ou du serveur ne se produiront pas tant que le fichier manifeste sera mis à jour.

Après la mise à jour du site Web, vous devez toujours mettre à jour le fichier manifeste, sinon vos utilisateurs ne verront jamais les modifications, ils ne verront que les données qui ont été mises en cache. Vous pouvez mettre à jour le numéro de version ou la date dans les commentaires du fichier manifeste pour forcer le navigateur Web de l'utilisateur à télécharger une nouvelle version du fichier manifeste. Par exemple, si vous utilisez un fichier de liste avant d'apporter des modifications à votre site Web:

<code>AddType text/cache-manifest .manifest</code>

Il peut être changé en quelque chose de similaire au bloc de code suivant afin que le navigateur de l'utilisateur puisse télécharger une nouvelle copie du fichier manifeste.

<code>- url: /public_html/(.*\.appcache)
  static_files: public_html/
  mime_type: text/cache-manifest
  upload: public_html/(.*\.appcache)</code>

Veuillez noter que les lignes commençant par # sont des lignes de commentaires qui ne seront pas exécutées.

Le fichier manifeste doit être servi à partir de la même source que l'hôte.

Bien que le fichier manifeste puisse contenir une référence à la ressource à mettre en cache à partir d'autres domaines, il doit être fourni au navigateur Web à partir de la même source que la page hôte. Si ce n'est pas le cas, le fichier manifeste ne sera pas chargé. Par exemple, le fichier manifeste suivant est correct:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js</code>

Ici, nous spécifions ce que nous voulons stocker dans le cache du navigateur de l'utilisateur, qui est référencé à partir d'un autre domaine, ce qui est absolument bien.

URL relative relative à la liste URL

Une chose importante à noter est que l'URL relative que vous avez mentionnée dans le manifeste est relative au fichier manifeste, et non par rapport au document que vous référez le fichier manifeste. Si le manifeste et la référence ne sont pas dans le même chemin, la ressource ne sera pas chargée et le fichier manifeste ne sera pas chargé.

Si votre structure d'application ressemble à ceci:

<code class="language-html"></code>

Ensuite, votre fichier manifeste devrait ressembler à ceci:

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

Vérifiez l'état de la liste de contrôle programmatiquement

Vous pouvez vérifier par programmation si votre application utilise une version mise à jour du manifeste du cache en testant Window.ApplicationCache.status. Voici quelques exemples de code:

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

L'exécution du code ci-dessus sur le site Web vous permettra de savoir quand de nouvelles mises à jour de la liste AppCache sont disponibles. Notez que Updateready est un état défini. Vous pouvez même utiliser la méthode swapCache () dans la fonction onupDateady () pour remplacer l'ancien fichier manifeste par le nouveau fichier manifeste:

<code>NETWORK:

/api</code>

Conclusion

AppCache est une technique utile, mais comme nous l'avons vu, être prudent lors de la mise en œuvre dans un projet. Les développeurs doivent sélectionner sélectivement ce qui doit être inclus dans le fichier manifeste. Idéalement, le fichier manifeste doit contenir du contenu statique tel que les feuilles de styles, les scripts, les polices Web et les images. Cependant, vous êtes toujours le meilleur juge de ce qui est inclus dans le dossier manifeste. AppCache est une épée à double tranchant, alors soyez prudent lorsque vous l'utilisez!

La plupart du contenu ci-dessus a été introduit ailleurs, et il existe d'autres points clés. Vous pouvez consulter les ressources suivantes pour plus d'informations:

• Pièce de cache d'application sur MDN
• Le cache d'application de Jake Archibald est un idiot
• Recettes hors ligne de Jake Archibald

FAQ sur la mise en cache d'application HTML5 (FAQ)

Qu'est-ce que la mise en cache de l'application HTML5 et pourquoi est-ce important?

Le cache d'application HTML5 (APPCACH) est une fonctionnalité qui permet aux développeurs de spécifier quels fichiers doivent être mis en cache par le navigateur et de les rendre disponibles pour les utilisateurs hors ligne. Il est important car il peut améliorer les performances de votre application Web en réduisant la charge du serveur et en enregistrant la bande passante. Il permet également aux applications d'exécuter même lorsque les utilisateurs sont hors ligne, offrant une meilleure expérience utilisateur.

Comment fonctionne la mise en cache de l'application HTML5?

HTML5 La mise en cache d'application fonctionne en utilisant des fichiers manifestes. Ce fichier répertorie les ressources que le navigateur doit mettre en cache pour une utilisation hors ligne. Lorsqu'un utilisateur accède à une page Web, le navigateur vérifie si le fichier manifeste lui est associé. Si c'est le cas, le navigateur téléchargera et stockera les ressources répertoriées. La prochaine fois qu'un utilisateur visitera une page Web, le navigateur chargera les ressources en cache au lieu de les télécharger à partir du serveur.

Quels sont les pièges communs lors de l'utilisation de la mise en cache d'application HTML5?

Lors de l'utilisation de la mise en cache de l'application HTML5, certains pièges courants incluent: ne pas mettre à jour correctement le fichier manifeste, ce qui entraîne correctement les anciens ressources; Stockage de l'appareil.

Comment éviter ces pièges?

Pour éviter ces pièges, mettez toujours à jour le fichier manifeste correctement lorsque la ressource change. Utilisez la section réseau du fichier manifeste pour spécifier des ressources qui ne doivent jamais être mises en cache. Considérez également le stockage de l'appareil et le cache de l'utilisateur uniquement les ressources nécessaires.

Quel est l'avenir de la mise en cache d'application HTML5?

Le cache d'application HTML5 est en cours de dépréciation, remplacé par des travailleurs du service. Les travailleurs de service fournissent plus de contrôle sur les caches et peuvent gérer des scénarios plus complexes. Cependant, les travailleurs des services sont actuellement pris en charge par tous les navigateurs, il est donc toujours important de comprendre et d'utiliser la mise en cache d'application HTML5.

Comment créer un fichier manifeste?

Le fichier manifeste est un fichier texte simple qui répertorie les ressources à mettre en cache. Il doit être servi de type mime "texte / cache-manifest". La première ligne du fichier doit être "Cache Manifest", suivie de la ressource à mettre en cache.

Comment associer une page Web à un fichier manifeste?

Pour associer une page Web à un fichier manifeste, ajoutez l'attribut "manifeste" à la balise "html" de la page Web. La valeur de l'attribut "manifeste" doit être l'URL du fichier manifeste.

Comment mettre à jour le cache?

Pour mettre à jour le cache, apportez des modifications au fichier manifeste. Chaque fois qu'un utilisateur visite une page Web, le navigateur vérifie les mises à jour du fichier manifeste. Si le fichier manifeste a été modifié, le navigateur télécharge et mettra en cache la nouvelle ressource.

Que se passe-t-il si les ressources répertoriées dans le fichier manifeste ne peuvent pas être téléchargées?

Si les ressources répertoriées dans le fichier manifeste ne peuvent pas être téléchargées, l'intégralité du processus de mise à jour du cache échouera. Le navigateur continuera à utiliser l'ancien cache.

Puis-je utiliser le cache d'application HTML5 pour toutes les ressources?

Bien que techniquement, vous pouvez utiliser le cache d'application HTML5 pour toutes les ressources, cela n'est pas recommandé. Un cache excessif de ressources peut remplir le stockage des périphériques de l'utilisateur et avoir un impact négatif sur les performances. Il est préférable de mettre en cache uniquement les ressources nécessaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!