Debugging web push notifications on a specific device

This article describes a simple and effective method for debugging web push notifications on a specific browser using Pushpad.

Let's say that you have configured the notifications on your website and then you realize that notifications are not displayed by a specific browser. Probably your website is running in production and you already have many subscribers to your notifications.

Now you want to send some test notifications for debugging purposes, but you don't want to disturb all the real subscribers with test notifications. What you should do?

Thanks to audience targeting it's simple to send test notifications only to a specific browser / device.

First you need to open the browser that have problems with notifications.

Then open the Developer Tools and click Console. Then type the following command to see if the browser is subscribed to notifications (and any data associated to that subscription):

pushpad('status', function (isSubscribed, tags, uid) { console.log(isSubscribed, tags, uid); });

This will print some useful information in the console: you can see if the browser is subscribed, what tags are associated to it and the user ID.

Then if you see that you are not subscribed to notifications you need to subscribe: you can use the normal subscription flow of your website or type pushpad('subscribe') directly in the console.

Then you need to add a unique tag to this browser using the Javascript SDK (this command will set the tags and remove any existing tags):

pushpad('tags', ['testdevice1']);

Finally you can go to the Pushpad dashboard (or use the API) and send a notification to that specific tag: when you send the notification select "Custom audience" and type the tag (e.g. testdevice1) in the "Filter by tags" field. In this way you can send test notifications only to that specific test device, without disturbing the real users.

Before sending the notification make sure that the "Estimated people reached" is only 1.

After sending the test notification you can go to Notifications and click Details to see the notification delivery status. Is it successfully sent or it shows a specific error? You can learn more about delivery status in the docs.

If it's successful, you can also use the browser developer tools to inspect the service workers and debug the reception of the notification.