Use theApplication panel to inspect, modify, and debug web app manifests, service workers, andservice worker caches.

Progressive Web Apps (PWAs) are modern, high quality applications built using web technology.PWAs offer similar capabilities to iOS, Android, and desktop apps. They are:

• Reliable even in unstable network conditions.
• Installable to launch surfaces of operating systems, such as theApplications folder on Mac OS X,theStart menu on Windows, and the home screen on Android and iOS.
• Show up in activity switchers, device search engines such as Spotlight, and in content sharing sheets.

This guide only discusses the Progressive Web App features of theApplication panel. If you'relooking for help on the other panes, check out the last section of this guide,Other Applicationpanel guides.

Summary

• Use theManifest tab to inspect your web app manifest.
• Use theService Workers tab for a whole range of service-worker-related tasks, likeunregistering or updating a service, emulating push events, going offline, or stopping a serviceworker.
• View your service worker cache from theCache Storage tab.
• Unregister a service worker and clear all storage and caches with a single button click from theClear storage tab.

Web app manifest

If you want your users to be able to add your app to their theApplications folder on Mac OS X,theStart menu on Windows, and the home screen on Android and iOS, you need aweb appmanifest. The manifest defines how the app appears on the home screen, where to direct the user whenlaunching from home screen, and what the app looks like on launch.

Once you've got your manifest set up, you can use theManifest tab of theApplication panelto inspect it.

• To look at the manifest source, click the link belowApp Manifest label(manifest.webmanifest in the screenshot above).
• TheIdentity andPresentation sections just display fields from the manifest source in amore user-friendly way.
• TheProtocol Handlers section lets you to test the URL protocol handler registration of your PWA with a click of a button.To learn more, seeTest URL protocol handler registration.
• TheIcons section displays every icon that you've specified and lets you check their masks.
• TheShortcut #N set of sections displays information on all your shortcut objects.
• TheScreenshot #N set of section displays the screenshots for a richer installation UI of your app.

In addition, if DevTools encounters an error, such as an icon that cannot be loaded, theManifest tab displays anInstallability section describing the error.

View and check maskable icons

TheIcons section of theManifest tab displays all the icons of your application. In this section, you can also check safe areas formaskable icons, the format of icons that adapt to platforms.

To trim the icons so that only the minimum safe area is visible, checkShow only the minimum safe area for maskable icons.

If your entire logo is visible in the safe area, you're good to go.

Trigger installation

Chrome makes it possible for you to enable and promote the installation of your PWA directly within its user interface.LearnHow to provide your own in-app installation experience.

To trigger the installation flow of your PWA:

1. Open the PWA's landing page in Chrome.

2. On the right side of the address bar at the top, clickInstall.

   

3. Follow the on-screen instructions.

Key point: Keep theConsole drawer open when you trigger installation. TheConsoletells you if your manifest has any issues and logs other information about the installationlifecycle.

TheInstall app feature cannot simulate the workflow for mobile devices. Notice howthe desktop Chrome browser displays the installation button in the address bar, even though DevTools is inDevice Mode.However, if you can successfully add your app to your desktop, then it'll work formobile, too.

If you want to test out the genuine mobile experience, you can connect a real mobile device toDevTools viaremote debugging. To trigger the installation on the connected mobile device, open the three-dot menu and clickInstall app.

Inspect shortcuts

App shortcuts let you to provide quick access to a handful of common actions that users need frequently.

To inspect the shortcuts you defined in yourmanifest file, scroll to theShortcut #N sections of theManifest tab.

Note:Note: This screenshot is taken from thisdemo page. Inspect it for more examples.

Inspect screenshots for a richer installation UI

When you add a description and a set ofscreenshots to your manifest file, your app gets a richer installation dialog.

To inspect the screenshots, scroll to theScreenshot #N sections of theManifest tab.

Test URL protocol handler registration

PWAs can handle links that use a specific protocol for a more integrated experience.To learn how to create a handler, seeURL protocol handler registration for PWAs.

To test your handler:

1. Open DevTools on the landing page of your PWA. For example, check out thisdemo PWA.
2. From the demo page, install the PWA and reload the app after the installation. The browser has now registered the PWA as a handler for theweb+coffee protocol.
3. In theApplication >Manifest >Protocol Handler section, enter the URL you want the handler to test and clickTest protocol.In this example, the handler can processamericano,chai, andlatte-macchiato.
4. When Chrome asks you if it can open the app, confirm by clickingOpen Protocol Handler.
5. In the next dialog, allow the app to handleweb+coffee links.

