The only snippet you will need to deal with push notifications in a service worker

Great post! But how would you integrate this into your Workbox setup? I'm having troubles since I'm using its auto-generated sw.js file based on my workbox config, are you adding the push code there too or somewhere else..?

Show me the snippet

I know, i know... let's get to the point of this article: the snippet.

// @link https://flaviocopes.com/push-api/ // @link https://web.dev/push-notifications-handling-messages/ self.addEventListener('push', function (event) { if (!event.data) { console.log('This push event has no data.'); return; } if (!self.registration) { console.log('Service worker does not control the page'); return; } if (!self.registration || !self.registration.pushManager) { console.log('Push is not supported'); return; } const eventText = event.data.text(); // Specify default options let options = {}; let title = ''; // Support both plain text notification and json if (eventText.substr(0, 1) === '{') { const eventData = JSON.parse(eventText); title = eventData.title; // Set specific options // @link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#parameters if (eventData.options) { options = Object.assign(options, eventData.options); } // Check expiration if specified if (eventData.expires && Date.now() > eventData.expires) { console.log('Push notification has expired'); return; } } else { title = eventText; } // Warning: this can fail silently if notifications are disabled at system level // The promise itself resolve to undefined and is not helpful to see if it has been displayed properly const promiseChain = self.registration.showNotification(title, options); // With this, the browser will keep the service worker running until the promise you passed in has settled. event.waitUntil(promiseChain); });

So what does this do ?

In your service worker (using workbox is highly recommended), define the listener for push notifications

Do some checks to see if the push is actually valid

Support push messages in both plain text and json format. The json format allows us to set custom options for each push message (body, icons, actions...)

I added an expiration check. Indeed, if the device is offline, it will get the push notifications as soon as it gets online. But maybe your push notifications won't be relevant anymore. If it's the case, simply pass a "expires" property along with the timestamp at which the notification expires.

And then, show the notification :-)

(and yes, I added some comments and links to make sure to remember how it works)

Happy coding :-)

The only snippet you will need to deal with push notifications in a service worker

Comments (1)

More from this blog

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

Modern tooltips

Using Dialog elements today

Show me the snippet

Command Palette

Comments (1)

More from this blog

Show me the snippet