Déboguer les progressive web apps

Utilisez le panneau Application pour inspecter, modifier et déboguer les fichiers manifestes d'applications Web, les service workers et les caches de service workers.

Les progressive web app (PWA) sont des applications modernes de haute qualité conçues à l'aide de la technologie Web. Elles offrent des fonctionnalités similaires à celles des applications iOS, Android et de bureau. Les voici :

• Elles sont fiables, même dans des conditions de réseau instables.
• Elles peuvent être installées sur les surfaces de lancement des systèmes d'exploitation, comme le dossier Applications sur Mac OS X, le menu Démarrer sur Windows et l'écran d'accueil sur Android et iOS.
• Elles s'affichent dans les commutateurs d'activité, les moteurs de recherche d'appareils tels que Spotlight et les feuilles de partage de contenu.

Ce guide ne traite que des fonctionnalités de progressive web app du panneau Application. Si vous avez besoin d'aide concernant les autres volets, consultez la dernière section de ce guide, Autres guides sur le panneau Application.

Résumé

• Utilisez l'onglet Manifest pour inspecter le fichier manifeste de votre application Web.
• Utilisez l'onglet Service Workers pour effectuer un large éventail de tâches liées aux service workers, comme annuler l'enregistrement ou mettre à jour un service, émuler des événements push, passer hors connexion ou arrêter un service worker.
• Affichez le cache de votre service worker dans l'onglet Cache Storage.
• Annulez l'enregistrement d'un service worker et effacez tous les espaces de stockage et les caches en un seul clic dans l'onglet Clear storage.

Fichier manifeste d'application Web

Si vous souhaitez que vos utilisateurs puissent ajouter votre application au dossier Applications sur Mac OS X, au menu Démarrer sur Windows et à l'écran d'accueil sur Android et iOS, vous avez besoin d'un fichier manifeste d'application Web. Le fichier manifeste définit l'apparence de l'application sur l'écran d'accueil, l'endroit où l'utilisateur est redirigé lorsqu'il lance l'application depuis l'écran d'accueil et l'apparence de l'application au lancement.

Une fois votre fichier manifeste configuré, vous pouvez l'inspecter à l'aide de l'onglet Manifest du panneau Application.

