Cache instantané HTML5 Local Storage VS Cache hors ligne

Après avoir parcouru plusieurs articles, je ne suis toujours pas clair sur la différence entre Local Storage et App Cache Manifest.

Également référé: AppCache = cache d'application = LocalStorage de Web Storage? (SO 10986026), le cache d'application est un Douchebag (A List Apart)

Mon AIM consiste à créer un site Web avec des pages spécifiques, autorisées en mode hors connexion pour les utilisateurs sur la demande des utilisateurs.

Les étapes ont suivi:

  • J'ai ouvert un site sur Chrome: http://www.spritecow.com/
    Et vérifié AppCache: chrome: // appcache-internes /
    Et le site a été mis en cache.

  • J'ai fermé Chrome et l'ai rechargé. Le cache était toujours là. Exactement ce dont j'ai besoin pour la navigation hors ligne

  • Maintenant, comment est-ce différent du stockage local? Essayé de trouver la différence, mais tous les sites répondent en but, c'est-à-dire AppCache pour la mise en cache des modèles et le stockage local pour le contenu du modèle.

  • Certains sites ne préfèrent pas AppCache car il recharge le cache entier pour un changement de ligne unique. Certains sites préfèrent uniquement le stockage local. Bien que certains utilisent le combo d'AppCache (template) et Localstorage.

Maintenant, le doute est le suivant:

  • Magasins de stockage locaux sur la machine client. Comment le stockage d'AppCache est différent si je peux toujours l'accéder même si le navigateur est fermé.

  • Comme le cache de suppression effacera AppCache, je n'irais que pour le stockage local.

  • Quelle est la meilleure pratique à suivre pour la navigation hors ligne? Je suis complètement nouveau et j'ai besoin d'une petite clarté sur le même


MODIFIER

Le doute n'est pas répondu par le lien ( Est-ce que AppCache = Cache d'application = LocalStorage de Web Storage? ) Car cela donne des différences mais pas basé sur le but des Pratiques de navigation hors ligne (qui visent ce doute).

AppCache utilise un fichier de manifeste pour définir quels fichiers utilisés par l'application doivent être stockés (Vous pouvez cacher des fichiers et des ressources comme des pages HTML, des scripts JS, des styles CSS, des images …)

LocalStorage stockera des données mais pas des pages. Ainsi, chaque objet javascript que vous pouvez restreindre peut être stocké dans le stockage local.

Donc AppCache et localStorage ne sont pas les mêmes, mais ils sont complémentaires.

Exemple

Imaginez un calendrier Web que vous souhaitez être disponible en mode hors connexion (note: pour cet exemple, nous utilisons ici une page statique et les données sont chargées avec javascript. Le même peut être fait à partir d'une page dynamique, mais cet exemple utilise statique).

L'appcache stocke la page html et les ressources qu'elle utilise (javascripts, css, images) pour vous rendre la page. Comme vous avez mis dans votre fichier manifeste tout ce qui doit être mis en cache pour le prochain accès hors ligne, les pages sont stockées et vous pourrez afficher votre page hors connexion lors de la prochaine visite.

Mais problème, votre calendrier est affiché mais est vide. Toutes les réunions et événements du mois ne sont pas là. C'est parce que votre page est stockée, mais vous avez encore besoin de réseau pour charger les réunions dans votre calendrier. Et comme vous êtes hors ligne, vous n'avez aucun réseau …

Si vous souhaitez que toutes vos réunions soient disponibles en mode hors connexion, vous devrez les stocker dans localstorage (pas dans AppCache, car ce n'est pas une page, les données sont accessibles par JavaScript.) Vous devrez donc modifier votre fonction Javascript De ceci:

function initApp() { var data = loadDataWithAjax(); renderPlanning(data); } 

pour ça

 function initApp () { var data; if(offline) { data = loadFromLocalStorage(); } else { data = loadDataWithAjax(); storeDataInLocalStorage(data); } renderPlanning(data); } 

Appcache va même fonctionner si vous êtes totalement hors ligne et votre navigateur est fermé, puis vous ouvrez votre navigateur et saisissez l'URL alors qu'il est encore hors ligne – la page est chargée! Consultez ce site ici … chargez-le une fois en ligne, puis déconnectez-vous de l'Internet et fermez votre navigateur … puis rouvrez le navigateur et essayez de le visiter tout en étant hors ligne.

LocalStorage a besoin d'une connexion pour charger le code js nécessaire pour obtenir les données.