Déboguer une application web progressive (PWA)

Utilisez l’outil Application pour inspecter, modifier et déboguer les manifestes d’application web, les workers de service et les caches de service worker d’une PWA.

Outil d’application comprend les volets suivants pour les fonctionnalités PWA :

• Utilisez le volet Manifeste pour inspecter votre manifeste d’application web.

• Utilisez le volet Workers de service pour les tâches liées au service-worker, telles que :

  • Annulation de l’inscription ou mise à jour d’un service.
  • Émulation d’événements push.
  • Mise hors connexion.
  • Arrêt d’un worker de service.

• Utilisez le volet Stockage du cache pour afficher le cache de votre Service Worker.

• Utilisez le volet Stockage pour afficher la quantité de données que votre application stocke sur l’appareil et effacer les données stockées.

Les fonctionnalités décrites ci-dessous sont des fonctionnalités de l’outil Application sont pertinentes pour les PWA. Pour obtenir de l’aide sur les autres fonctionnalités et volets de l’outil Application , consultez :

• Afficher les fichiers de ressources qui composent une page web
• Afficher et modifier le stockage local

Voir aussi :

• Vue d’ensemble des applications web progressives (PWA)

Manifeste d’une application web

Si vous souhaitez que vos utilisateurs puissent ajouter votre application à leurs écrans d’accueil mobiles, vous avez besoin d’un manifeste d’application web. Le manifeste définit comment l’application apparaît sur l’écran d’accueil, où diriger l’utilisateur lors du lancement à partir de l’écran d’accueil et à quoi ressemble l’application au lancement.

Pour inspecter un manifeste :

1. Accédez à la page web qui utilise le manifeste, par exemple Airhorner.com, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez Outil d’application .

4. Dans le plan de gauche, dans la section Application , sélectionnez Manifeste.

   Le volet Manifeste de l’application s’affiche, où vous pouvez inspecter le manifeste :

Le volet Manifeste de l’application contient les sections suivantes :

• Section supérieure, contenant le lien du manifeste

• Identité

• Présentation

• Gestionnaires de protocole

• Icônes

• Superposition des contrôles de fenêtre

• Capture d’écran #1

• Capture d’écran #2

• Pour afficher le fichier source du manifeste, cliquez sur le lien sous l’étiquette Manifeste d’application . Dans la figure précédente, ce lien est manifest.json, ce qui ouvre https://airhorner.com/manifest.json, pour Airhorner.com.

• Les sections Identité et Présentation affichent les champs de la source du manifeste dans un affichage plus convivial.

• La section Icônes affiche toutes les icônes spécifiées dans le manifeste.

Workers du service

Les travailleurs du service sont une technologie fondamentale de la plateforme web. Les workers de service sont des scripts que le navigateur exécute en arrière-plan, distincts d’une page web. Les scripts de Service Worker permettent à votre application d’accéder à des fonctionnalités qui n’ont pas besoin d’une page web ou d’une interaction utilisateur, telles que les notifications Push, la synchronisation en arrière-plan et les expériences hors connexion.

L’emplacement principal dans DevTools pour inspecter et déboguer les workers de service est le volet Workers de service dans tool.

Pour afficher les workers de service :

1. Accédez à une page web, telle qu’Airhorner.com, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez Outil d’application .

4. Dans le plan de gauche, dans la section Application , sélectionnez Service Workers.

   Le volet Service Workers s’affiche :

• Si un Service Worker est installé sur la page actuellement ouverte, le Service Worker est répertorié dans le volet Service Workers . Par exemple, dans la figure précédente, un worker de service est installé pour l’étendue de https://weather-pwa-sample.firebaseapp.com.

• La case Hors connexion place DevTools en mode hors connexion. Cela équivaut au mode hors connexion disponible à partir de l’outil ou de l’option Go offline dans le menu Commandes.

• La case à cocher Mettre à jour lors du rechargement force le worker de service à mettre à jour à chaque chargement de page.

• La case à cocher Contourner pour le réseau contourne le worker du service et force le navigateur à accéder au réseau pour les ressources demandées.

• Le lien Demandes réseau vous permet d’accéder à l’outil Réseau avec une liste de demandes interceptées liées au worker de service (le is:service-worker-intercepted filtre). Consultez Afficher les requêtes réseau gérées par un worker de service ci-dessous.

• Le bouton Mettre à jour effectue une mise à jour unique du service Worker spécifié.

• Le bouton Push émule une notification Push sans charge utile (également appelée chatouillement).

• Le bouton Synchroniser émule un événement de synchronisation en arrière-plan.

• Le lien Annuler l’inscription annule l’inscription du worker de service spécifié. Pour annuler l’inscription d’un worker de service et réinitialiser le stockage et les caches d’un simple clic sur le bouton, consultez Effacer le stockage, ci-dessous.

