Le panneau Application vous permet d'inspecter, de modifier et de déboguer les fichiers manifestes d'applications Web, les service workers et les caches de service workers.
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 semblables à celles d'iOS, d'Android et des applications de bureau. Les voici :
- Fiabilité même en cas de connexion réseau instable.
- Installation permettant de lancer des surfaces de systèmes d'exploitation, telles que le dossier Applications sous Mac OS X, le menu Démarrer sous Windows et l'écran d'accueil sur Android et 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 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).
- Annulez l'enregistrement d'un service worker, et videz l'ensemble de l'espace de stockage et des caches en un seul clic dans l'onglet Vider l'espace de stockage.
Fichier manifeste d'application Web
Si vous souhaitez que vos utilisateurs puissent ajouter votre application au dossier Applications sous 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 au lancement.
Une fois le fichier manifeste configuré, vous pouvez l'inspecter à l'aide de l'onglet Manifeste du panneau Application.
- Pour consulter la source du fichier manifeste, cliquez sur le lien sous le libellé Fichier manifeste d'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.
- La section Capture d'écran #N affiche les captures d'écran pour enrichir l'interface utilisateur d'installation 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 (Installabilité) décrivant l'erreur.
Afficher et cocher 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 réduire les icônes de sorte que seule la zone de sécurité minimale soit visible, cochez la case 
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 sur 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 les appareils mobiles.
Si vous souhaitez tester l'expérience mobile réelle, vous pouvez connecter un appareil mobile réel 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 
, puis cliquez sur 
Installer l'application.
Inspecter les raccourcis
Les raccourcis d'application vous permettent d'accéder rapidement à quelques actions courantes dont les utilisateurs ont souvent besoin.
Pour vérifier les raccourcis que vous avez définis dans votre fichier manifeste, faites défiler la page jusqu'aux sections Raccourci #N de l'onglet Fichier manifeste.
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 s'affiche dans une boîte de dialogue d'installation plus riche.
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 de développement sur la page de destination de votre PWA. Par exemple, consultez cette application Web progressive de démonstration.
- Depuis 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 le lien, une image d'une tasse de café s'ouvre dans l'application.
Service workers
Les service workers constituent une technologie fondamentale pour 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 utilisateur, comme les notifications push, la synchronisation en arrière-plan et les expériences hors connexion.
Guides associés:
Dans les outils de développement, l'onglet Service workers du panneau Application permet d'inspecter et de déboguer les service workers.
- Si un service worker est installé sur la page actuellement ouverte, il apparaît dans cet onglet. Par exemple, dans la capture d'écran ci-dessus, un service worker est installé pour le champ d'application de
https://airhorner.com/. - La case
Hors connexion met DevTools en mode hors connexion. Cela équivaut au mode hors connexion disponible dans le panneau Réseau ou à l'option Go offlinedu menu de commandes. - 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é tickle).
- Le bouton Synchroniser émule un événement de synchronisation en arrière-plan.
- Le lien Unregister annule l'enregistrement du service worker spécifié. Consultez 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 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. Cliquez sur le lien pour accéder à 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 cochez la case
Update on reload (Mettre à jour lors de l'actualisation), vous remarquerez que ce nombre s'incrémente à chaque chargement de page.
À côté de l'état, vous verrez un lien start (si le service worker est arrêté) ou un lien stop (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. 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 fréquemment les 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 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 leur temps écoulé, par exemple lors de l'installation, de l'attente et de 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 des service workers.
Si le service worker provoque des erreurs, l'onglet Service workers affiche une icône Erreur 
avec le nombre d'erreurs à côté de la ligne Source.
Le lien associé au numéro vous permet d'accéder à 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 renvoie vers chrome://serviceworker-internals/?devtools, où vous pouvez déboguer vos service workers plus en détail.
Caches des service workers
L'onglet Stockage du cache 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 que vous y ajoutez une ressource, il est possible que les outils de développement ne détectent pas la modification. Actualisez la page pour voir le cache.
Si plusieurs caches sont ouverts, ils s'affichent sous la liste déroulante Stockage du cache.
Utilisation du quota
Certaines réponses dans l'onglet "Stockage en cache" peuvent être marquées comme opaques. Il s'agit d'une réponse récupérée à partir d'une origine différente, telle qu'un CDN ou une API distante, lorsque 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 bien 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 Effacer l'espace de stockage est très utile lors du développement de PWA. Cet onglet vous permet d'annuler l'enregistrement des service workers, et de vider tous les caches et l'espace de stockage en un seul clic. Pour en savoir plus, consultez la section ci-dessous.
Guides associés:
Guides du panneau "Autres applications"
Consultez les guides ci-dessous pour obtenir de l'aide sur les autres volets du panneau Application.
Guides associés: