Debug background services

The Background Services section of Chrome DevTools is a collection of tools for the JavaScript APIs that enables your website to send and receive updates even when a user does not have your website open. A background service is functionally similar to a background process. Chrome DevTools considers each of the following APIs to be a background service:

• Background Fetch
• Background Sync
• Notifications
• Push Messages

Chrome DevTools can log fetch, sync, and notification events for three days, even when DevTools is not open. This can help you make sure that events are being sent and received as expected.

You can also inspect the details of each event.

Figure 1. Viewing the details of an event in the Push Messaging pane.

In addition to background service events, DevTools can show you reports that Chrome already sent or is about to send via the Reporting API.

Whenever your site's policies are violated, Chrome generates reports and sends them in batches with a delay even if the user has already left your site. For more information on policies you can set up, see Use cases and report types.

# Background Fetch

The Background Fetch API enables a service worker to reliably download large resources, like movies or podcasts, as a background service. To log Background Fetch event for three days, even when DevTools is not open:

1. Open DevTools.

2. Open the Application panel.

3. Open the Background Fetch pane.

   

   Figure 2. The Background Fetch pane.

4. Click Record . After triggering some Background Fetch activity, DevTools logs the events to the table.

   

   Figure 3. A log of events in the Background Fetch pane.

5. Click an event to view its details in the space below the table.

   

   Figure 4. Viewing the details of an event in the Background Fetch pane.

# Background Sync

The Background Sync API enables an offline service worker to send data to a server once it has re-established a reliable internet connection. To log Background Sync events for three days, even when DevTools is not open:

1. Open DevTools.

2. Open the Application panel.

3. Open the Background Sync pane.

   

   Figure 5. The Background Sync pane.

4. Click Record . After triggering some Background Sync activity, DevTools logs the events to the table.

   

   Figure 6. A log of events in the Background Sync pane.

5. Click an event to view its details in the space below the table.

   

   Figure 7. Viewing the details of an event in the Background Sync pane.

# Notifications

After a service worker has received a Push Message from a server, the service worker uses the Notifications API to display the data to a user. To log Notifications for three days, even when DevTools is not open:

1. Open DevTools.

2. Open the Application panel.

3. Open the Notifications pane.

   

   Figure 8. The Notifications pane.

4. Click Record . After triggering some Notifications activity, DevTools logs the events to the table.

   

   Figure 9. A log of events in the Notifications pane.

5. Click an event to view its details in the space below the table.

   

   Figure 10. Viewing the details of an event in the Notifications pane.

# Push Messages

To display a push notification to a user, a service worker must first use the Push Message API to receive data from a server. When the service worker is ready to display the notification, it uses the Notifications API. To log Push Messages for three days, even when DevTools is not open:

1. Open DevTools.

2. Open the Application panel.

3. Open the Push Messaging pane.

   

   Figure 11. The Push Messaging pane.

4. Click Record . After triggering some Push Message activity, DevTools logs the events to the table.

   

   Figure 12. A log of events in the Push Messaging pane.

5. Click an event to view its details in the space below the table.

   

   Figure 13. Viewing the details of an event in the Push Messaging pane.

# (Experimental) Reporting API

Some errors happen only in production. You never see them locally or during development because real users, networks, and devices change the game.

For example, say your new site relies on third-party software that uses document.write() to load critical scripts. New users all over the world open your site but they might have slower connections than you tested with. Unknown to you, your site starts breaking for them because Chrome intervenes against document.write() on slow networks.

Alternatively, you might want to keep an eye on deprecated or soon-to-be-deprecated APIs your code base may be using.

The Reporting API is designed to help you monitor deprecated API calls, security violations of your page, and more. You can set up reporting as described in Monitor your web application with the Reporting API.

To view the reports generated by a page:

1. Type or paste chrome://flags/#enable-experimental-web-platform-features in Chrome's URL bar.

2. Next to Experimental Web Platform features, click Enabled and restart Chrome.

3. Open DevTools > Settings > Experiments.

4. Check Enable Reporting API panel in the Application panel and reload DevTools.

5. Open Application > Background Services > Reporting API and reload your page.

   

The Reporting API tab is divided into three parts:

• The Reports table with the following information on each report:
  • URL that caused the report generation
  • Violation Type
  • Report Status
  • Destination endpoint
  • Generated at timestamp
  • Report Body
• The Report body preview section. To preview a report body, click on a report in the table above.
• The Endpoints section with an overview of all the endpoints configured in the Reporting-Endpoints header.

# Report status

The Status column tells you whether Chrome sent the report successfully, is about to send it, or failed.

Reports are removed after a while, whether or not they're successfully sent.