If the handler successfully processes the link, you'll see an image of a coffee cup opened in the app.

Service workers

Service workers are a fundamental technology in the future web platform. They are scripts that thebrowser runs in the background, separate from a web page. These scripts enable you to accessfeatures that don't need a web page or user interaction, like push notifications, background sync,and offline experiences.

Related Guides:

• Intro to Service Workers
• Push Notifications: Timely, Relevant, and Precise

TheService Workers tab in theApplication panel is the main place in DevTools to inspectand debug service workers.

• If a service worker is installed to the currently open page, then you'll see it listed on thistab. For example, in the screenshot above there's a service worker installed for the scope ofhttps://airhorner.com/.
• TheOffline checkbox puts DevTools into offline mode. This is equivalent to the offline modeavailable from theNetwork panel, or theGo offline option in theCommand Menu.
• TheUpdate on reload checkbox forces the service worker to update on every page load.
• TheBypass for network checkbox bypasses the service worker and forces the browser to go tothe network for requested resources.
• TheNetwork requests link takes you to theNetwork panel with a list of intercepted requests related to the service worker (is:service-worker-intercepted filter).
• TheUpdate link performs a one-time update of the specified service worker.
• ThePush button emulates a push notification without a payload (also known as atickle).
• TheSync button emulates a background sync event.
• TheUnregister link unregisters the specified service worker. Check outClear storagefor a way to unregister a service worker and wipe storage and caches with a single button click.
• TheSource line tells you when the currently running service worker was installed. The link isthe name of the service worker's source file. Clicking on the link sends you to the serviceworker's source.
• TheStatus line tells you the status of the service worker. The number on this line (#16 inthe screenshot) indicates how many times the service worker has been updated. If you enabletheUpdate on reload checkbox you'll notice that the number increments on every page load.Next to the status you'll see astart link (if the service worker is stopped) or astoplink (if the service worker is running). Service workers are designed to be stopped and startedby the browser at any time. Explicitly stopping your service worker using thestop link cansimulate that. Stopping your service worker is a great way to test how your code behaves when theservice worker starts back up again. It frequently reveals bugs due to faulty assumptions aboutpersistent global state.
• TheClients line tells you the origin that the service worker is scoped to. Thefocusbutton is mostly useful when you have multiple registered service workers. If you click on thefocus button next to aservice worker that is running in a different tab, Chrome focuses on that tab.

• TheUpdate Cycle table shows you the service worker's activities and their elapsed times, such as install, wait, and activate.To see the exact timestamp of each activity, click theExpand buttons.

  

  For more information, seeThe service worker lifecycle.

If the service worker causes any errors, theService Workers tab shows anError icon with the number of errors next to theSource line.The link with the number takes you to theConsole with all the logged errors.

To see information on all service workers, clickSee all registrations at the bottom of theService Workers tab. This link takes tochrome://serviceworker-internals/?devtools where you can further debug your service workers.

Service worker caches

TheCache Storage tab provides a read-only list of resources that have been cached using the(service worker)Cache API.

Note that the first time you open a cache and add a resource to it, DevTools might not detect thechange. Reload the page and you should see the cache.

If you've got two or more caches open, you'll see them listed below theCache Storage drop-down.

Quota usage

Some responses within the Cache Storage tab may be flagged as being "opaque". This refers toa response retrieved from a different origin, like from aCDN or remote API, whenCORSis not enabled.

In order to avoid leakage of cross-domain information, there's significant padding added to the sizeof an opaque response used for calculating storage quota limits (i.e. whether aQuotaExceededexception is thrown) and reported by thenavigator.storage API.

The details of this padding vary from browser to browser, but for Google Chrome, this means that theminimum size that any single cached opaque response contributes to the overall storage usage isapproximately 7 megabytes. You should keep this in mind when determining how many opaqueresponses you want to cache, since you could easily exceeded storage quota limitations much soonerthan you'd otherwise expect based on the actual size of the opaque resources.

Related Guides:

• Stack Overflow: What limitations apply to opaque responses?
• Workbox: Understanding Storage Quota

Clear storage

TheClear Storage tab is a very useful feature when developing progressive web apps. This tablets you unregister service workers and clear all caches and storage with a single button click.Check out the section below to learn more.

Related Guides:

• Clear Storage

Other Application panel guides

Check out the guides below for more help on the other panes of theApplication panel.

Related Guides:

• Inspect page resources
• Inspect and manage local storage and caches