interface Webjs tutorielPiè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!
Python vs JavaScript: une analyse comparative pour les développeursMay 09, 2025 am 12:22 AMLa principale différence entre Python et JavaScript est le système de type et les scénarios d'application. 1. Python utilise des types dynamiques, adaptés à l'informatique scientifique et à l'analyse des données. 2. JavaScript adopte des types faibles et est largement utilisé pour le développement frontal et complet. Les deux ont leurs propres avantages dans la programmation asynchrone et l'optimisation des performances, et doivent être décidées en fonction des exigences du projet lors du choix.
Python vs JavaScript: Choisir le bon outil pour le travailMay 08, 2025 am 12:10 AMQue ce soit pour choisir Python ou JavaScript dépend du type de projet: 1) Choisissez Python pour les tâches de science et d'automatisation des données; 2) Choisissez JavaScript pour le développement frontal et complet. Python est favorisé pour sa bibliothèque puissante dans le traitement et l'automatisation des données, tandis que JavaScript est indispensable pour ses avantages dans l'interaction Web et le développement complet.
Python et Javascript: comprendre les forces de chacunMay 06, 2025 am 12:15 AMPython et JavaScript ont chacun leurs propres avantages, et le choix dépend des besoins du projet et des préférences personnelles. 1. Python est facile à apprendre, avec une syntaxe concise, adaptée à la science des données et au développement back-end, mais a une vitesse d'exécution lente. 2. JavaScript est partout dans le développement frontal et possède de fortes capacités de programmation asynchrones. Node.js le rend adapté au développement complet, mais la syntaxe peut être complexe et sujet aux erreurs.
Core de JavaScript: est-il construit sur C ou C?May 05, 2025 am 12:07 AMJavascriptisnotbuiltoncorc; il est en interprétéLanguageThatrunSoninesoftenwritteninc .1) javascriptwasdesignedasalightweight, interprété de LanguageForwebbrowsers.2) EnginesevolvedFromSimpleInterpreterstoJitCompilers, typicalinc, impropringperformance.
Applications JavaScript: de front-end à back-endMay 04, 2025 am 12:12 AMJavaScript peut être utilisé pour le développement frontal et back-end. L'endouage frontal améliore l'expérience utilisateur via les opérations DOM, et le back-end gère les tâches du serveur via Node.js. 1. Exemple frontal: modifiez le contenu du texte de la page Web. 2. Exemple backend: Créez un serveur Node.js.
Python vs JavaScript: Quelle langue devez-vous apprendre?May 03, 2025 am 12:10 AMLe choix de Python ou JavaScript doit être basé sur le développement de carrière, la courbe d'apprentissage et l'écosystème: 1) le développement de carrière: Python convient à la science des données et au développement de back-end, tandis que JavaScript convient au développement frontal et complet. 2) Courbe d'apprentissage: la syntaxe Python est concise et adaptée aux débutants; La syntaxe JavaScript est flexible. 3) Ecosystème: Python possède de riches bibliothèques informatiques scientifiques, et JavaScript a un puissant cadre frontal.
Frameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AMLa puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.
La relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AMINTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr
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
Télécharger la version Mac de l'éditeur Atom
L'éditeur open source le plus populaire
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
Dreamweaver CS6
Outils de développement Web visuel
Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
