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
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
L'évolution de JavaScript: tendances actuelles et perspectives d'avenir
Apr 10, 2025 am 09:33 AM
Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
