Ajouter les fonctions d'une Progressive Web App a un blog Ghost
Comme vous le savez, j'apprecie beaucoup ce que peut apporter une Progressive Web App (PWA) aux applications web. Les articles de ce blog sont bases sur Ghost et je vais vous expliquer comment apporter simplement les fonctionnalites des Progressive Web App a votre blog Ghost.
Créer une page hors ligne
En plus de fournir une expérience utilisateur astucieuse, mon objectif pour le site était d'exploiter toute la puissance des employés du service et d'apporter de puissantes fonctionnalités Progressive Web App à ce blog.
Je voulais que le site soit ultra rapide - dès que quelqu'un a lu un article, pourquoi ne pas le servir à partir de la version en cache sur leur appareil. Je souhaitais également que le site fonctionne complètement hors connexion, de sorte que si vous lisez quelque chose d'intéressant lors de vos déplacements, rien ne vous empêche d'attendre à nouveau une connexion réseau.
Dans cet esprit, je me suis mis à créer un mode hors connexion vraiment basique.
Pour cela, allez creer une page "Offline" dans l'admin de Ghost. Definissez y le titre et un texte contenu. Puis assurez vous que l'URL soit accessible via /offline.
Lorsque je visite l'URL /offline, je peux maintenant voir cette page en action.
Création du service worker
Une fois la page hors connexion créée, nous allons créer le fichier de notre service worker pour gérer le mode hors ligne ainsi que la mise en cache du blog.
Creez un fichier service-worker.js a la racine de votre theme puis ajoutez le code suivant.
const cacheName = 'blogCache';
const offlineUrl = '/offline/';
/**
* The event listener for the service worker installation
*/
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll([
offlineUrl
]))
);
});
/**
* Is the current request for an HTML page?
* @param {Object} event
*/
function isHtmlPage(event) {
return event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html');
}
/**
* Fetch and cache any results as we receive them.
*/
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Only return cache if it's not an HTML page
if (response && !isHtmlPage(event)) {
return response;
}
return fetch(event.request).then(
function (response) {
// Dont cache if not a 200 response
if (!response || response.status !== 200) {
return response;
}
let responseToCache = response.clone();
caches.open(cacheName)
.then(function (cache) {
cache.put(event.request, responseToCache);
});
return response;
}
).catch(error => {
// Check if the user is offline first and is trying to navigate to a web page
if (isHtmlPage(event)) {
return caches.match(offlineUrl);
}
});
})
);
});
Ouch ! Le code ci-dessus semble assez compliqué, décomposons-le pas a pas.
Lorsque l'utilisateur visite le site pour la première fois, le service worker commence à se télécharger et à s'installer. C'est le point idéal pour mettre en cache notre page hors connexion et utilisation ultérieure - elle est également appelée precache.
Après l'ajout d'un Event Listener install, nous pouvons ouvrir le cache et commencer à y ajouter des ressources. Ensuite, nous appelons cache.addAll() et passons l'URL de la page hors connexion. En arrière-plan, la méthode event.waitUntil() utilise une promesse JavaScript et l'utilise pour savoir combien de temps l'installation prend et si elle s'est deroule avec succes.
Maintenant que notre page hors connexion est mise en cache, nous devons commencer à mettre en cache toute autre ressource. En ajoutant un Event Listener pour l'événement fetch, l'utilisateur vérifie si l'URL entrante correspond à tout ce qui pourrait exister dans notre cache actuel à l'aide de la fonction caches.match(). Nous renvoyons ainsi simplement la reponse depuis le cache. Cependant, si la ressource n'existe pas dans le cache, nous continuons normalement et récupérons la ressource demandée. Vous remarquerez peut-être que je ne mets pas en cache les pages HTML. La raison en est que je veux toujours obtenir uniquement la page HTML du réseau au cas où des modifications seraient apportées. Si pour une raison quelconque, l'utilisateur est hors ligne, il se repliera sur la page hors ligne par défaut.
Petite note; Les service workers travaillent uniquement sur des origines sécurisées telles que HTTPS. Cependant, lorsque vous développez des service workers en local, vous pouvez utiliser http://localhost. Les service workers ont été conçus de cette manière afin de garantir la sécurité lorsque déployé en direct, mais aussi une flexibilité permettant aux développeurs de travailler plus facilement en local. Si vous souhaitez créer de puissantes applications Web progressives nécessitant plus de complexité que le code ci-dessus, je vous recommande vivement d'utiliser [Workbox.js] (https://developers.google.com/web/tools/workbox/). C'est un ensemble de bibliothèques et de modules de nœuds qui facilitent la mise en cache des ressources et tirent pleinement parti des fonctionnalités utilisées pour créer des applications Web progressives.
Ajouter un fichier manifest.json
Un fichier manifest.json d'une application Web est un simple fichier JSON qui fournit des informations utiles sur l'application (telles que son nom, son auteur, son icône et sa description) dans un fichier JSON. Plus précisément, le fichier manifest.json permet à l'utilisateur d'installer l'application. De l'ajouter à l'écran d'accueil de leur appareil et vous permet, en tant que développeur, de personnaliser l'écran de démarrage, les couleurs de thème et même l'URL ouverte.
Voici quoi resse,ble mon fichier manifest.json:
{
"name": "Blog de Kevin Marie, Eode9",
"short_name": "Eode9, Kevin Marie",
"start_url": "/",
"theme_color": "#000",
"background_color": "#000",
"display": "standalone"
}
Pour ceux d'entre vous qui sont attentif, vous remarquerez que je n'ai pas inclus toutes les propriétés dans mon fichier manifeste d'application Web. La raison est que je ne voulais pas surcharger l'utilisateur. Si vous êtes intéressé par toutes les fonctionnalités du fichier manifeste de l'application Web, je vous recommande de lire [cet article sur le site Web de Google Développeurs] (https://developers.google.com/web/fundamentals/web-app-manifest/) pour plus d'informations.
Emballez le tout
Si vous n'avez pas le code source de votre theme, je vous invite a telecharger votre theme depuis l'administration de Ghost / Design. Lorsque vous aurez ajoute les lignes suivantes, vous pourrez mettre a jour votre theme depuis ce meme endroit.
Dans l'entete de vos pages web(dans votre fichier default.hbs par exemple), ajoutez la ligne suivante
<link rel="manifest" href="/manifest.json">
Ensuite, ajoutez le code suivant au pied de blog pour référencer le fichier de travailleur de service. Par example, avant la balise