Progressive Web Apps : inclut le service worker

1. Bienvenue

Dans cet atelier, vous allez ajouter une réponse de route de streaming à une application Web existante pour améliorer les performances. Il s'agit du septième d'une série d'ateliers de programmation complémentaires pour l'atelier sur les progressive web apps. L'atelier de programmation précédent était Exploiter tout le potentiel de votre PWA. Il reste un atelier de programmation dans cette série.

Points abordés

• Ajouter une réponse de streaming à un service worker

À savoir

• JavaScript

Ce dont vous avez besoin

• Navigateur compatible avec les service workers et les flux

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 :

Cloner le dépôt

Télécharger le fichier ZIP

Si vous clonez le dépôt, assurez-vous d'être dans la branche pwa06--service-worker-includes. Le fichier ZIP contient également le code de cette branche.

Ce code de base nécessite Node.js 14 ou version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier du code afin d'installer toutes les dépendances dont vous aurez besoin. Ensuite, exécutez npm start pour démarrer le serveur de développement de l'atelier de programmation.

Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. De plus, voici les principaux fichiers existants que vous utiliserez tout au long de cet atelier de programmation :

Fichiers clés

• js/preview.js : prévisualiser le fichier JavaScript de la page
• service-worker.js : fichier service worker de la PWA

3. Aperçu du streaming

La page d'aperçu peut être divisée en trois parties distinctes : l'en-tête, le corps compilé et le pied de page. Actuellement, le corps compilé est rendu côté client, mais il n'y a aucune raison pour qu'il le soit. Transférons-le vers le service worker.

Pour compiler le corps, une recherche de contenu asynchrone est effectuée. Étant donné que le travail asynchrone dans une réponse de navigation est coûteux, c'est une excellente occasion de diffuser d'abord le contenu connu au navigateur.

Pour ce faire, commencez par effacer le contenu de js/preview.js afin de vous assurer qu'il ne compile plus. Ensuite, dans service-worker.js, procédez comme suit :

• Importer l'exportation nommée strategy depuis workbox-streams en tant que streamsStrategy
• Importer l'exportation nommée openDB à partir de idb et importer l'exportation nommée marked à partir de marked
• Avant l'enregistrement de la route pour les navigations, ajoutez un enregistrement de route
  • Il doit vérifier que le pathname de l'URL est /preview.
  • Il doit utiliser une stratégie de streaming qui
    1. Répondez avec le contenu de preview/index.html via la zone de contenu de la balise main.
    2. Répondez avec une fonction qui ouvre l'IndexedDB settings-store, récupère le contenu du magasin d'objets settings et renvoie la version rendue en Markdown de ce contenu.
    3. Répondez avec les balises de fermeture main, body et html.

Veillez à placer l'enregistrement de la route de streaming avant l'enregistrement de la navigation normale. Les enregistrements de routes sont exécutés dans l'ordre dans lequel ils sont inclus dans le service worker. Par conséquent, si vous faites l'inverse, celui du streaming ne sera jamais exécuté, car la requête aura déjà été traitée.

Une fois la réponse de streaming en place, revenez en arrière et ouvrez l'aperçu du site dans votre navigateur. Vous devriez constater que le contenu de la page est désormais affiché directement à partir du service worker, sans aucun code côté client.

Si vous ne voyez pas les modifications, assurez-vous que votre nouvelle worker de service est utilisé par votre page en vérifiant le worker de service actif dans l'onglet Service Workers du panneau Applications dans les outils de développement Chrome.

4. Félicitations !

Vous avez appris à rendre votre application Web hors connexion à l'aide des service workers et de l'API Cache Storage.

Le prochain atelier de programmation de la série est Utiliser des nœuds de calcul.