Votre site web HTML5 accessible Hors-ligne grâce au cache – Fichier manifest
 

Email et RGPD : Ce qui va changer en 2018 | 2018, année du tout programmatique | WPA3 arrive pour renforcer la sécurité du WiFi | Google Search Console : découvrez la nouvelle version | Bonnes résolutions 2018 : des cours de code gratuits avec Codecademy | Facebook va privilégier les amis et la famille au détriment des marques et des médias | Tous les changements qui attendent les entrepreneurs à partir du 1er janvier 2018 | Relation-client : la proue du nudge-marketing | Quick Code : une sélection de formations gratuites pour les développeurs | Les nouvelles caractéristiques de la micro-entreprise en 2018 | Protection des données : voici comment être en règle pour 2018 | Drop : un outil rapide et sécurisé pour le partage de fichiers | Orange prêt à acquérir Business et Decision | Quel est l’impact de la technologie sur l’entreprise et les salariés | Chatbots : Qu’en pensent vraiment les marketeurs | Les enjeux du marketing mobile pour 2018 | Linux, maître absolu des supercalculateurs | 4 façons de vous former en étant salarié | Facebook et Universal signent un accord global afin que les utilisateurs puissent intégrer de la musique à leurs vidéos | Complot : le Bitcoin créé par la NSA pour détruire les monnaies | Ghost Browser : un navigateur pour les professionnels du web | Apple avoue réduire la vitesse des iPhone 6 pour préserver l'autonomie | Facebook accusé d’abus de position dominante à cause du bouton Like | L’emailing pour les nuls : 15 conseils et bonnes pratiques incontournables | Tout sur JDK 10 et la feuille de route Java | Comment faire une capture d’écran d’une page web en entier | Pourquoi les freelances doivent-ils facturer cher | Amazon devant la justice française pour abus vis à vis des vendeurs de sa marketplace | Facebook : la reconnaissance faciale pour lutter contre l’usurpation d’identité | Snapchat lance un programme d’accélération pour les startups européennes |

62 Visiteurs aujourd'hui

Abonnez-Vous

Votre site web HTML5 accessible Hors-ligne grâce au cache – Fichier manifest

191 Vues 2017-12-25 HTML5, cache, Fichier manifest Solutions techniques

Votre site web HTML5 accessible Hors-ligne grâce au cache – Fichier manifest

La puissance du HTML5 n’est plus à démontrer. Voici une de ses nouvelles fonctionnalités : Rendez votre site ou application web accessible hors-ligne grâce au cache. Internet ne se limite plus aux sites web, il existe également des applications Web. Souvent, les utilisateurs surfent à partir d’appareils portables ou mobiles et ils ont accès à un réseau qui parfois se coupe (tunnel, métro, …). Avec le cache de l’application HTML5, vous pouvez leur fournir l’ensemble ou une partie de la fonctionnalité ou du contenu qu’ils auraient en ligne, peu importe où ils sont.

Les navigateurs proposent déjà de consulter de sites en mode “hors ligne” à partir de la mise en cache de certains fichiers. Si l’idée est bonne, dans les faits ces techniques sont peu fiables et souvent instables. Si vous actualisez une page sans connexion à internet, vous aurez souvent droit à une erreur vous demandant de vérifier votre réseau …

Mais à quoi sert le cache d’un navigateur ?

  • Naviguer sur un site ou une page web sans connexion internet (après l’avoir déjà visité ou téléchargé et stocké en mémoire dans le cache)
  • Optimiser la vitesse de chargement des pages puisque les fichiers sont présents en local
  • Réduire la charge du serveur, il ne transmet que les fichiers qui ont changé depuis la dernière visite


Rediger le cache manifest



Le cache manifest est tout simplement un fichier contenant les informations relatives pour le cache de votre navigateur. Pur rendre votre site accessible hors-ligne, l’astuce ici est d’utiliser ce fichier cache manifest. Dans sa forme la plus basique, il est incroyablement simple :

CACHE MANIFEST

Les lignes de code ci-dessus sont suffisamment clair pour ne pas être détaillé.

A Noter : Il est possible d’ajouter d’autres options à notre fichier manifest :
  • CACHE, : liste les fichiers à mettre en cache
  • NETWORK : liste les fichiers qui nécessitent OBLIGATOIREMENT une connexion internet
  • FALLBACK : liste les fichiers qui, s’ils ne sont pas accessibles en ligne, renvoient vers d’autres fichiers


Relier le manifest à votre site



Définissez le type MIME du manifest grâce au fichier .htaccess

Il nous faut maintenant relier le fichier manifest à votre site. C’est vraiment très simple à faire avec un fichier htaccess. Il va falloir déclarer le MIME-type du fichier manifest :



Cela servira à tous les fichiers avec une extension manifest. Ils auront pour ont pour MIME-type : text/cache-manifest.

Relier le manifest à votre site avec la balise <html>

Pour utiliser le fichier manifest du cache, il vous suffit d’ajouter une propriété à l’élément <html>:



Maintenant, la prochaine fois qu’un utilisateur visitera votre site ou application, leur navigateur mettra en cache les fichiers requis. C’est aussi simple que ça. S’ils accèdent à l’URL lorsqu’ils sont hors ligne, ils obtiendront ce qui a été mis en cache.

Rafraichir le cache



Il est important de noter que, même lorsque l’utilisateur est en ligne, le navigateur demandera seulement au serveur les nouveaux contenus dans trois cas:
  • L’utilisateur efface la mémoire cache (et évidemment la suppression de votre contenu).
  • Si des modifications ont été apportées aux fichiers manifest.
  • Le cache est mis à jour via le JavaScript


Alors, pour forcer tous les utilisateurs a recharger leur cache, vous pouvez changer quelque chose dans le fichier manifest. La plupart du temps, vous aurez probablement juste a changer un commentaire, et ce sera suffisant.

Compatibilité avec les différents navigateurs

Comme beaucoup de fonctionnalités HTML5, le cache de l’application est supportée par tous les navigateurs modernes.

En savoir plus sur la compatibilité des navigateurs avec les fonctinnalités HTML5 : http://www.findmebyip.com/litmus/


191 Vues 2017-12-25 HTML5, cache, Fichier manifest Solutions techniques




Source


Articles Récentes




Aller à l'essentiel pour maitriser le Développement web

Cours de Développement Web en ligne par MEZGANI SAID

Actualités national et international

Trouve votre futur Métier

Trouve votre futur Métier

Articles Récentes