Débogage d’applications web progressives (PWA)

Utilisez l’outil Application pour inspecter, modifier et déboguer des manifestes d’application web, des workers de service et des caches de service Worker. L’outil Application comprend les volets suivants pour les fonctionnalités d’application web progressive :

• Utilisez le volet Manifeste pour inspecter votre manifeste d’application web et déclencher des événements « Ajouter à l’écran d’accueil ».

• Utilisez le volet Service Workers 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 annuler l’inscription d’un service Worker et effacer tous les caches et stockage.

Cet article décrit les fonctionnalités d’application web progressive de l’outil Application . Pour obtenir de l’aide sur les autres volets de l’outil Application , consultez Afficher les fichiers de ressources qui composent une page web et 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.

Une fois votre manifeste configuré, vous pouvez utiliser le volet Manifeste de l’application de l’outil Application pour inspecter votre manifeste :

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

• 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 examiner la source du manifeste, cliquez sur le lien sous l’étiquette Manifeste d’application (manifest.json dans la figure précédente, qui ouvre https://airhorner.com/manifest.json).

• 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. Ces scripts vous permettent 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.

Le volet Service Workers de l’outil Application est l’emplacement main dans DevTools pour inspecter et déboguer les workers de service :

• Si un service Worker est installé sur la page actuellement ouverte, il est répertorié dans ce volet. 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 Réseau ou à l’option Go offline du 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 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 bouton Annuler l’inscription annule l’inscription du service Worker spécifié. Consultez Stockage pour obtenir un moyen d’annuler l’inscription d’un Worker de service et de réinitialiser le stockage et les caches d’un simple clic sur un bouton.

• 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 Service Worker actuellement actif. En regard de la status, un bouton Démarrer (si le service Worker est arrêté) ou un bouton d’arrêt (si le Service Worker est en cours d’exécution) 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.

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

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 ?

Stockage

Le volet Stockage est une fonctionnalité très utile lors du développement d’applications web progressives. Ce volet vous permet d’annuler l’inscription des workers de service et d’effacer tous les caches et le stockage en un seul clic.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

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