Votre première progressive web app

Dernière mise à jour : 30/04/2019

Qu'est-ce qu'une application Web, une progressive web app ?

Les progressive web apps offrent une expérience installable et semblable à une application mobile sur ordinateur et mobile, qui sont conçues et diffusées directement sur le Web. Ce sont des applications Web rapides et fiables. Mais avant tout, ce sont des applications Web qui fonctionnent dans n'importe quel navigateur. Si vous concevez une application Web aujourd'hui, vous êtes déjà sur le point de créer une progressive web app.

Rapide et fiable

Chaque expérience Web doit être rapide, en particulier pour les progressive web apps. "Rapide" désigne le temps nécessaire pour que le contenu s'affiche à l'écran et pour offrir une expérience interactive.

En outre, elle doit être rapidement fiable. C'est difficile de souligner suffisamment les performances fiables. Pensez-y de cette façon: le premier chargement d'une application native est frustrant. C'est un processus de téléchargement et d'accès à une plate-forme de téléchargement qui s'impose. Toutefois, une fois que vous arrivez à l'endroit où l'application est installée, le coût initial est amorti sur toutes les lancements d'applications, et aucun de ces démarrages n'a de retard variable. Chaque démarrage de l'application est aussi rapide que la dernière, aucune variance. Une progressive web app doit fournir ces performances fiables attendues par les utilisateurs, quelle que soit l'expérience installée.

Installable

Les progressive web apps peuvent s'exécuter dans un onglet du navigateur, mais sont également installables. Ajouter un site aux favoris ajoute simplement un raccourci, mais la progressive web app (PWA) installée ressemble à toutes les autres applications installées. Elle se lance depuis le même emplacement que les autres applications. Vous pouvez contrôler votre expérience de lancement, y compris sur un écran d'accueil personnalisé, des icônes, et plus encore. Il fonctionne en tant qu'application dans une fenêtre d'application sans barre d'adresse ni autre interface utilisateur de navigateur. Comme toutes les autres applications installées, il s'agit d'une application de premier niveau dans le sélecteur de tâches.

N'oubliez pas qu'il est essentiel que la PWA installable soit rapide et fiable. Les utilisateurs qui installent une PWA s'attendent à ce que leurs applications fonctionnent, quel que soit le type de connexion réseau qu'ils utilisent. Il s'agit d'une attente de référence qui doit être respectée par chaque application installée.

Mobiles et ordinateurs

À l'aide de techniques de Responsive Web Design, les PWA fonctionnent à la fois sur mobile et sur ordinateur, en utilisant une seule base de code entre les plates-formes. Si vous envisagez de créer une application native, découvrez tous les avantages d'une PWA.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer une application Web météo à l'aide de techniques PWA. Cette appli pourra :

  • Le responsive design s'adapte aux ordinateurs et aux mobiles.
  • Être rapide, en utilisant un service worker pour précharger les ressources de l'application (HTML, CSS, JavaScript, images) nécessaires à l'exécution et mettre en cache les données météorologiques au moment de l'exécution pour améliorer les performances.
  • Peut être installée à l'aide d'un fichier manifeste d'application Web et de l'événement beforeinstallprompt pour informer l'utilisateur qu'elle peut être installée.

Points abordés

  • Créer et ajouter un fichier manifeste d'application Web
  • Comment fournir une expérience hors connexion simple
  • Comment fournir une expérience hors connexion complète
  • Comment installer votre application

Cet atelier de programmation porte sur les progressive web apps. Les concepts et les blocs de code non pertinents ne sont pas abordés, mais vous sont fournis afin que vous puissiez simplement les copier et les coller.

Prérequis

  • Une version récente de Chrome (74 ou version ultérieure) Les PWA fonctionnent dans tous les navigateurs, mais nous allons utiliser certaines fonctionnalités des outils pour les développeurs Chrome afin de mieux comprendre ce qui se passe au niveau du navigateur et les utiliser pour tester l'installation.
  • Connaissances des langages HTML, CSS, JavaScript et des Outils pour les développeurs Chrome.

Obtenir une clé pour l'API Dark Sky

Les données météo sont fournies par l'API Dark Sky. Pour l'utiliser, vous devrez demander une clé API. Cette application est facile à utiliser et offerte pour les projets non commerciaux.

S'inscrire pour obtenir la clé API

Vérifier que votre clé API fonctionne correctement

Pour vérifier que votre clé API fonctionne correctement, envoyez une requête HTTP à l'API DarkSky. Modifiez l'URL ci-dessous pour remplacer DARKSKY_API_KEY par votre clé API. Si tout fonctionne, vous devriez voir les dernières prévisions météo pour Paris.

https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319

Récupérer le code

Pour ce projet, nous avons regroupé tout ce dont vous avez besoin dans un dépôt Git. Pour commencer, vous devrez obtenir le code et l'ouvrir dans l'environnement de développement de votre choix. Pour cet atelier de programmation, nous vous recommandons d'utiliser Glitch.

Fortement recommandé: utilisez Glitch pour importer le dépôt

Il est recommandé d'utiliser Glitch pour cet atelier de programmation.

  1. Ouvrez un nouvel onglet de navigateur et accédez à l'adresse https://glitch.com.
  2. Si vous ne possédez pas de compte, vous devez vous inscrire.
  3. Cliquez sur Nouveau projet, puis sur Cloner à partir du dépôt Git.
  4. Clonez https://github.com/googlecodelabs/your-first-pwapp.git, puis cliquez sur "OK".
  5. Une fois le dépôt chargé, modifiez le fichier .env et mettez-le à jour avec votre clé API DarkSky.
  6. Cliquez sur le bouton Show (Afficher), puis choisissez Dans une nouvelle fenêtre pour voir la PWA en action.

Alternative: Télécharger le code et le code (travail en local)

Si vous souhaitez télécharger le code et travailler en local, vous devrez disposer d'une version récente de Node.js et d'une configuration d'éditeur de code prête à l'emploi.

Télécharger le code source

  1. Décompressez le fichier ZIP téléchargé.
  2. Exécutez npm install pour installer les dépendances nécessaires à l'exécution du serveur.
  3. Modifiez server.js et définissez votre clé API DarkSky.
  4. Exécutez node server.js pour démarrer le serveur sur le port 8000.
  5. Ouvrez http://localhost:8000 dans un nouvel onglet de votre navigateur.