• La ligne Source vous indique quand le Service Worker en cours d’exécution a été installé. Le lien est le nom du fichier source du service Worker. Le choix du lien vous envoie à la source du service Worker.

• La ligne État indique les status du service Worker. Le numéro d’identification en regard de l’indicateur de status vert (#36 dans la figure précédente) correspond au worker de service actuellement actif.

  En regard de la status :

  • Si le service Worker est arrêté, un bouton Démarrer s’affiche.
  • Si le service Worker est en cours d’exécution, un bouton Arrêter s’affiche.

  Les workers de service sont conçus pour être arrêtés et démarrés par le navigateur à tout moment. L’arrêt explicite de votre service Worker à l’aide du bouton Arrêter peut simuler cela.

  L’arrêt de votre Service Worker est un excellent moyen de tester le comportement de votre code lorsque le Service Worker redémarre. Il révèle souvent des bogues dus à des hypothèses erronées concernant l’état global persistant.

• La ligne Clients vous indique l’origine à laquelle le worker de service est limité. Le bouton focus est principalement utile lorsque vous avez activé la case à cocher Afficher tout . Lorsque cette case à cocher est activée, tous les workers de service inscrits sont répertoriés. Si vous cliquez sur le bouton focus en regard d’un service Worker qui s’exécute dans un autre onglet, Microsoft Edge se concentre sur cet onglet.

• Le tableau Cycle de mise à jour affiche les activités du worker de service et leurs temps écoulés, tels que Installer, Attendre et Activer. Pour afficher l’horodatage exact de chaque activité, cliquez sur les boutons Développer ().

Si le service Worker provoque des erreurs, une étiquette Erreurs s’affiche.

Voir aussi :

• API Service Worker : sur MDN, à propos des Workers de service.

Afficher les demandes réseau gérées par un worker de service

À partir du volet Workers de service de l’outil Application , vous pouvez accéder rapidement à la liste des demandes réseau gérées par un worker de service, via l’outil Réseau .

Pour afficher les demandes réseau gérées par un service Worker :

1. Accédez à une page web, telle qu’Airhorner.com, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

   DevTools s’ouvre.

3. Dans DevTools, sélectionnez Outil d’application .

4. Dans le plan de gauche, dans la section Application , sélectionnez Service Workers.

   Le volet Workers du service s’affiche.

5. Dans le coin supérieur droit du volet Workers du service , cliquez sur le bouton Demandes réseau .

   Outil réseau s’ouvre.

   La zone de texte Filtrer contient is:service-worker-intercepted. Ce filtre affiche uniquement les requêtes qui ont été gérées par ce service worker.

6. Actualisez la page web.

7. Sélectionnez l’une des requêtes, par exemple main.css.

   La barre latérale s’affiche.

8. Dans la barre latérale, cliquez sur l’onglet Minutage .

   La section Service Worker affiche des informations de minutage sur les phases Démarrage et respondWith .

Caches de Service Worker

Le volet Stockage du cache fournit une liste en lecture seule des ressources qui ont été mises en cache à l’aide de l’API de cache (Service Worker) :

La première fois que vous ouvrez un cache et que vous y ajoutez une ressource, DevTools peut ne pas détecter la modification. Actualisez la page pour afficher le cache.

Tous les caches ouverts sont répertoriés sous l’expandeur Stockage du cache .

Utilisation du quota

Certaines réponses dans le volet Stockage du cache peuvent être marquées comme étant « opaques ». Il s’agit d’une réponse récupérée à partir d’une autre origine, par exemple à partir d’un CDN ou d’une API distante, lorsque CORS n’est pas activé.

Afin d’éviter les fuites d’informations inter-domaines, un remplissage important est ajouté à la taille d’une réponse opaque utilisée pour calculer les limites de quota de stockage (par exemple, si une QuotaExceeded exception est levée) et signalé par l’API navigator.storage .

Les détails de ce remplissage varient d’un navigateur à l’autre, mais pour Microsoft Edge, cela signifie que la taille minimale qu’une seule réponse opaque mise en cache contribue à l’utilisation globale du stockage est d’environ 7 mégaoctets. N’oubliez pas le remplissage lorsque vous déterminez le nombre de réponses opaques que vous souhaitez mettre en cache, car vous pouvez facilement dépasser les limites de quota de stockage beaucoup plus tôt que prévu en fonction de la taille réelle des ressources opaques.

Guides connexes :

• Stack Overflow : quelles limitations s’appliquent aux réponses opaques ?

Effacer le stockage

L’onglet Effacer le stockage est utile lors du développement d’une application web progressive. Utilisez le volet Effacer le stockage pour annuler l’inscription des workers de service et effacer tous les caches et le stockage, d’un simple clic sur le bouton.

Voir également

• Inspecter l’activité réseau

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.