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 background service events for 3 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.

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 3 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 3 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 3 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 3 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.