• Pour consulter la source du fichier manifeste, cliquez sur le lien sous le libellé App Manifest (manifest.webmanifest dans la capture d'écran ci-dessus).
• Les sections Identity et Presentation affichent simplement les champs de la source du fichier manifeste de manière plus conviviale.
• La section Protocol Handlers vous permet de tester l'enregistrement du gestionnaire de protocole d'URL de votre PWA en un seul clic. Pour en savoir plus, consultez Tester l'enregistrement du gestionnaire de protocole d'URL.
• La section Icons affiche toutes les icônes que vous avez spécifiées et vous permet de vérifier leurs masques.
• L'ensemble de sections "Shortcut #N" affiche des informations sur tous vos objets de raccourci.
• L'ensemble de sections « Screenshot #N » affiche les captures d'écran pour une interface utilisateur d'installation plus riche de votre application.

De plus, si les outils de développement rencontrent une erreur, par exemple une icône qui ne peut pas être chargée, l'onglet Manifest affiche une section Installability décrivant l'erreur.

Afficher et vérifier les icônes masquables

La section Icons de l'onglet Manifest affiche toutes les icônes de votre application. Dans cette section, vous pouvez également vérifier les zones de sécurité pour les icônes masquables, le format des icônes qui s'adaptent aux plates-formes.

Pour rogner les icônes afin que seule la zone de sécurité minimale soit visible, cochez la case Show only the minimum safe area for maskable icons (Afficher uniquement la zone de sécurité minimale pour les icônes masquables).

Si l'intégralité de votre logo est visible dans la zone de sécurité, vous pouvez continuer.

Déclencher l'installation

Chrome vous permet d'activer et de promouvoir l'installation de votre PWA directement dans son interface utilisateur. Découvrez comment fournir votre propre expérience d'installation dans l'application.

Pour déclencher le flux d'installation de votre PWA :

1. Ouvrez la page de destination de la PWA dans Chrome.

2. À droite de la barre d'adresse en haut, cliquez sur Installer.

   

3. Suivez les instructions à l'écran.

La fonctionnalité Install app (Installer l'application) (ou Add to home screen (Ajouter à l'écran d'accueil) sur certains appareils) ne peut pas simuler le workflow pour les appareils mobiles. Notez que le navigateur Chrome pour ordinateur affiche le bouton d'installation dans la barre d'adresse, même si les outils de développement sont en mode Appareil. Toutefois, si vous parvenez à ajouter votre application à votre ordinateur, elle fonctionnera également sur mobile.

Si vous souhaitez tester l'expérience mobile authentique, vous pouvez connecter un véritable appareil mobile aux outils de développement via le débogage à distance. Pour déclencher l'installation sur l'appareil mobile connecté, ouvrez le menu à trois points et cliquez sur Install app (Installer l'application) (ou Add to home screen (Ajouter à l'écran d'accueil)).

Inspecter les raccourcis

Les raccourcis d'application vous permettent d'offrir un accès rapide à un certain nombre d'actions courantes dont les utilisateurs ont souvent besoin.

Pour inspecter les raccourcis que vous avez définis dans votre fichier manifeste, faites défiler la page jusqu'aux sections Shortcut #N de l'onglet Manifest.

Inspecter les captures d'écran pour une interface utilisateur d'installation plus riche

Lorsque vous ajoutez une description et un ensemble de captures d'écran à votre fichier manifeste, votre application obtient une boîte de dialogue d'installation plus riche.

Pour inspecter les captures d'écran, faites défiler la page jusqu'aux sections Screenshot #N de l'onglet Manifest.

Tester l'enregistrement du gestionnaire de protocole d'URL

Les PWA peuvent gérer les liens qui utilisent un protocole spécifique pour une expérience plus intégrée. Pour savoir comment créer un gestionnaire, consultez Enregistrement du gestionnaire de protocole d'URL pour les PWA.

Pour tester votre gestionnaire :

1. Ouvrez les outils de développement sur la page de destination de votre PWA. Par exemple, consultez cette PWA de démonstration.
2. Sur la page de démonstration, installez la PWA et rechargez l'application après l'installation. Le navigateur a maintenant enregistré la PWA en tant que gestionnaire pour le protocole web+coffee.
3. Dans la section Application > Manifest > Protocol Handler (Application > Fichier manifeste > Gestionnaire de protocole), saisissez l'URL que vous souhaitez que le gestionnaire teste, puis cliquez sur Test protocol (Tester le protocole). Dans cet exemple, le gestionnaire peut traiter americano, chai et latte-macchiato.
4. Lorsque Chrome vous demande s'il peut ouvrir l'application, confirmez en cliquant sur Open Protocol Handler (Ouvrir le gestionnaire de protocole).
5. Dans la boîte de dialogue suivante, autorisez l'application à gérer les liens web+coffee.

Si le gestionnaire traite correctement le lien, une image d'une tasse de café s'ouvre dans l'application.

Service workers

Les service workers sont une technologie fondamentale de la future plate-forme Web. Il s'agit de scripts que le navigateur exécute en arrière-plan, séparément d'une page Web. Ces scripts vous permettent d'accéder à des fonctionnalités qui ne nécessitent pas de page Web ni d'interaction de l'utilisateur, comme les notifications push, la synchronisation en arrière-plan et les expériences hors connexion.

Guides associés :

• Présentation des service workers
• Notifications push : pertinentes, précises et envoyées au bon moment

L'onglet Service Workers du panneau Application est l'endroit principal des outils de développement pour inspecter et déboguer les service workers.

• Si un service worker est installé sur la page actuellement ouverte, il s'affiche dans cet onglet. Par exemple, dans la capture d'écran ci-dessus, un service worker est installé pour le champ d'application https://airhorner.com/.
• La case à cocher Offline (Hors connexion) place les outils de développement en mode hors connexion. Cela équivaut au mode hors connexion disponible dans le panneau Network (Réseau) ou à l'option Go offline (Passer hors connexion) du menu Command Menu (Menu Command).
• La case à cocher Update on reload (Mettre à jour lors du rechargement) force le service worker à se mettre à jour à chaque chargement de page.
• La case à cocher Bypass for network (Ignorer pour le réseau) ignore le service worker et force le navigateur à accéder à le réseau pour les ressources demandées.
• Le lien Network requests (Requêtes réseau) vous redirige vers le panneau Network (Réseau) avec une liste des requêtes interceptées liées au service worker (filtre is:service-worker-intercepted).
• Le lien Update (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 "tickle").
• Le bouton Sync (Synchroniser) émule un événement de synchronisation en arrière-plan.
• Le lien Unregister (Annuler l'enregistrement) annule l'enregistrement du service worker spécifié. Consultez Effacer le stockage pour savoir comment annuler l'enregistrement d'un service worker et effacer le stockage et les caches en un seul clic.
• La ligne Source indique quand le service worker en cours d'exécution a été installé. Le lien correspond au nom du fichier source du service worker. Cliquez sur le lien pour accéder à la source du service worker.
• La ligne Status (État) indique l'état du service worker. Le numéro sur cette ligne (#16 dans la capture d'écran) indique le nombre de fois où le service worker a été mis à jour. Si vous activez la case à cocher Update on reload (Mettre à jour lors du rechargement), vous remarquerez que le nombre augmente à chaque chargement de page. À côté de l'état, vous verrez un lien start (démarrer) (si le service worker est arrêté) ou un lien stop (arrêter) (si le service worker est en cours d'exécution). Les service workers 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 lien stop (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 bugs dus à des hypothèses erronées concernant l'état global persistant.
• La ligne Clients indique l'origine à laquelle le service worker est limité. Le bouton focus (focus) est surtout utile lorsque vous avez plusieurs service workers enregistrés. Si vous cliquez sur le bouton focus (focus) à côté d'un service worker qui s'exécute dans un autre onglet, Chrome se concentre sur cet onglet.

• Le tableau Update Cycle (Cycle de mise à jour) affiche les activités du service worker et leur durée écoulée, par exemple l'installation, l'attente et l'activation. Pour afficher l'horodatage exact de chaque activité, cliquez sur les boutons Expand (Développer).

  

  Pour en savoir plus, consultez le cycle de vie du service worker.

Si le service worker provoque des erreurs, l'onglet Service Workers affiche une icône Error (Erreur) avec le nombre d'erreurs à côté de la ligne Source. Le lien avec le numéro vous redirige vers la Console avec toutes les erreurs enregistrées.

Pour afficher des informations sur tous les service workers, cliquez sur See all registrations (Afficher tous les enregistrements) en bas de l'onglet Service Workers. Ce lien vous redirige vers chrome://serviceworker-internals/?devtools, où vous pouvez déboguer davantage vos service workers.

Caches de service workers

L'onglet Cache Storage (Espace de stockage du cache) fournit une liste en lecture seule des ressources qui ont été mises en cache à l'aide de l' (service worker) API Cache.

Notez que la première fois que vous ouvrez un cache et que vous y ajoutez une ressource, les outils de développement peuvent ne pas détecter la modification. Rechargez la page et le cache devrait s'afficher.

Si vous avez deux caches ouverts ou plus, ils s'affichent sous le menu déroulant Cache Storage (Espace de stockage du cache).

Utilisation du quota

Certaines réponses de l'onglet "Cache Storage" (Espace de stockage du cache) peuvent être signalées comme "opaques". Cela fait référence à une réponse récupérée à partir d'une origine différente, comme un CDN ou une API à distance, lorsque CORS n'est pas activé.

Afin d'éviter la fuite d'informations interdomaines, un remplissage important est ajouté à la taille d'une réponse opaque utilisée pour calculer les limites de quota de stockage (c'est-à-dire si une QuotaExceeded exception est générée) et signalé par l'navigator.storage API.

Les détails de ce remplissage varient d'un navigateur à l'autre, mais pour Google Chrome, cela signifie que la taille minimale qu'une seule réponse opaque mise en cache contribue à l'utilisation de l'espace de stockage globale est d'environ 7 mégaoctets. Vous devez en tenir compte 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 associés :

• Stack Overflow : Quelles sont les limites qui s'appliquent aux réponses opaques ?
• Workbox : Comprendre le quota de stockage

Effacer le stockage

L'onglet Clear Storage (Effacer le stockage) est une fonctionnalité très utile lors du développement de progressive web apps. Cet onglet vous permet d'annuler l'enregistrement des service workers et d'effacer tous les caches et le stockage en un seul clic. Pour en savoir plus, consultez la section ci-dessous.

Guides associés :

• Effacer le stockage

Autres guides sur le panneau Application

Consultez les guides ci-dessous pour obtenir de l'aide sur les autres volets du panneau Application.

Guides associés :

• Inspecter les ressources de la page
• Inspecter et gérer le stockage local et les caches