Debug a Progressive Web App (PWA)

Use the Application tool to inspect, modify, and debug a PWA's web app manifests, service workers, and service worker caches.

The Application tool includes the following panes for PWA features:

• Use the Manifest pane to inspect your web app manifest.

• Use the Service workers pane for service-worker-related tasks, such as:

  • Unregistering or updating a service.
  • Emulating push events.
  • Going offline.
  • Stopping a service worker.

• Use the Cache Storage pane to view your service worker cache.

• Use the Storage pane to view how much data your app is storing on the device, and clear the stored data.

The features that are discussed below are features of the Application tool are relevant for PWAs. For help on the other features and panes in the Application tool, see:

• View the resource files that make up a webpage
• View and edit local storage

See also:

• Overview of Progressive Web Apps (PWAs)

Web app manifest

If you want your users to be able to add your app to their mobile homescreens, you need a web app manifest. The manifest defines how the app appears on the homescreen, where to direct the user when launching from homescreen, and what the app looks like on launch.

To inspect a manifest:

1. Go to the webpage that uses the manifest, such as Airhorner.com, in a new window or tab.

2. Right-click the webpage, and then select Inspect.

   DevTools opens.

3. In DevTools, select the Application tool.

4. In the outline on the left, in the Application section, select Manifest.

   The App Manifest pane is displayed, where you can inspect the manifest:

The App Manifest pane contains the following sections:

• Top section, containing the manifest link

• Identity

• Presentation

• Protocol Handlers

• Icons

• Window Controls Overlay

• Screenshot #1

• Screenshot #2

• To view the manifest source file, click the link below the App Manifest label. In the previous figure, that link is manifest.json, which opens https://airhorner.com/manifest.json, for Airhorner.com.

• The Identity and Presentation sections display fields from the manifest source in a more user-friendly display.

• The Icons section displays every icon that's been specified in the manifest.

Service workers

Service workers are a fundamental technology in the web platform. Service workers are scripts that the browser runs in the background, separate from a webpage. Service worker scripts enable your app to access features that don't need a webpage or user interaction, such as push notifications, background sync, and offline experiences.

The main place in DevTools to inspect and debug service workers is the Service workers pane in the Application tool.

To view service workers:

1. Go to a webpage, such as Airhorner.com, in a new window or tab.

2. Right-click the webpage, and then select Inspect.

   DevTools opens.

3. In DevTools, select the Application tool.

4. In the outline on the left, in the Application section, select Service workers.

   The Service workers pane is displayed:

• If a service worker is installed to the currently open page, then the service worker is listed in the Service workers pane. For example, in the previous figure, there is a service worker installed for the scope of https://weather-pwa-sample.firebaseapp.com.

• The Offline checkbox puts DevTools into offline mode. This is equivalent to the offline mode available from the Network tool, or the Go offline option in the Command Menu.

• 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 tool with a list of intercepted requests related to the service worker (the is:service-worker-intercepted filter). See Display network requests handled by a service worker, below.

• The Update button 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).

• The Sync button emulates a background sync event.

• The Unregister link unregisters the specified service worker. To unregister a service worker and wipe storage and caches with a single button-click, see Clear storage, below.

• The Source line tells you when the currently running service worker was installed. The link is the name of the source file of the service worker. Choosing on the link sends you to the source of the service worker.

• The Status line tells you the status of the service worker. The ID number next to the green status indicator (#36 in the previous figure) is for the currently active service worker.

  Next to the status:

  • If the service worker is stopped, a start button is displayed.
  • If the service worker is running, a stop button is displayed.

  Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the stop button may 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've enabled the show all checkbox. When that checkbox is enabled, all registered service workers are listed. If you click the focus button next to a service worker that is running in a different tab, Microsoft Edge focuses on that tab.

• The Update Cycle table displays the service worker's activities and their elapsed times, such as Install, Wait, and Activate. To see the exact timestamp of each activity, click the Expand () buttons.

If the service worker causes any errors, an Errors label is displayed.

See also:

• Service Worker API - at MDN, about service workers.

Display network requests handled by a service worker

From the Service workers pane of the Application tool, you can quickly access the list of network requests that are handled by a service worker, through the Network tool.

To display the network requests that are handled by a service worker:

1. Go to a webpage, such as Airhorner.com, in a new window or tab.

2. Right-click the webpage, and then select Inspect.

   DevTools opens.

3. In DevTools, select the Application tool.

4. In the outline on the left, in the Application section, select Service workers.

   The Service workers pane is displayed.

5. In the upper right of the Service workers pane, click the Network requests button.

   The Network tool opens.

   The Filter text box contains is:service-worker-intercepted. This filter only displays the requests that were handled by this service worker.

6. Refresh the webpage.

7. Select one of the requests, such as main.css.

   The sidebar appears.

8. In the sidebar, click the Timing tab.

   The Service Worker section displays timing information about the Startup and respondWith phases.

Service worker caches

The Cache Storage pane provides a read-only list of resources that have been cached using the (service worker) Cache API:

The first time you open a cache and add a resource to it, DevTools might not detect the change. Refresh the page to display the cache.

All open caches are listed under the Cache Storage expander.

Quota usage

Some responses within the Cache Storage pane may be flagged as being "opaque". This refers to a response retrieved from a different origin, like from a CDN or remote API, when CORS isn't enabled.

In order to avoid leakage of cross-domain information, significant padding is added to the size of an opaque response used for calculating storage quota limits (for example whether a QuotaExceeded exception is thrown) and reported by the navigator.storage API.

The details of this padding vary from browser to browser, but for Microsoft Edge, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes. Remember the padding when determining how many opaque responses you want to cache, since you may easily exceed storage quota limitations much sooner than you otherwise expect based on the actual size of the opaque resources.

Related Guides:

• Stack Overflow: What limitations apply to opaque responses?

Clear storage

The Clear Storage tab is useful when developing a progressive web app. Use the Clear Storage pane to unregister service workers and clear all caches and storage, with a single button-click.

See also

• Inspect network activity

This work is licensed under a Creative Commons Attribution 4.0 International License.