Quel est notre point de départ ?

Vous allez utiliser une application météo de base conçue pour cet atelier de programmation. Nous avons simplifié le code pour montrer les concepts abordés dans cet atelier de programmation, c'est-à-dire qu'il ne gère que peu d'erreurs. Si vous décidez de réutiliser l'un de ces codes dans une application en production, vérifiez que vous gérez toutes les erreurs et testez l'ensemble du code.

Quelques suggestions à essayer...

  1. Pour ajouter une ville, cliquez sur le bouton bleu + situé dans l'angle inférieur droit.
  2. Actualisez les données à l'aide du bouton d'actualisation situé dans l'angle supérieur droit.
  3. supprimer une ville en utilisant le x dans l'angle supérieur droit de chaque fiche de ville ;
  4. Utilisez la barre d'outils pour activer/désactiver l'appareil dans les outils pour les développeurs Chrome afin de découvrir son fonctionnement sur les ordinateurs et les mobiles.
  5. Utilisez le panneau Network (Réseau) de Chrome DevTools pour voir ce qui se passe lorsque vous êtes hors connexion.
  6. À l'aide du panneau Réseau des outils pour les développeurs Chrome, vous pouvez voir ce qui se passe lorsque la vitesse de la connexion 3G est lente.
  7. Ajoutez un délai au serveur de prévisions en modifiant la valeur de FORECAST_DELAY dans server.js

Audit avec Lighthouse

Lighthouse est un outil facile à utiliser qui permet d'améliorer la qualité de vos sites et pages. Lighthouse exécute des audits de performances, d'accessibilité, de progressive web apps, et plus encore. Chaque audit comprend un document de référence expliquant en quoi il est important et comment le résoudre.

Nous allons utiliser Lighthouse pour auditer notre application Météo et vérifier les modifications que nous avons apportées.

Allons à Lighthouse

  1. Ouvrez votre projet dans un nouvel onglet.
  2. Ouvrez les outils pour les développeurs Chrome et passez au panneau Audits. Laissez tous les types d'audit activés.
  3. Cliquez sur Effectuer des audits. Après un certain temps, Lighthouse vous envoie un rapport sur la page.

La progressive web app audit

Nous allons nous concentrer sur les résultats de l'audit pour les progressive web apps.

Il y a beaucoup de choses à rouge pour se concentrer sur:

  • ❗FAILED:la page actuelle ne renvoie pas de réponse 200 en mode hors connexion.
  • ❗FAILED: start_url ne répond pas par un code 200 en mode hors connexion.
  • ❗FAILED : n'enregistre pas de service worker qui contrôle la page et start_url.
  • ❗FAILED : le fichier manifeste d'application Web ne répond pas aux exigences d'installation.
  • ❗FAILED : n'est pas configuré pour un écran d'accueil personnalisé.
  • ❗FAILED:ne définit pas de couleur de thème de barre d'adresse.

Commençons à résoudre certains de ces problèmes !

À la fin de cette section, notre application de météo passera les audits suivants:

  • Le fichier manifeste d'application Web ne répond pas aux exigences d'installation.
  • n'est pas configuré pour un écran d'accueil personnalisé ;
  • Ne définit pas de couleur de thème de barre d'adresse.

Créer le fichier manifeste d'une application Web

Le fichier manifeste d'application Web est un fichier JSON simple qui vous permet, en tant que développeur, de contrôler la façon dont votre application est présentée à l'utilisateur.

Grâce au fichier manifeste d'une application Web, votre application Web peut:

  • Indiquez au navigateur que votre application doit s'ouvrir dans une fenêtre autonome (display).
  • Définissez la page à ouvrir lors du premier lancement de l'application (start_url).
  • Définissez à quoi doit ressembler l'application dans la station d'accueil ou le lanceur d'applications (short_name, icons).
  • Créez un écran d'accueil (name, icons, colors).
  • Demandez au navigateur d'ouvrir la fenêtre en mode Paysage ou Portrait (orientation).
  • et bien plus.

Créez un fichier nommé public/manifest.json dans votre projet. Copiez et collez le contenu suivant:

public/manifest.json

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }, {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

Le fichier manifeste accepte un tableau d'icônes conçu pour différentes tailles d'écran. Dans cet atelier de programmation, nous en avons inclus d'autres pour l'intégration sur iOS.

Nous devons ensuite informer le navigateur de notre fichier manifeste en ajoutant un <link rel="manifest"... à chaque page de notre application. Ajoutez la ligne suivante à l'élément <head> dans votre fichier index.html.

public/index.html

<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">

Détour pour les outils de développement

Les outils de développement vous permettent de vérifier facilement votre fichier manifest.json. Ouvrez le volet Manifest (Fichier manifeste) dans le panneau Application. Si vous avez correctement ajouté les informations du fichier manifeste, elles pourront être analysées et affichées dans un format lisible sur ce volet.

Ajouter des balises Meta et des icônes iOS

Safari sur iOS n'est pas compatible avec le fichier manifeste d'application Web. Vous devrez donc ajouter les balises meta traditionnelles au fichier <head> de votre fichier index.html:

public/index.html

<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">

Bonus: Résoudre les problèmes liés à Lighthouse

Notre audit Lighthouse a permis d'identifier d'autres problèmes très faciles à corriger.

Définir la meta description

Les descriptions peuvent s'afficher dans les résultats de recherche Google. Des descriptions uniques de haute qualité peuvent améliorer la pertinence de vos résultats pour les utilisateurs du moteur de recherche, tout en augmentant votre trafic de recherche.

Pour ajouter une description, ajoutez la balise meta suivante au <head> de votre document:

public/index.html

<!-- CODELAB: Add description here -->
<meta name="description" content="A sample weather app">

Définir la couleur du thème de la barre d'adresse

Dans l'audit de la PWA, Lighthouse a noté notre application "Ne définit pas une couleur de thème de barre d'adresse". Les couleurs de la barre d'adresse du navigateur correspondent aux couleurs de votre marque afin d'offrir une expérience utilisateur plus immersive.

Pour définir la couleur du thème sur mobile, ajoutez la balise meta suivante au <head> de votre document:

public/index.html

<!-- CODELAB: Add meta theme-color -->
<meta name="theme-color" content="#2F3BA2" />

Vérifier les modifications avec Lighthouse

Exécutez à nouveau Lighthouse (en cliquant sur le signe "+" en haut à gauche du volet "Audits") et vérifiez les modifications.

Audit de SEO

  • ✅ RÉUSSI : Le document comporte une meta description.

Audit d'application Web progressive

  • ❗FAILED : la page actuelle ne renvoie pas de réponse 200 en mode hors connexion.
  • ❗FAILED: start_url ne répond pas par un code 200 en mode hors connexion.
  • ❗FAILED : n'enregistre pas de service worker qui contrôle la page et start_url.
  • ✅ RÉUSSITE : le fichier manifeste d'une application Web respecte les conditions d'installation requises.
  • ✅ Réussi: configuré pour un écran d'accueil personnalisé.
  • ✅ RÉUSSITE: définit une couleur de thème de barre d'adresse.

Les utilisateurs disposant d'applications ont toujours une expérience de référence s'ils sont hors connexion. C'est pourquoi il est essentiel pour les applications Web installables de ne jamais afficher le jeu du dinosaure hors connexion de Chrome. L'expérience hors connexion peut aller d'une simple page hors connexion à une expérience en lecture seule avec des données précédemment mises en cache, ou encore une expérience hors connexion totalement fonctionnelle qui se synchronise automatiquement après le rétablissement de la connexion réseau.

Dans cette section, nous allons ajouter une page hors connexion simple à notre application météo. Si l'utilisateur tente de charger l'application hors connexion, elle affiche notre page personnalisée au lieu de la page hors connexion habituelle affichée par le navigateur. À la fin de cette section, notre application de météo passera les audits suivants:

  • La page actuelle ne renvoie pas de réponse 200 en mode hors connexion.
  • start_url ne répond pas par un code 200 hors connexion.
  • N'enregistre pas de service worker qui contrôle la page et start_url.

Dans la section suivante, nous allons remplacer notre page personnalisée hors connexion par une expérience hors connexion complète. Ceci permet d'améliorer l'expérience hors connexion, mais surtout, d'améliorer considérablement nos performances, car la plupart de nos éléments (HTML, CSS et JavaScript) seront stockés et diffusés localement, éliminant ainsi le réseau comme un goulot d'étranglement potentiel.

Les services informatiques à la rescousse

Si vous ne connaissez pas les employés des services, vous pouvez connaître les bases de ce qu'ils peuvent faire, leur fonctionnement, et bien plus encore en consultant l'article Présentation des nœuds de calcul de service.

Les fonctionnalités fournies via les service worker doivent être considérées comme une amélioration progressive et ne doivent être ajoutées que si elles sont compatibles avec le navigateur. Par exemple, avec les service worker, vous pouvez mettre en cache les interfaces système et les données pour votre application afin qu'elles soient disponibles même lorsque le réseau n'est pas. Lorsque les nœuds de calcul de service ne sont pas compatibles, le code hors connexion n'est pas appelé et l'utilisateur bénéficie d'une expérience de base. La détection de fonctionnalités pour assurer une amélioration progressive n'engendrera que peu de problèmes, et ne fonctionnera pas dans les navigateurs plus anciens non compatibles avec cette fonctionnalité.

Enregistrer le service worker

La première étape consiste à enregistrer le service worker. Ajoutez le code suivant au fichier index.html :

public/index.html

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
        .then((reg) => {
          console.log('Service worker registered.', reg);
        });
  });
}

Ce code vérifie si l'API de service worker est disponible. Si c'est le cas, le service worker chez /service-worker.js est enregistré une fois que la page est chargée.

Notez que le service worker est diffusé à partir du répertoire racine, et non à partir d'un répertoire /scripts/. Il s'agit du moyen le plus simple de définir la valeur scope de votre service worker. Le champ scope du service worker détermine les fichiers qu'il contrôle, c'est-à-dire à partir desquels il intercepte les requêtes. L'emplacement par défaut scope du fichier de service worker s'étend à tous les répertoires ci-dessous. Ainsi, si service-worker.js se trouve dans le répertoire racine, le service worker contrôle les requêtes de toutes les pages Web de ce domaine.

Prémettre en cache la page hors connexion

Nous devons d'abord indiquer au service worker le contenu à mettre en cache. Nous avons déjà créé une page hors connexion simple (public/offline.html) qui s'affichera à chaque fois qu'il n'y aura pas de connexion réseau.

Dans votre service-worker.js, ajoutez '/offline.html', au tableau FILES_TO_CACHE. Le résultat final doit se présenter comme suit:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/offline.html',
];

Nous devons ensuite ajouter le code suivant à l'événement install pour indiquer au service worker de mettre en cache la page hors connexion:

public/service-worker.js

// CODELAB: Precache static resources here.
evt.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page');
      return cache.addAll(FILES_TO_CACHE);
    })
);

Notre événement install ouvre désormais le cache avec caches.open() et fournit un nom de cache. Ce nom nous permet de mettre à jour les fichiers ou de séparer les données des ressources mises en cache afin de pouvoir facilement mettre à jour l'une d'entre elles, sans affecter l'autre.

Une fois le cache ouvert, nous pouvons appeler cache.addAll(), qui prend une liste d'URL, les récupère sur le serveur et y ajoute la réponse. Notez que cache.addAll() échoue en cas d'échec d'une requête. Cela signifie que si l'étape d'installation réussit, votre cache sera dans un état cohérent. Toutefois, en cas d'échec, une nouvelle tentative est automatiquement effectuée au démarrage du service worker.

Détour pour les outils de développement

Voyons comment les outils de développement peuvent vous aider à comprendre et à déboguer les nœuds de calcul. Avant d'actualiser votre page, ouvrez les Outils de développement et accédez au volet Service Workers (Nœuds de calcul) dans le panneau Application. Ils doivent se présenter comme ceci :

Lorsque vous voyez une page blanche de ce type, cela signifie qu'aucun service worker n'est enregistré pour la page actuellement ouverte.

Maintenant, actualisez la page. Le volet des nœuds de calcul de service doit se présenter comme suit:

Lorsque vous voyez des informations de ce type, cela signifie qu'un service worker est en cours d'exécution sur la page.

Un numéro (34251 dans le cas présent) est affiché à côté du libellé "État". Gardez un œil sur ce nombre lorsque vous travaillez avec des prestataires de services. C'est un moyen simple de savoir si votre service worker a été mis à jour.

Effacer d'anciennes pages hors connexion

Nous allons utiliser l'événement activate pour nettoyer les anciennes données de notre cache. Ce code garantit que votre service worker met à jour son cache chaque fois qu'un des fichiers shell de l'application est modifié. Pour que cela fonctionne, vous devez incrémenter la variable CACHE_NAME située en haut de votre fichier de service worker.

Ajoutez le code suivant à votre événement activate:

public/service-worker.js

// CODELAB: Remove previous cached data from disk.
evt.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        if (key !== CACHE_NAME) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
);

Détour pour les outils de développement

Une fois le volet des nœuds de calcul de service ouvert, actualisez la page. Le nouveau service worker est installé et le numéro d'état est incrémenté.

Le nouveau service worker prend immédiatement le contrôle, car notre événement install se termine par self.skipWaiting() et l'événement activate se termine par self.clients.claim(). Sans ces liens, l'ancien service worker continuera de contrôler la page tant qu'un onglet sera ouvert pour celle-ci.

Gérer les requêtes réseau ayant échoué

Pour finir, nous devons gérer les événements fetch. Nous allons utiliser une stratégie de réseau de secours pour mettre en cache. Le service worker tente d'extraire la ressource du réseau pour la première fois. En cas d'échec, le service worker renvoie la page hors connexion à partir du cache.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.mode !== 'navigate') {
  // Not a page navigation, bail.
  return;
}
evt.respondWith(
    fetch(evt.request)
        .catch(() => {
          return caches.open(CACHE_NAME)
              .then((cache) => {
                return cache.match('offline.html');
              });
        })
);

Le gestionnaire fetch n'a besoin que de gérer les navigations sur les pages. Les autres requêtes peuvent donc être supprimées du gestionnaire et traitées normalement par le navigateur. Cependant, si la requête .mode est navigate, utilisez fetch pour essayer d'obtenir l'élément du réseau. Si elle échoue, le gestionnaire catch ouvre le cache avec caches.open(CACHE_NAME) et utilise cache.match('offline.html') pour obtenir la page hors connexion préchargée. Le résultat est ensuite renvoyé au navigateur à l'aide de evt.respondWith().

Détour pour les outils de développement

Vérifiez que tout fonctionne comme prévu. Une fois le volet Service Workers ouvert, actualisez la page. Le nouveau service worker est installé et le numéro d'état est incrémenté.

Nous pouvons également vérifier ce que vous avez mis en cache. Accédez au volet Cache Storage (Stockage cache) du panneau Application (Application) des outils de développement. Effectuez un clic droit sur Cache Storage, choisissez Refresh Caches (Actualiser les caches), puis développez la section. Le nom de votre cache statique doit s'afficher sur la gauche. Cliquez sur le nom du cache pour afficher tous les fichiers mis en cache.

Testons maintenant le mode hors connexion. Revenez au volet Service Workers (Nœuds de calcul) dans le panneau Application (Application) des outils de développement et cochez la case Offline (Hors connexion). Après l'avoir vérifié, une petite icône d'avertissement jaune devrait s'afficher à côté de l'onglet du panneau Réseau. Cette icône indique que vous êtes hors connexion.

Actualisez la page et cela fonctionne ! Nous obtenons nos pandas hors connexion au lieu de dino hors connexion Chrome.

Conseils pour tester les service worker

Déboguer les nœuds de calcul du service peut s'avérer difficile, et lorsqu'il s'agit de mettre en cache des données, cela peut encore devenir un cauchemar si vous ne mettez pas à jour le cache. Entre le cycle de vie habituel des nœuds de calcul et un bug dans votre code, il se peut que vous rencontriez des difficultés. À ne pas faire.

Utiliser les outils de développement

Dans le volet Service Workers (Nœuds de calcul) du panneau Application, certaines cases à cocher vous permettent de simplifier votre quotidien.

  • Hors connexion : lorsqu'il est coché, il simule une expérience hors connexion et empêche les requêtes d'accéder au réseau.
  • Mise à jour lors de l'actualisation : cochez cette option pour obtenir le dernier service worker, l'installer et l'activer immédiatement.
  • Ignorer pour le réseau : lorsque cette option est cochée, les requêtes contournent le service worker et sont envoyées directement au réseau.

Prenez un nouveau départ

Dans certains cas, vous pouvez être en train de charger des données mises en cache ou de ne pas effectuer la mise à jour comme prévu. Pour effacer toutes les données enregistrées (localStorage, indexDB, les fichiers mis en cache) et supprimer les service worker, utilisez le volet Effacer l'espace de stockage du panneau Application. Vous pouvez aussi travailler dans une fenêtre de navigation privée.

Conseils supplémentaires :

  • Une fois qu'un service worker a été désinscrit, il peut rester répertorié jusqu'à ce que la fenêtre de navigateur correspondante soit fermée.
  • Si plusieurs fenêtres de votre application sont ouvertes, un nouveau service worker ne sera appliqué qu'une fois que toutes les fenêtres auront été rechargées et mises à jour vers le service worker le plus récent.
  • L'annulation de l'enregistrement d'un service worker ne supprime pas le cache.
  • Si un service worker existe et qu'un nouveau service worker est enregistré, il n'aura aucun contrôle tant que la page n'aura pas été rechargée, sauf si vous en assumez le contrôle immédiatement.

Vérifier les modifications avec Lighthouse

Exécutez à nouveau Lighthouse et vérifiez vos modifications. N'oubliez pas de décocher la case Hors connexion avant de vérifier vos modifications.

Audit de SEO

  • ✅ RÉUSSI : Le document comporte une meta description.

