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 worker.
Les progressive web apps (PWA) sont des applications modernes de haute qualité, conçues à l'aide de la technologie Web. Les PWA offrent des fonctionnalités semblables à celles des applications iOS, Android et de bureau. Les voici :
- Fiable même en cas de réseau instable.
- Installation pour 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 sous Android et iOS.
- Apparaissez dans les sélecteurs d'activités, les moteurs de recherche d'appareils tels que Spotlight, et dans 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 sur les autres volets, consultez la dernière section de ce guide, Guides du panneau "Autres applications".
Résumé
- L'onglet Manifest (Fichier manifeste) vous permet d'inspecter le fichier manifeste de votre application Web.
- Utilisez l'onglet Service workers pour effectuer toute une gamme de tâches liées aux service workers, telles que l'annulation de l'enregistrement ou la mise à jour d'un service, l'émulation d'événements push, la mise hors connexion ou l'arrêt d'un service worker.
- Affichez le cache de votre service worker à partir de l'onglet Cache Storage (Stockage du cache).
- Vous pouvez annuler l'enregistrement d'un service worker, et effacer l'espace de stockage et les caches en un seul clic sur un bouton dans l'onglet Vider l'espace de stockage.
Fichier manifeste d'application Web
Si vous souhaitez que vos utilisateurs puissent ajouter votre application à leur dossier Applications sous Mac OS X, au menu Démarrer sous Windows et à l'écran d'accueil sur Android et iOS, vous devez disposer d'un fichier manifeste d'application Web. Le fichier manifeste définit la manière dont l'application apparaît sur l'écran d'accueil, où diriger l'utilisateur lors du lancement depuis l'écran d'accueil et à quoi ressemble l'application au lancement.
Une fois votre fichier manifeste configuré, vous pouvez l'inspecter dans l'onglet Manifest du panneau Application (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 affichent simplement 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 seul 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 les objets de vos raccourcis.
- L'ensemble 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, telle qu'une icône qui ne peut pas être chargée, l'onglet Manifest (Fichier manifeste) affiche une section Installability (Facilité d'installation) décrivant l'erreur.
Afficher et vérifier les icônes masquables
La section Icons (Icônes) de l'onglet Manifest (Fichier manifeste) affiche toutes les icônes de votre application. Dans cette section, vous pouvez également rechercher des icônes masquables dans les zones de sécurité (le format d'icône s'adapte aux plates-formes).
Pour couper 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 n'avez rien d'autre à faire.
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 de développement sont en mode Appareil. Toutefois, si vous parvenez à ajouter votre application sur votre ordinateur, elle fonctionnera également sur les appareils mobiles.
Si vous souhaitez tester l'expérience mobile réelle, vous pouvez connecter un véritable appareil mobile aux outils de développement via le débogage à distance. Pour lancer l'installation sur l'appareil mobile connecté, ouvrez le menu à trois points 
, puis cliquez sur 
Installer l'appli.
Inspecter les raccourcis
Les raccourcis d'application vous permettent d'accéder rapidement à 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 la page jusqu'aux sections Shortcut #N de l'onglet Manifest.
Inspecter les captures d'écran pour enrichir l'interface utilisateur d'installation
Lorsque vous ajoutez une description et un ensemble de captures d'écran à votre fichier manifeste, une boîte de dialogue d'installation plus complète s'affiche.
Pour inspecter les captures d'écran, faites défiler la page jusqu'aux sections Screenshot #N (Capture d'écran #N) de l'onglet Manifest (Fichier manifeste).
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 Enregistrement du gestionnaire de protocoles d'URL pour les PWA.
Pour tester votre gestionnaire:
- Accédez aux outils de développement sur la page de destination de votre PWA. Par exemple, regardez cette PWA de démonstration.
- Depuis la page de démonstration, installez la PWA et actualisez l'application après l'installation. Le navigateur a maintenant enregistré la PWA en tant que gestionnaire pour le protocole
web+coffee. - Dans la section Application > Manifest > Protocol Handler (Application > 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 si vous pouvez ouvrir l'application, cliquez sur Ouvrir le gestionnaire de protocole pour confirmer.
- Dans la boîte de dialogue suivante, autorisez l'application à gérer les liens
web+coffee.
Si le gestionnaire réussit à traiter le lien, une tasse de café s'affiche dans l'application.
Service workers
Les service workers sont une technologie fondamentale de la future plate-forme Web. Ce sont des 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, telles que 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'onglet principal permettant d'inspecter et de déboguer les service workers dans les outils de développement.
- 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
active le mode hors connexion dans les outils de développement. Cela équivaut au mode hors connexion disponible dans le panneau Network (Réseau) ou à l'option Go offlinedu menu Commandes. - La case
Mettre à jour lors de l'actualisation oblige le service worker à effectuer une mise à jour à chaque chargement de page. - La case
Contourner pour le réseau contourne le service worker et oblige le navigateur à accéder au réseau pour accéder aux ressources demandées. - Le lien Requêtes réseau vous permet d'accéder au panneau Réseau, qui contient la liste des requêtes interceptées liées au service worker (filtre
is:service-worker-intercepted). - Le lien Update permet d'effectuer une mise à jour ponctuelle du service worker spécifié.
- Le bouton Push émule une notification push sans charge utile (également appelée tickle).
- Le bouton Sync (Synchronisation) émule un événement de synchronisation en arrière-plan.
- Le lien Annuler l'enregistrement permet d'annuler l'enregistrement du service worker spécifié. Consultez la section Effacer l'espace de stockage pour 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 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 nombre figurant sur cette ligne (
#16sur la capture d'écran) indique le nombre de mises à jour du service worker. Si vous cochez la case
Update on reload (Mettre à jour lors de l'actualisation), vous remarquerez que le nombre s'incrémente à chaque chargement de page.
À côté de l'état, un lien start (si le service worker est arrêté) ou un lien stop (si le service worker est en cours d'exécution) est affiché. Les service workers sont conçus pour être arrêtés et démarrés à tout moment par le navigateur. L'arrêt explicite de votre service worker à l'aide du lien stop peut simuler cette opération. 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 signale fréquemment des bugs dus à des hypothèses erronées concernant l'état global persistant. - La ligne Clients vous indique à quelle origine le service worker est limité. Le bouton de focus est particulièrement utile lorsque vous avez plusieurs service workers enregistrés. Si vous cliquez sur le bouton de sélection à côté d'un service worker exécuté dans un autre onglet, Chrome sélectionne cet onglet.
Le tableau Update Cycle (Cycle de mise à jour) affiche les activités du service worker et le temps écoulé (installation, attente et activation, par exemple). Pour afficher le code temporel exact de chaque activité, cliquez sur les boutons Développer
.
Pour en savoir plus, consultez Cycle de vie des service workers.
Si le service worker génère des erreurs, l'onglet Service worker affiche une icône Error (Erreur) 
avec le nombre d'erreurs à côté de la ligne Source.
Le lien indiquant ce numéro vous permet d'accéder à la console, qui répertorie toutes les erreurs consignées.
Pour afficher les informations sur tous les service workers, cliquez sur See all recordings (Afficher tous les enregistrements) au bas de l'onglet Service Workers. Ce lien vous dirige vers chrome://serviceworker-internals/?devtools, où vous pouvez déboguer vos service workers.
Caches de service worker
L'onglet Stockage du cache fournit une liste en lecture seule des ressources qui ont été 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. Le cache devrait s'afficher.
Si plusieurs caches sont ouverts, ils sont répertoriés sous le menu déroulant Cache Storage (Stockage du cache).
Utilisation du quota
Certaines réponses de l'onglet "Stockage du cache" peuvent être signalées comme étant opaques. Il s'agit d'une réponse récupérée d'une origine différente, par exemple à partir d'un CDN ou d'une API distante, lorsque CORS n'est pas activé.
Pour éviter toute fuite d'informations interdomaines, une marge intérieure importante est ajoutée à 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ée par l'API navigator.storage.
Les détails de cette marge intérieure varient d'un navigateur à l'autre. Toutefois, pour Google Chrome, cela signifie que la taille minimale d'une réponse opaque mise en cache dans 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 les quotas de stockage
Vider l'espace de stockage
L'onglet Clear Storage (Vider l'espace de stockage) est une fonctionnalité très utile lorsque vous développez des progressive web apps. Cet onglet vous permet d'annuler l'enregistrement des service workers et de vider l'ensemble des caches et de l'espace de stockage d'un simple 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: