1. Bienvenue
Dans cet atelier, vous allez utiliser une application Web existante et la rendre hors connexion. Cet atelier est le premier d'une série d'ateliers consacrés à la progressive web app. Il y a sept autres ateliers de programmation dans cette série.
Points abordés
- Écrire un service worker à la main
- Ajouter un service worker à une application Web existante
- Utiliser le service worker et l'API Cache Storage pour rendre les ressources disponibles hors connexion
Bon à savoir
- Code HTML et JavaScript de base
Ce dont vous avez besoin
- Navigateur compatible avec les service worker
2. Préparer l'atelier
Commencez par cloner ou télécharger le code de démarrage nécessaire pour effectuer cet atelier de programmation:
Si vous clonez le dépôt, assurez-vous d'avoir placé la branche starter. Le fichier ZIP contient également le code de cette branche.
Ce codebase nécessite Node.js 14 ou une version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier code pour installer toutes les dépendances dont vous avez besoin. Exécutez ensuite npm start pour démarrer le serveur de développement pour l'atelier de programmation.
Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. Voici les principaux fichiers existants que vous allez utiliser au cours de cet atelier de programmation:
Fichiers clés
js/main.js: fichier JavaScript de l'application principaleservice-worker.js– Fichier du service worker de l'application
3. Test hors connexion
Avant d'apporter toute modification, testez votre application pour voir si l'application Web ne fonctionne pas actuellement. Pour ce faire, mettez notre ordinateur hors connexion et actualisez l'application Web. Si vous utilisez Chrome, procédez comme suit:
- Ouvrir les outils pour les développeurs Chrome
- Accédez à l'onglet "Application"
- Passer à la section "Nœuds de calcul de service"
- Cochez la case "Hors connexion"
- Actualisez la page sans fermer les outils pour les développeurs Chrome.
Le site a été testé et son chargement a échoué. Il est temps d'ajouter des fonctionnalités en ligne. Décochez la case et passez à l'étape suivante.
4. Passer hors connexion
À présent, ajoutez un service worker de base ! Cela s'effectuera en deux étapes: enregistrer le service worker et mettre en cache les ressources.
Enregistrer un service worker
Le fichier du service worker est déjà vide. Par conséquent, pour que la modification s'affiche, enregistrez-la dans l'application. Pour ce faire, ajoutez le code suivant en haut du fichier js/main.js:
import swURL from 'sw:../service-worker.js';
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
const reg = await navigator.serviceWorker.register(swURL);
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Explanation
Ce code enregistre le fichier vide du service worker service-worker.js une fois la page chargée, et uniquement si le site le permet.
Ressources de mise en cache
Pour que l'application Web fonctionne hors connexion, le navigateur doit pouvoir répondre aux requêtes réseau et choisir où les acheminer. Pour ce faire, ajoutez le code suivant à service-worker.js
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Revenez maintenant au navigateur, fermez l'onglet d'aperçu, puis rouvrez-le. Vous devriez voir des console.log correspondant aux différents événements dans le service worker !
Ensuite, déconnectez-vous à nouveau, puis actualisez le site. Le chargement devrait commencer alors que vous êtes hors connexion.
Explanation
Lors de l'événement d'installation du service worker, un cache nommé est ouvert à l'aide de l'API Cache Storage. Les fichiers et les routes spécifiés dans precacheResources sont ensuite chargés dans le cache à l'aide de la méthode cache.addAll. C'est ce qu'on appelle la précaution, car elle met en cache de manière anticipée l'ensemble de fichiers au moment de l'installation, plutôt que de les mettre en cache s'ils sont nécessaires ou demandés.
Une fois que le service worker a contrôler le site, les ressources demandées passent par le service worker comme un proxy. Chaque requête déclenche un événement de récupération qui, dans ce nœud de calcul de service, recherche une correspondance dans le cache, en cas de correspondance, en réponse à une ressource mise en cache. En l'absence de correspondance, la ressource est demandée normalement.
La mise en cache des ressources permet à l'application de fonctionner hors connexion en évitant les requêtes réseau. L'application peut désormais répondre avec un code d'état 200 hors connexion.
5. Félicitations !
Vous avez appris à mettre votre application Web hors connexion à l'aide de service worker et de l'API de stockage du cache.
Le prochain atelier de programmation de la série s'intitule Utiliser les boîtes de dialogue