Audit d'application Web progressive

  • ✅ RÉUSSI:la page active renvoie un code de réponse 200 hors connexion.
  • ✅ RÉUSSITE: start_url renvoie un code de réponse 200 hors connexion.
  • ✅ RÉUSSI : enregistre un service worker qui contrôle la page et start_url..
  • ✅ RÉUSSITE : le fichier manifeste d'une application Web respecte les conditions d'installation requises.
  • ✅ Réussi: configuré pour un écran d'accueil personnalisé.
  • ✅ RÉUSSITE: définit une couleur de thème de barre d'adresse.

Prenez votre téléphone et passez en mode Avion, puis exécutez certaines de vos applications préférées. Dans la plupart des cas, ils offrent une expérience hors connexion assez fiable. Les utilisateurs s'attendent à bénéficier d'une expérience optimale de leurs applications. Le Web ne devrait pas être différent. Les progressive web apps doivent être conçues hors connexion.

Cycle de vie des nœuds de calcul de service

Le cycle de vie du service worker est la partie la plus compliquée. Si vous ne savez pas à quoi il sert et quels sont ses avantages, vous pouvez avoir l'impression de se battre. Cependant, une fois que vous savez comment il fonctionne, vous pouvez fournir aux utilisateurs des mises à jour discrètes et discrètes, en mélangeant le meilleur du Web et les formats natifs.

install événement

Le premier événement reçu par un service worker est install. Il est déclenché dès que le nœud de calcul s'exécute, et n'est appelé qu'une seule fois par service worker. Si vous modifiez le script de votre service worker, le navigateur le considère comme un autre service worker. Il recevra alors son propre événement install.

En général, l'événement install est utilisé pour mettre en cache tout ce dont vous avez besoin pour que votre application s'exécute.

activate événement

Le service worker recevra un événement activate à chaque démarrage. L'objectif principal de l'événement activate consiste à configurer le comportement du service worker, à nettoyer les ressources laissées en place lors des exécutions précédentes (par exemple, les anciens caches) et à préparer le service worker pour qu'il puisse gérer les requêtes réseau (par exemple, l'événement fetch décrit ci-dessous).

fetch événement

L'événement "fetch" permet au service worker d'intercepter les requêtes réseau et de les traiter. Il peut accéder au réseau pour obtenir la ressource, l'extraire à partir de son propre cache, générer une réponse personnalisée ou un nombre illimité d'options différentes. Consultez le Livre de recettes hors connexion pour découvrir les différentes stratégies que vous pouvez utiliser.

Mettre à jour un service worker

Le navigateur vérifie si une nouvelle version de votre service worker est disponible à chaque chargement de page. Si une nouvelle version est installée, elle est téléchargée et installée en arrière-plan, mais elle n'est pas activée. La nouvelle version de votre service worker reste en attente, jusqu'à ce qu'aucune page n'utilise plus l'ancien service worker. Une fois que toutes les fenêtres de l'ancien service worker sont fermées, le nouveau service est activé et peut prendre le contrôle. Pour en savoir plus, consultez la section Mettre à jour le service worker du document "Cycle de vie" du service worker.

Choisir la stratégie de mise en cache appropriée

Le choix de la stratégie de mise en cache dépend du type de ressource que vous essayez de mettre en cache et de la manière dont vous pourriez avoir besoin d'y accéder ultérieurement. Pour notre application météo, nous divisons les ressources dont nous avons besoin en cache en deux catégories: les ressources que nous souhaitons mettre en cache et les données que nous allons mettre en cache au moment de l'exécution.

Mettre en cache des ressources statiques

La préparation des ressources est similaire à ce qui se passe lorsqu'un utilisateur installe une application de bureau ou mobile. Les ressources clés nécessaires à son exécution sont installées ou mises en cache sur l'appareil afin d'être chargées ultérieurement, qu'il y ait une connexion réseau ou non.

Dans le cas de notre application, nous préchargeons toutes les ressources statiques lors de l'installation de notre service worker afin que toutes les données nécessaires à l'exécution de l'application soient stockées sur l'appareil de l'utilisateur. Pour accélérer le chargement de l'application, nous utilisons la stratégie first-cache. Au lieu d'accéder au réseau pour récupérer les ressources, elles sont extraites du cache local. Nous ne essayons donc pas de les récupérer à partir du réseau.

L'extraction à partir du cache local élimine toute variabilité du réseau. Quel que soit le réseau utilisé par l'utilisateur (Wi-Fi, 5G, 3G ou même 2G), les ressources clés à exploiter sont disponibles presque immédiatement.

Mettre en cache les données d'une application

La stratégie stale-while-revalidate est idéale pour certains types de données et fonctionne bien pour notre application. Elle affiche les données à l'écran le plus rapidement possible, puis se met à jour après que le réseau a renvoyé les dernières données. "stale-while-revalidate" signifie que nous devons lancer deux requêtes asynchrones : l'une vers le cache et l'autre dans le réseau.

Dans des circonstances normales, les données mises en cache sont renvoyées presque immédiatement, ce qui fournit à l'application les données récentes qu'elle peut utiliser. Ensuite, lorsque la requête réseau renvoie, l'application est mise à jour à l'aide des dernières données du réseau.

Dans le cas de notre application, cela offre une meilleure expérience que le réseau et la stratégie de mise en cache, car l'utilisateur n'a pas à attendre que la requête réseau expire pour voir un élément qui s'affiche à l'écran. Ils peuvent voir les données plus anciennes, mais une fois la requête réseau renvoyée, l'application sera mise à jour avec les données les plus récentes.

Mettre à jour la logique de l'application

Comme indiqué précédemment, l'application doit lancer deux requêtes asynchrones : une au cache et l'autre au réseau. L'application utilise l'objet caches disponible dans window pour accéder au cache et récupérer les dernières données. C'est un excellent exemple d'amélioration progressive, car l'objet caches peut ne pas être disponible dans tous les navigateurs. Si ce n'est pas le cas, la requête réseau devrait tout de même fonctionner.

Mettez à jour la fonction getForecastFromCache(), vérifiez si l'objet caches est disponible dans l'objet window global et, le cas échéant, demandez les données à partir du cache.

public/scripts/app.js

