If you work with the Push API or service workers in general you know that debugging can be a pain. Fortunately Chrome has some hidden gems that can save you many headaches.
In order to debug your service workers, open Chrome and type one of the following URLs in the address bar:
In particular they can be useful to terminate the service worker or see console.log messages, errors, and whether the service worker code is updated.
On recent versions of Chrome you can also inspect the service workers using the Chrome developer tools:
- Visit the website that you want to inspect using Chrome
- Click View -> Developer -> Developer Tools
- Open the Application tab
- In the side navigation click Service workers
If your website sends push notifications, you should see at least one service worker that is registered and activated: a service worker, usually placed in the root directory, is always required in order to display the notifications received using the Push API. If you don't see a service worker, the push notifications won't be displayed. You can also inspect the code of the service worker by clicking Source.
Another interesting feature for inspecting the push messages received is the Push messaging tab located under Background services in the side navigation. It allows to see the push messages received by the service worker regardless of whether notifications are displayed or not. For example, if you don't handle the push event in the service worker, a push message can be still received successfully and is listed there, even if you don't see any visible notification. If you are debugging notifications on a website, this allows to understand if the problem is that your device is not receiving the notifications, or if the notifications are received but not displayed.
Tip: remember to click the Start recording events button to see the push messages, otherwise the list will be empty.
