Push notifications are now supported cross-browser

Deliver timely and useful notifications to your users.

Mar 28, 2023

Thomas Steiner

TwitterGitHubGlitchHomepage

Push notifications were standardized in 2016 with the release of the Push API and the Notification API, which are part of the W3C's Web Applications Working Group. These APIs provide the necessary functionality for web developers to incorporate push notifications into their web applications and for users to receive and interact with notifications on their web browsers. Push messages are notifications that are sent to a user's web browser from a website or application that the user has previously granted permission to send notifications. These messages can be used to alert the user of new content or updates, remind them of upcoming events or deadlines, or provide other important information. Push messages can be particularly useful for applications that need to deliver timely, relevant information to their users, such as news or sports apps, or for e-commerce websites that want to send users notifications about special offers or sales.

To sign up for push notifications, first check if your browser supports them by checking for the serviceWorker and PushManager objects in the navigator and window objects.

If push notifications are supported, use the async and await keywords to register the service worker and subscribe for push notifications. Here is an example of how you can do this using JavaScript:

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Further reading #

• Push notifications overview
• Push API
• Web Push for Web Apps on iOS and iPadOS

Acknowledgements #

Hero image by Jean Bach on Unsplash.