Utilisez le panneau Application pour inspecter, modifier et déboguer les fichiers manifestes d'application Web, les service workers et les caches de service worker.
Les progressive web apps (PWA) sont des applications modernes et de haute qualité créées à l'aide de la technologie Web. Les PWA offrent des fonctionnalités similaires à celles des applications iOS, Android et pour ordinateur. Les voici :
- Fiable, même en cas de connexion réseau instable
- Installable to launch surfaces of operating systems, such as the Applications folder on Mac OS X, the Start menu on Windows, and the home screen on Android and iOS.
- s'affichent dans les sélecteurs d'activités, les moteurs de recherche de l'appareil tels que Spotlight et les feuilles de partage de contenu ;
Ce guide ne traite que des fonctionnalités des progressive web apps du panneau Application. Si vous avez besoin d'aide concernant les autres volets, consultez la dernière section de ce guide, Autres guides sur les panneaux d'application.
Résumé
- Utilisez l'onglet Fichier manifeste pour inspecter le fichier manifeste de votre application Web.
- Utilisez l'onglet Service Workers pour effectuer toute une gamme de tâches liées aux services workers, comme désenregistrer ou mettre à jour un service, émuler des événements push, passer en mode hors connexion ou arrêter un service worker.
- Affichez le cache de votre service worker dans l'onglet Cache Storage (Stockage du cache).
- Désinscrivez un service worker et effacez tout le stockage et les caches en un seul clic dans l'onglet Effacer l'espace de stockage.
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 sous 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'emplacement vers lequel rediriger l'utilisateur lors du lancement depuis l'écran d'accueil et l'apparence de l'application lors de son lancement.
Une fois le fichier manifeste configuré, vous pouvez l'inspecter à l'aide de l'onglet Fichier manifeste du panneau Application.
- Pour consulter la source du fichier manifeste, cliquez sur le lien sous le libellé App Manifest (Fichier manifeste de l'application) (
manifest.webmanifestdans la capture d'écran ci-dessus). - Les sections Identité et Présentation ne font que présenter les champs de la source du fichier manifeste de manière plus conviviale.
- La section Gestionnaires de protocoles vous permet de tester l'enregistrement du gestionnaire de protocoles d'URL de votre PWA en un clic. Pour en savoir plus, consultez Tester l'enregistrement du gestionnaire de protocoles d'URL.
- La section Icônes affiche toutes les icônes que vous avez spécifiées et vous permet de vérifier leurs masques.
- L'ensemble de sections Raccourci N affiche des informations sur tous vos objets de raccourci.
- L'ensemble de sections Capture d'écran N affiche les captures d'écran pour une interface utilisateur d'installation plus riche de votre application.
De plus, si DevTools rencontre une erreur, telle qu'une icône qui ne peut pas être chargée, l'onglet Fichier manifeste affiche une section Installability (Installabilité) décrivant l'erreur.
Afficher et vérifier les icônes masquables
La section Icônes de l'onglet Fichier manifeste 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, qui sont 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 
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.
Installation du déclencheur
Chrome vous permet d'activer et de promouvoir l'installation de votre PWA directement dans son interface utilisateur. Découvrez comment proposer votre propre expérience d'installation dans l'application.
Pour déclencher le flux d'installation de votre PWA:
- Ouvrez la page de destination de la PWA dans Chrome.
En haut à droite de la barre d'adresse, cliquez sur
Installer.
Suivez les instructions à l'écran.
La fonctionnalité Installer l'application 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 pour les développeurs 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 à DevTools via le débogage à distance. Pour déclencher l'installation sur l'appareil mobile connecté, ouvrez le menu à trois points 
, puis cliquez sur 
Installer l'application.
Inspecter les raccourcis
Les raccourcis d'application vous permettent d'offrir un accès rapide à quelques actions courantes dont les utilisateurs ont souvent besoin.
Pour inspecter les raccourcis que vous avez définis dans votre fichier manifeste, faites défiler l'onglet Manifeste jusqu'à la section Raccourci N.
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, la boîte de dialogue d'installation de votre application est plus complète.
Pour inspecter les captures d'écran, faites défiler l'onglet Fichier manifeste jusqu'à la section Capture d'écran N.
Tester l'enregistrement du gestionnaire de protocoles 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 la section Enregistrement du gestionnaire de protocoles d'URL pour les PWA.
Pour tester votre gestionnaire:
- Ouvrez les outils pour les développeurs sur la page de destination de votre PWA. Par exemple, consultez cette application Web progressive de démonstration.
- Sur la page de démonstration, installez la PWA, puis actualisez l'application après l'installation. Le navigateur a maintenant enregistré la PWA en tant que gestionnaire du protocole
web+coffee. - Dans la section Application > Fichier manifeste > Gestionnaire de protocole, saisissez l'URL que le gestionnaire doit tester, puis cliquez sur Tester le protocole.
Dans cet exemple, le gestionnaire peut traiter americano,chaietlatte-macchiato. - Lorsque Chrome vous demande s'il peut ouvrir l'application, confirmez en cliquant sur Ouvrir le gestionnaire de protocole.
- Dans la boîte de dialogue suivante, autorisez l'application à gérer les liens
web+coffee.
Si le gestionnaire traite correctement l'association, une image d'une tasse de café s'ouvre dans l'application.
Service workers
Les services workers sont une technologie fondamentale de la future plate-forme Web. Il s'agit de scripts exécutés par le navigateur en arrière-plan, indépendamment 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 utilisateur, comme les notifications push, la synchronisation en arrière-plan et les expériences hors connexion.
Guides associés:
L'onglet Service Workers du panneau Application est l'emplacement principal de DevTools pour inspecter et déboguer les services 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 la portée de
https://airhorner.com/. - La case
Hors connexion met DevTools en mode hors connexion. Cela équivaut au mode hors connexion disponible dans le panneau Network (Réseau) ou à l'option Go offlinedans le menu de commande. - La case à cocher
Mettre à jour lors de l'actualisation force le service worker à se mettre à jour à chaque chargement de page. - La case à cocher
Contourner pour le réseau contourne le service worker et force le navigateur à accéder au réseau pour les ressources demandées. - Le lien Requêtes réseau vous permet d'accéder au panneau Réseau, qui contient une liste des requêtes interceptées liées au service worker (filtre
is:service-worker-intercepted). - Le lien 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 Synchroniser émule un événement de synchronisation en arrière-plan.
- Le lien Désenregistrer désinscrit le service worker spécifié. Consultez la section Effacer l'espace de stockage pour savoir comment annuler l'enregistrement d'un service worker et effacer l'espace de stockage et les caches en un seul clic.
- La ligne Source indique quand le service worker actuellement en cours d'exécution a été installé. Le lien correspond au nom du fichier source du service worker. En cliquant sur le lien, vous accédez à la source du worker de service.
- La ligne État indique l'état du service worker. Le nombre indiqué sur cette ligne (
#16dans la capture d'écran) indique le nombre de fois où le service worker a été mis à jour. Si vous activez la case à cocher
Mettre à jour à l'actualisation, vous remarquerez que le nombre augmente à chaque chargement de page.
À côté de l'état, vous trouverez un lien Démarrer (si le service worker est arrêté) ou un lien Arrêter (si le service worker est en cours d'exécution). Les services workers sont conçus pour être arrêtés et démarrés par le navigateur à tout moment. Vous pouvez simuler cela en arrêtant explicitement votre service worker à l'aide du lien stop. Arrêter 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 sur l'état global persistant. - La ligne Clients indique l'origine à laquelle le service worker est limité. Le bouton focus est surtout utile lorsque vous avez plusieurs services workers enregistrés. Si vous cliquez sur le bouton Mettre au premier plan à côté d'un service worker exécuté dans un autre onglet, Chrome met cet onglet au premier plan.
Le tableau Cycle de mise à jour affiche les activités du service worker et la durée écoulée, comme l'installation, l'attente et l'activation. Pour afficher l'horodatage exact de chaque activité, cliquez sur les boutons
Développer.
Pour en savoir plus, consultez la section Cycle de vie du service worker.
Si le service worker génère des erreurs, l'onglet Service Workers affiche une icône 
Error (Erreur) avec le nombre d'erreurs à côté de la ligne Source (Source).
Le lien associé au numéro vous redirige vers la console avec toutes les erreurs enregistrées.
Pour afficher des informations sur tous les services workers, cliquez sur Afficher tous les enregistrements en bas de l'onglet Service workers. Ce lien vous redirigera vers chrome://serviceworker-internals/?devtools, où vous pourrez déboguer davantage vos service workers.
Caches de service worker
L'onglet Cache Storage fournit une liste en lecture seule des ressources mises en cache à l'aide de l'API Cache (service worker).
Notez que la première fois que vous ouvrez un cache et y ajoutez une ressource, DevTools risque de ne pas détecter le changement. Actualisez la page. Le cache devrait s'afficher.
Si vous avez ouvert deux caches ou plus, ils s'affichent sous le menu déroulant Cache Storage (Stockage du cache).
Utilisation du quota
Certaines réponses dans l'onglet "Cache Storage" (Stockage du cache) peuvent être signalées comme étant opaques. Il s'agit d'une réponse récupérée à partir d'une autre origine, comme d'un CDN ou d'une API distante, lorsque le CORS n'est pas activé.
Pour éviter toute fuite d'informations interdomaines, un rembourrage 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 exception QuotaExceeded est générée) et signalé par l'API navigator.storage.
Les détails de ce rembourrage varient d'un navigateur à l'autre, mais pour Google Chrome, cela signifie que la taille minimale que chaque réponse opaque mise en cache contribue à l'utilisation globale de l'espace de stockage est d'environ 7 mégaoctets. Gardez cela à l'esprit lorsque vous déterminez le nombre de réponses opaques que vous souhaitez mettre en cache, car vous pourriez 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 limites s'appliquent aux réponses opaques ?
- Workbox: Comprendre le quota de stockage
Vider l'espace de stockage
L'onglet Effacer l'espace de stockage est très utile lors du développement de PWA. Cet onglet vous permet de désenregistrer des services 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:
Autres guides du panneau "Application"
Consultez les guides ci-dessous pour en savoir plus sur les autres volets du panneau Application.
Guides associés: