![Kayce Basques](https://web.dev/images/authors/kaycebasques.jpg) Kayce Basques [X](https://twitter.com/kaycebasques) [GitHub](https://github.com/kaycebasques) ![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)
Use the **Application** panel to inspect, modify, and debug web app manifests, service workers, and service worker caches. [Video](https://www.youtube.com/watch?v=fGU39PukAlA) [Progressive Web Apps (PWAs)](https://web.dev/progressive-web-apps) 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 the **Applications** folder on Mac OS X, the **Start** 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 the **Application** panel. If you're looking for help on the other panes, check out [Other Application panel guides](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt#other). ## Summary - Use the **Manifest** tab to inspect your web app manifest. - Use the **Service Workers** tab for a whole range of service-worker-related tasks, like unregistering or updating a service, emulating push events, going offline, or stopping a service worker. - View your service worker cache from the **Cache Storage** tab. - Unregister a service worker and clear all storage and caches with a single button click from the **Clear storage** tab. ## Web app manifest If you want your users to be able to add your app to their the **Applications** folder on Mac OS X, the **Start** menu on Windows, and the home screen on Android and iOS, you need a [web app manifest](https://web.dev/add-manifest/). The manifest defines how the app appears on the home screen, where to direct the user when launching from home screen, and what the app looks like on launch. Once you've got your manifest set up, you can use the **Manifest** tab of the **Application** panel to inspect it. ![The Manifest tab.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/the-manifest-pane-6e96daf5347ea.png) - To look at the manifest source, click the link beneath **App Manifest** label (`manifest.webmanifest` in the screenshot above). - The **Identity** and **Presentation** sections just display fields from the manifest source in a more user-friendly way. - The **Protocol Handlers** section lets you to test the URL protocol handler registration of your PWA with a click of a button. To learn more, see [Test URL protocol handler registration](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt#test-protocol-handler). - The [**Icons** section](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt#icons) displays every icon that you've specified and lets you check their masks. - The [Shortcut #N](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt#shortcut) set of sections displays information on all your shortcut objects. - The [Screenshot #N](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt#screenshot) 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, the **Manifest** tab displays an **Installability** section describing the error. ![The Installability section in the Manifest tab.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/the-installability-sectio-579d7c051a3a9.png) ### View and check maskable icons The **Icons** section of the **Manifest** tab displays all the icons of your application. In this section, you can also check safe areas for [maskable icons](https://web.dev/articles/maskable-icon), the format of icons that adapt to platforms. To trim the icons so that only the minimum safe area is visible, check **Show only the minimum safe area for maskable icons**. ![Viewing the minimum safe areas for maskable icons.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/viewing-minimum-safe-are-04cb00e3f9cc8.png) 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. Learn [How to provide your own in-app installation experience](https://web.dev/customize-install/). 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, click ![Install.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/install-c29aa41fe03a8.svg) **Install**. ![](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/airhorner-install.jpg) 3. Follow the on-screen instructions. > [!IMPORTANT] > **Key point:** Keep the **Console** drawer open when you trigger installation. The **Console** tells you if your manifest has any issues and logs other information about the installation lifecycle. The **Install app** (or **Add to home screen** on some devices) feature cannot simulate the workflow for mobile devices. Notice how the desktop Chrome browser displays the installation button in the address bar, even though DevTools is in [Device Mode](https://developer.chrome.com/docs/devtools/device-mode.md.txt). However, if you can successfully add your app to your desktop, then it'll work for mobile, too. If you want to test out the genuine mobile experience, you can connect a real mobile device to DevTools using [remote debugging](https://developer.chrome.com/docs/devtools/remote-debugging.md.txt). To trigger the installation on the connected mobile device, open the menu and click ![Install app button.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/install-app-aa480cc99f21f.svg) **Install app** (or **Add to home screen**). ### Inspect shortcuts You can provide quick access to a handful of common actions that users need with [App shortcuts](https://web.dev/articles/app-shortcuts). To inspect the shortcuts you defined in your [manifest file](https://web.dev/articles/app-shortcuts#define_app_shortcuts_in_the_web_app_manifest), scroll to the **Shortcut #N** sections of the **Manifest** tab. ![Shortcut section in the Manifest tab.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/shortcut-section-the-man-d4d9611c55d5f.png) > [!NOTE] > **Note:** **Note** : This screenshot is taken from this [demo page](https://rowsie.app/). Inspect it for more examples. ### Inspect screenshots for a richer installation UI When you add a description and a set of [screenshots to your manifest file](https://web.dev/add-manifest#screenshots), your app gets a richer installation dialog. To inspect the screenshots, go to the **Screenshot #N** sections of the **Manifest** tab. ![The installation dialog and screenshots in the Manifest tab.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/the-installation-dialog-06b1dd5ce9eaa.png) ### 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, see [URL protocol handler registration for PWAs](https://developer.chrome.com/docs/web-platform/best-practices/url-protocol-handler.md.txt). To test your handler: 1. [Open DevTools](https://developer.chrome.com/docs/devtools/open.md.txt) on the landing page of your PWA. For example, check out this [demo PWA](https://chrome.dev/devtools-protocol-handler/). 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 the `web+coffee` protocol. 3. In the **Application** \> **Manifest** \> **Protocol Handler** section, enter the URL you want the handler to test and click **Test protocol** . ![Testing the handler.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/testing-handler-ceb37867cf8cf.png) In this example, the handler can process `americano`, `chai`, and `latte-macchiato`. 4. When Chrome asks you if it can open the app, confirm by clicking **Open Protocol Handler** . ![Open the app.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/open-app-e8117350deb8.png) 5. In the next dialog, allow the app to handle `web+coffee` links. ![Allow to handle links.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/allow-handle-links-ba5af01a41b5a.png) 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 for Progressive Web Apps. They are scripts that the browser runs in the background, separate from a web page. These scripts enable you to access features that don't need a web page or user interaction, such as push notifications, background sync, and offline experiences. Related guides: - [Intro to Service Workers](https://developer.chrome.com/docs/workbox/service-worker-overview.md.txt) - [Push Notifications: Timely, Relevant, and Precise](https://web.dev/push-notifications-overview/) The **Service Workers** tab in the **Application** panel is the main place in DevTools to inspect and debug service workers. ![The Service Workers tab.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/the-service-workers-pane-2d79d90e8987b.png) - If a service worker is installed to the open page, then you'll see it listed on this tab. For example, in the screenshot of the Service Workers tab, there's a service worker installed for the scope of `https://airhorner.com/`. - The **Offline** checkbox puts DevTools into offline mode. This is equivalent to the offline mode available from the **Network** panel, or the `Go offline` option in the [Command Menu](https://developer.chrome.com/docs/devtools/command-menu.md.txt). - The **Update on reload** checkbox forces the service worker to update on every page load. - The **Bypass for network** checkbox bypasses the service worker and forces the browser to go to the network for requested resources. - The **Network requests** link takes you to the **Network** panel with a list of intercepted requests related to the service worker (`is:service-worker-intercepted` filter). - The **Update** link performs a one-time update of the specified service worker. - The **Push** button emulates a push notification without a payload, also known as a [tickle](https://web.dev/push-notifications-how-push-works/). - The **Sync** button emulates a background sync event. - The **Unregister** link unregisters the specified service worker. Read [Clear storage](https://developer.chrome.com/docs/devtools/progressive-web-apps.md.txt#clear-storage) to learn how to unregister a service worker and wipe storage and caches in one click. - The **Source** line tells you when the running service worker was installed. The link is the name of the service worker's source file. Clicking on the link sends you to the service worker's source. - The **Status** line tells you the status of the service worker. The number on this line (`#16` in the screenshot) indicates how many times the service worker has been updated. If you enable the **Update on reload** checkbox, the number increments on every page load. Next to the status, there's a **start** link (if the service worker is stopped) or a **stop** link (if the service worker is running). Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the **stop** link can simulate that. Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. It frequently reveals bugs due to faulty assumptions about persistent global state. - The **Clients** line tells you the origin that the service worker is scoped to. The **focus** button is mostly useful when you have multiple registered service workers. If you click **focus** next to a service worker that is running in a different tab, Chrome focuses on that tab. - The **Update 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 **Expand**. ![Activities and their timestamps.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/activities-their-timesta-49f3a1ea90e2d.png) For more information, see [The service worker lifecycle](https://web.dev/articles/service-worker-lifecycle). If the service worker causes any errors, the **Service Workers** tab shows an ![Error.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/error-689b65890c79e.png) **Error** icon with the number of errors next to the **Source** line. The link with the number takes you to the **Console** with all the logged errors. ![Service worker errors in the Console.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/service-worker-errors-th-53f221504a278.png) To see information on all service workers, click **See all registrations** at the bottom of the **Service Workers** tab. This link takes to `chrome://serviceworker-internals/?devtools` where you can further debug your service workers. ![Service worker registrations at serviceworker-internals.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/service-worker-registrati-2ad262380325.png) ## Service worker caches The **Cache Storage** tab provides a read-only list of resources that have been cached using the (service worker) [Cache API](https://developer.mozilla.org/docs/Web/API/Cache). ![Service worker cache tab.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/service-worker-cache-pane-8a2ee5227e33c.png) Note that the first time you open a cache and add a resource to it, DevTools might not detect the change. Reload the page and you should see the cache. If you've got two or more caches open, you'll see them listed below the **Cache Storage** drop-down. ![Multiple service worker caches.](https://developer.chrome.com/static/docs/devtools/progressive-web-apps/image/multiple-service-worker-c-c0cc180dd1423.png) ## Quota usage Some responses within the Cache Storage tab may be flagged as "[opaque](https://developers.google.com/web/fundamentals/glossary#opaque-response)". This refers to a response retrieved from a different origin, such as a [CDN](https://developers.google.com/web/fundamentals/glossary#CDN) or remote API, when [CORS](https://fetch.spec.whatwg.org/#http-cors-protocol) isn't enabled. In order to avoid leakage of cross-domain information, there's significant padding added to the size of an opaque response used for calculating storage quota limits (such as, whether a `QuotaExceeded` exception is thrown) and reported by the [`navigator.storage` API](https://developer.chrome.com/blog/estimating-available-storage-space.md.txt). The details of this padding vary from browser to browser, but for Chrome, this means that the *minimum* size that any single cached opaque response contributes to the overall storage usage is [approximately 7 megabytes](https://bugs.chromium.org/p/chromium/issues/detail?id=796060#c17). You should keep this in mind when determining how many opaque responses you want to cache, as you may exceed storage quota limitations much quicker than you'd otherwise expect based on the *actual* size of the opaque resources. Related guides: - [Stack Overflow: What limitations apply to opaque responses?](https://stackoverflow.com/q/39109789/385997) - [Workbox: Understanding Storage Quota](https://developer.chrome.com/docs/workbox/understanding-storage-quota.md.txt#beware-of-opaque-responses) ## Clear storage The **Clear Storage** tab is a very useful feature when developing progressive web apps. This tab lets you unregister service workers and clear all caches and storage with a single button click. Related guides: - [Clear Storage](https://developer.chrome.com/docs/devtools/storage/localstorage.md.txt#clear) ## Other Application panel guides Check out the guides for more help on the other panes of the **Application** panel. Related guides: - [Inspect page resources](https://developer.chrome.com/docs/devtools/resources.md.txt) - [Inspect and manage local storage and caches](https://developer.chrome.com/docs/devtools/storage/localstorage.md.txt)