// CODELAB: Add code to get weather forecast from the caches object.
if (!('caches' in window)) {
  return null;
}
const url = `${window.location.origin}/forecast/${coords}`;
return caches.match(url)
    .then((response) => {
      if (response) {
        return response.json();
      }
      return null;
    })
    .catch((err) => {
      console.error('Error getting data from cache', err);
      return null;
    });

Nous devons ensuite modifier updateData() de sorte qu'il effectue deux appels : un vers getForecastFromNetwork() pour obtenir les prévisions du réseau, et un autre vers getForecastFromCache() pour obtenir les dernières prévisions mises en cache :

public/scripts/app.js

// CODELAB: Add code to call getForecastFromCache.
getForecastFromCache(location.geo)
    .then((forecast) => {
      renderForecast(card, forecast);
    });

Notre application de météo envoie désormais deux requêtes asynchrones pour les données, l'une à partir du cache et l'autre via un fetch. Si le cache contient des données, celles-ci sont renvoyées et affichées très rapidement (quelques dizaines de millisecondes). Ensuite, lorsque fetch répond, la carte est mise à jour avec les données les plus récentes directement à partir de l'API Weather.

Notez que la requête cache et la requête fetch se terminent toutes les deux par un appel pour mettre à jour la fiche des prévisions. Comment l'appli sait-elle s'il affiche les dernières données ? Cette opération est effectuée dans le code suivant depuis renderForecast() :

public/scripts/app.js

// If the data on the element is newer, skip the update.
if (lastUpdated >= data.currently.time) {
  return;
}

Chaque fois qu'une fiche est mise à jour, l'application stocke l'horodatage des données dans un attribut masqué sur la carte. L'application ne fonctionne que si l'horodatage déjà présent sur la carte est plus récent que les données transmises à la fonction.

Prémettre en cache nos ressources d'application

Dans le service worker, ajoutons un DATA_CACHE_NAME pour séparer les données de l'application de celles de l'interface système. Lorsque le shell de l'application est mis à jour et que les caches anciens sont supprimés définitivement, les données restent intactes, ce qui permet un chargement ultrarapide. N'oubliez pas que si votre format de données change à l'avenir, vous devrez gérer ce problème et vous assurer que l'interface système et le contenu restent synchronisés.

public/service-worker.js

// CODELAB: Update cache names any time any of the cached files change.
const CACHE_NAME = 'static-cache-v2';
const DATA_CACHE_NAME = 'data-cache-v1';

N'oubliez pas de mettre également à jour la CACHE_NAME, car nous allons également modifier toutes nos ressources statiques.

Pour que notre application fonctionne hors connexion, nous devons mettre en cache toutes les ressources dont elle a besoin. Cela nous permettra également d'améliorer nos performances. Au lieu d'obtenir toutes les ressources du réseau, l'application peut les charger toutes à partir du cache local, ce qui élimine toute instabilité du réseau.

Mettez à jour le tableau FILES_TO_CACHE avec la liste des fichiers:

public/service-worker.js

// CODELAB: Add list of files to cache here.
const FILES_TO_CACHE = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/scripts/install.js',
  '/scripts/luxon-1.11.4.js',
  '/styles/inline.css',
  '/images/add.svg',
  '/images/clear-day.svg',
  '/images/clear-night.svg',
  '/images/cloudy.svg',
  '/images/fog.svg',
  '/images/hail.svg',
  '/images/install.svg',
  '/images/partly-cloudy-day.svg',
  '/images/partly-cloudy-night.svg',
  '/images/rain.svg',
  '/images/refresh.svg',
  '/images/sleet.svg',
  '/images/snow.svg',
  '/images/thunderstorm.svg',
  '/images/tornado.svg',
  '/images/wind.svg',
];

Étant donné que nous générons manuellement la liste des fichiers à mettre en cache, nous devons mettre à jour le CACHE_NAME chaque fois que nous mettons à jour un fichier. Nous avons supprimé offline.html de la liste des fichiers mis en cache, car notre appli dispose désormais de toutes les ressources nécessaires pour fonctionner hors connexion et n'affiche plus jamais la page hors connexion.

Mettre à jour le gestionnaire d'événements d'activation

Pour éviter que notre événement activate ne supprime accidentellement nos données, dans l'événement activate de service-worker.js, remplacez if (key !== CACHE_NAME) { par:

public/service-worker.js

if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {

Mettre à jour le gestionnaire d'événements de récupération

Nous devons modifier le service worker pour intercepter les requêtes envoyées à l'API Weather et stocker les réponses dans le cache afin de pouvoir y accéder facilement par la suite. Dans la stratégie d'obsolescence obsolète, la réponse du réseau doit être la source de référence, et toujours fournir les informations les plus récentes. Si le réseau ne peut pas échouer, car nous avons déjà récupéré les dernières données en cache dans notre appli.

Mettez à jour le gestionnaire d'événements fetch pour gérer les requêtes envoyées à l'API de données séparément des autres requêtes.

public/service-worker.js

// CODELAB: Add fetch event handler here.
if (evt.request.url.includes('/forecast/')) {
  console.log('[Service Worker] Fetch (data)', evt.request.url);
  evt.respondWith(
      caches.open(DATA_CACHE_NAME).then((cache) => {
        return fetch(evt.request)
            .then((response) => {
              // If the response was good, clone it and store it in the cache.
              if (response.status === 200) {
                cache.put(evt.request.url, response.clone());
              }
              return response;
            }).catch((err) => {
              // Network request failed, try to get it from the cache.
              return cache.match(evt.request);
            });
      }));
  return;
}
evt.respondWith(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.match(evt.request)
          .then((response) => {
            return response || fetch(evt.request);
          });
    })
);

Le code intercepte la requête et vérifie s'il s'agit d'une prévision météo. Si c'est le cas, utilisez fetch pour faire la requête. Une fois la réponse renvoyée, ouvrez le cache, clonez la réponse, stockez-la dans le cache et renvoyez la réponse au demandeur d'origine.

Nous devons supprimer la vérification evt.request.mode !== 'navigate', car nous voulons que notre service worker gère toutes les requêtes (y compris les images, les scripts, les fichiers CSS, etc.) et pas seulement les navigations. Si nous la laissons, seul le code HTML est diffusé à partir du cache du service worker. Tous les autres éléments seront demandés au réseau.

