Learn more about Russian war crimes in Ukraine.

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/");
});

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.