interface Web
js tutoriel
Pièges communs à éviter lors de l'utilisation du cache d'application HTML5
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:
<html lang="en" manifest="manifest.appcache">
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.
<html lang="en" manifest="manifest.appcache">
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:
<html lang="en" manifest="manifest.appcache">
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1666
14
1425
52
1323
25
1272
29
1251
24
Moteurs JavaScript: comparaison des implémentations
Apr 13, 2025 am 12:05 AM
Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation
Apr 16, 2025 am 12:12 AM
Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
De C / C à JavaScript: comment tout cela fonctionne
Apr 14, 2025 am 12:05 AM
Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.
Javascript et le web: fonctionnalité de base et cas d'utilisation
Apr 18, 2025 am 12:19 AM
Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.
JavaScript en action: Exemples et projets du monde réel
Apr 19, 2025 am 12:13 AM
L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.
Comprendre le moteur JavaScript: détails de l'implémentation
Apr 17, 2025 am 12:05 AM
Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.
Python vs JavaScript: communauté, bibliothèques et ressources
Apr 15, 2025 am 12:16 AM
Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
Python vs JavaScript: environnements et outils de développement
Apr 26, 2025 am 12:09 AM
Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.