Essayer

L'application devrait désormais être totalement fonctionnelle. Actualisez la page pour vous assurer que le dernier service worker est installé. Enregistrez ensuite deux villes et appuyez sur le bouton "Actualiser" dans l'application pour obtenir des données météo actualisées.

Ensuite, accédez au volet Cache Storage (Stockage cache) du panneau Application (Application) des outils de développement. Développez la section pour afficher le nom de votre cache statique et celui du cache de données sur la gauche. L'ouverture du cache de données devrait afficher les données stockées pour chaque ville.

Accédez au volet Service Workers (Nœuds de calcul) et cochez la case Offline (Hors connexion). Essayez d'actualiser la page, puis passez hors connexion et actualisez la page.

Si vous utilisez un réseau rapide et que vous souhaitez voir comment les données météo sont mises à jour avec une connexion lente, définissez la propriété FORECAST_DELAY sur server.js sur 5000. Toutes les requêtes adressées à l'API de prévision seront retardées de 5 000 ms.

Vérifier les modifications avec Lighthouse

C'est aussi une bonne idée d'exécuter à nouveau Lighthouse.

Audit de SEO

  • ✅ RÉUSSI: Le document comporte une meta description.

Audit d'application Web progressive

  • ✅ RÉUSSI:la page active renvoie un code de réponse 200 hors connexion.
  • ✅ RÉUSSITE : start_url renvoie un code de réponse 200 hors connexion.
  • ✅ RÉUSSI : enregistre un service worker qui contrôle la page et start_url..
  • ✅ RÉUSSITE: le fichier manifeste d'une application Web respecte les conditions d'installation requises.
  • ✅ Réussi : configuré pour un écran d'accueil personnalisé.
  • ✅ RÉUSSITE : définit une couleur de thème de barre d'adresse.

Lorsqu'une progressive web app est installée, elle se comporte et se comporte comme toutes les autres applications installées. Elle se lance depuis le même endroit que les autres applications. Elle fonctionne dans une application sans barre d'adresse ni aucune autre interface utilisateur de navigateur. Et comme toutes les autres applications installées, il s'agit d'une application de premier niveau dans le sélecteur de tâches.

Dans Chrome, une progressive web app peut être installée via le menu contextuel à trois points, ou vous pouvez fournir à l'utilisateur un bouton ou un autre composant d'interface utilisateur qui l'invite à installer votre application.

Audit avec Lighthouse

Pour qu'un utilisateur puisse installer votre progressive web app, celle-ci doit répondre à certains critères. La méthode la plus simple consiste à utiliser Lighthouse et à vous assurer qu'il répond aux critères d'installation.

Si vous avez suivi cet atelier de programmation, votre PWA doit déjà répondre à ces critères.

Ajouter le fichier install.js à l'index.html

Commençons par ajouter install.js au fichier index.html.

public/index.html

<!-- CODELAB: Add the install script here -->
<script src="/scripts/install.js"></script>

Écouter beforeinstallprompt événement

Si les critères d'ajout à l'écran d'accueil sont remplis, Chrome déclenche un événement beforeinstallprompt que vous pouvez utiliser pour indiquer que votre application peut être installée et installée, puis invite l'utilisateur à l'installer. Ajoutez le code ci-dessous pour écouter l'événement beforeinstallprompt:

public/scripts/install.js

// CODELAB: Add event listener for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);

Enregistrer l'événement et afficher le bouton d'installation

Dans la fonction saveBeforeInstallPromptEvent, nous allons enregistrer une référence à l'événement beforeinstallprompt afin de pouvoir appeler prompt() ultérieurement et mettre à jour notre interface utilisateur pour afficher le bouton d'installation.

public/scripts/install.js

// CODELAB: Add code to save event & show the install button.
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

Afficher l'invite et masquer le bouton

Lorsque l'utilisateur clique sur le bouton d'installation, nous devons appeler .prompt() pour l'événement beforeinstallprompt enregistré. Nous devons également masquer le bouton d'installation, car .prompt() ne peut être appelé qu'une seule fois par événement enregistré.

public/scripts/install.js

// CODELAB: Add code show install prompt & hide the install button.
deferredInstallPrompt.prompt();
// Hide the install button, it can't be called twice.
evt.srcElement.setAttribute('hidden', true);

Lorsque vous appelez .prompt(), une boîte de dialogue modale s'affiche pour demander à l'utilisateur d'ajouter votre application à son écran d'accueil.

Consigner les résultats

Vous pouvez vérifier comment l'utilisateur a répondu à la boîte de dialogue d'installation en écoutant la promesse renvoyée par la propriété userChoice de l'événement beforeinstallprompt enregistré. La promesse renvoie un objet avec une propriété outcome une fois que l'invite a été affichée et que l'utilisateur a répondu.

public/scripts/install.js

// CODELAB: Log user response to prompt.
deferredInstallPrompt.userChoice
    .then((choice) => {
      if (choice.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt', choice);
      } else {
        console.log('User dismissed the A2HS prompt', choice);
      }
      deferredInstallPrompt = null;
    });

Un commentaire sur userChoice : la spécification la définit comme une propriété et non une fonction attendue.

Consigner tous les événements d'installation

Outre les interfaces que vous ajoutez pour installer votre application, les utilisateurs peuvent installer votre PWA par d'autres méthodes, par exemple le menu à trois points de Chrome. Pour suivre ces événements, écoutez l'événement installé.

public/scripts/install.js

// CODELAB: Add event listener for appinstalled event
window.addEventListener('appinstalled', logAppInstalled);

Nous devons ensuite mettre à jour la fonction logAppInstalled. Pour cet atelier de programmation, nous allons simplement utiliser console.log. Toutefois, dans une application en production, vous souhaiterez probablement enregistrer cet événement en tant qu'événement avec votre logiciel d'analyse.

public/scripts/install.js

// CODELAB: Add code to log the event
console.log('Weather App was installed.', evt);

Mettre à jour le service worker

N'oubliez pas de mettre à jour le CACHE_NAME dans votre fichier service-worker.js, car vous avez apporté des modifications aux fichiers déjà en cache. L'activation de la case à cocher Ignorer pour le réseau dans le volet Service Workers du panneau Application dans les outils de développement fonctionne en développement, mais n'apporte aucune aide dans le monde réel.

