/dev tips

(207) Geolocation Overrides CSS Overview Panel (209)

Chrome DevTools: Debug your Push Notifications Workflow

11th October 2019
Debug your Push Notifications Workflow

In JavaScript, you can use a Service Worker to send Push Notifications to your user by using the ServiceWorkerRegistration.showNotification() API.

You would typically show the notification in response to a Push Event (e.g. self.addEventListener('push', event => {}))

To help with development and debugging, you can use DevTools to trigger push events with custom data:

  1. In DevTools, open up the Application panel
  2. Open the Service Workers Pane
  3. In the Push input box, type in a message of your choice or use the prefilled text
  4. Click the Push button
  5. Observe a native (operating system) style notification appear

You can use this demo to try this feature: gauntface.github.io/simple-push-demo

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.