Web Notification API onclick

I’ve covered before that the browser Notification API lets you display desktop notifications like this:

Notification.requestPermission(perm =>
  navigator.serviceWorker.ready.then(reg => reg.showNotification("HEY!!")));

And when I click that notification ... nothing happens. Actually, something does happen: a Chrome window focuses. An arbitrary Chrome window. This is not what I want.

We want to supply a callback for notification clicks. This is yet another service worker event type! This time, it’s onnotificationclick. Drop this in your service worker:

self.addEventListener("notificationclick", (ev) => {
  console.log("Notification clicked!");
});

Now when you click the notification, the console logs that line. Now more useful: I would like notification clicks to open a webpage. This can be done with clients.openWindow:

self.addEventListener("notificationclick", (ev) => {
  clients.openWindow("https://jameshfisher.com/");
});
Tagged .
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2017. Content is not associated with my employer. Found an error? Edit this page.