Essayer

Voyons comment s'est déroulée l'installation. Par mesure de précaution, utilisez le bouton Effacer les données du site dans le panneau Application des outils de développement pour effacer tout le contenu et vous assurer que nous repartons tous avec zéro. Si vous aviez déjà installé cette application, veillez à la désinstaller. Sinon, elle ne s'affichera plus.

Vérifier que le bouton d'installation est visible

Tout d'abord, vérifions que l'icône d'installation s'affiche correctement. Veillez à essayer cette fonctionnalité sur les ordinateurs et les mobiles.

  1. Ouvrez l'URL dans un nouvel onglet Chrome.
  2. Ouvrez le menu à trois points de Chrome (à côté de la barre d'adresse).
    ▢ Vérifiez que vous voyez Installer la météo dans le menu.
  3. Actualisez les données météo à l'aide du bouton "Actualiser" en haut à droite pour vérifier que l'heure d'engagement utilisateur est respectée.
    ▢ Assurez-vous que l'icône d'installation s'affiche dans l'en-tête de l'application.

Vérifier le fonctionnement du bouton d'installation

À présent, vérifions que tout fonctionne correctement et que nos événements sont bien déclenchés. Vous pouvez le faire sur un ordinateur ou sur un mobile. Si vous souhaitez tester cette fonctionnalité sur un appareil mobile, assurez-vous d'utiliser le débogage à distance afin de voir ce qui est enregistré dans la console.

  1. Ouvrez Chrome et, dans un nouvel onglet du navigateur, accédez à votre PWA Météo.
  2. Ouvrez les outils de développement et passez au panneau Console.
  3. Cliquez sur le bouton d'installation dans l'angle supérieur droit.
    ▢ Vérifiez que le bouton d'installation disparaît
    ▢ Vérifiez que la boîte de dialogue de la fenêtre d'installation s'affiche.
  4. Cliquez sur "Cancel" (Annuler).
    ▢ "Vérifier" : L'utilisateur a ignoré l'invite A2HS et apparaît dans le résultat de la console.
    ▢ Vérifiez que le bouton d'installation réapparaît.
  5. Cliquez à nouveau sur le bouton d'installation, puis sur le bouton d'installation dans la boîte de dialogue modale.
    ▢ Vérifiez que l'invite A2HS a été acceptée par l'utilisateur, qui s'affiche dans les résultats de la console.
    ▢ Vérifiez que l'application Weather application a été installée s'affiche dans les résultats de la console.
    ▢ Vérifiez que l'application Météo est ajoutée à l'emplacement où vous trouverez généralement les applications.
  6. Lancez la PWA météo.
    ▢ Vérifiez que l'application s'ouvre en tant qu'application autonome, qu'elle s'affiche dans une fenêtre d'application sur ordinateur ou en plein écran sur mobile.

.

Vérifier que l'installation iOS fonctionne correctement

Regardons aussi le comportement sur iOS. Si vous possédez un appareil iOS, vous pouvez l'utiliser ou, si vous utilisez un Mac, tester le simulateur iOS disponible avec Xcode.

  1. Ouvrez Safari et, dans un nouvel onglet de navigateur, accédez à votre PWA Météo.
  2. Cliquez sur le bouton Partager .
  3. Faites défiler l'écran vers la droite et cliquez sur le bouton Add to Home Screen (Ajouter à l'écran d'accueil).
    ▢ Vérifier que le titre, l'URL et l'icône sont corrects
  4. Cliquez sur Ajouter.
    ▢ Assurez-vous que l'icône de l'application est ajoutée à l'écran d'accueil.
  5. Lancez la PWA météo sur l'écran d'accueil.
    ▢ Vérifiez que l'appli s'affiche en plein écran.

Bonus: Détecter si votre application est lancée depuis l'écran d'accueil

La requête média display-mode permet d'appliquer des styles en fonction du mode de lancement de l'application ou de déterminer le mode de lancement de JavaScript. 

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

Vous pouvez également consulter la requête média display-mode en JavaScript pour voir si vous exécutez la version autonome.

Bonus: Désinstaller votre PWA

N'oubliez pas que le beforeinstallevent ne se déclenche pas si l'application est déjà installée. Pendant son développement, vous devrez probablement installer et désinstaller votre application plusieurs fois pour vous assurer que tout fonctionne comme prévu.

Android

Sur Android, les PWA sont désinstallées de la même manière que les autres applications installées.

  1. Ouvrez le panneau des applications.
  2. Faites défiler la page jusqu'à l'icône Météo.
  3. Faites glisser l'icône de l'application en haut de l'écran.
  4. Sélectionnez Désinstaller.

Chrome OS

Sur Chrome OS, les PWA sont facilement désinstallées du champ de recherche du lanceur d'applications.

  1. Ouvrez le lanceur d'applications.
  2. Saisissez Météo dans le champ de recherche, qui devrait apparaître dans les résultats.
  3. Effectuez un clic droit (alt-click) sur la PWA météo.
  4. Cliquez sur Supprimer de Chrome.

macOS et Windows

Sous Mac et Windows, les PWA peuvent être désinstallées via Chrome:

  1. Dans un nouvel onglet de navigateur, ouvrez la page chrome://apps.
  2. Effectuez un clic droit (alt-click) sur la PWA météo.
  3. Cliquez sur Supprimer de Chrome.

Vous pouvez également ouvrir la PWA installée, cliquer sur le menu contextuel à trois points dans l'angle supérieur droit, puis sélectionner "Désinstaller la PWA météo..."

Félicitations, vous avez créé votre première progressive web app !

Vous avez ajouté un fichier manifeste d'application Web pour permettre son installation, et vous avez ajouté un service worker pour garantir la rapidité et la fiabilité de votre PWA. Vous avez appris à utiliser les outils de développement pour auditer une application et vous pouvez améliorer l'expérience utilisateur proposée.

Vous connaissez maintenant les étapes clés requises pour transformer une application Web en progressive web app.

Étapes suivantes

Découvrez quelques-uns des ateliers de programmation...

Complément d'informations

Documents de référence