https://web.dev/push-notifications-in-all-modern-browsers/

Skip to content
Open menu 
About Blog Learn Explore Patterns Case studies Close
We want to hear from you! We are looking for web developers to
participate in user research, product testing, discussion groups and
more. Apply now to join our WebDev Insights Community.
The word push written in mirrored letters.
On this page

  * Further reading
  * Acknowledgements

  * Home
  * All articles

Push notifications are now supported cross-browser

Deliver timely and useful notifications to your users.

Mar 28, 2023
Thomas Steiner
Thomas Steiner
TwitterGitHubGlitchHomepage
On this page

  * Further reading
  * Acknowledgements

Celebration
This web feature is now available in all three browser engines!

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

Prior to version 16, Safari on macOS supported a proprietary version
of push notifications. Since version 16, Safari for macOS now
supports standard push notifications as other browsers. Safari for
iOS and iPadOS supports push notifications as of version 16.4, but
only for apps that were added to the Home Screen. Apple calls these
Home Screen web apps.
Browser support

  * chrome 42, Supported 42
  * firefox 44, Supported 44
  * edge 17, Supported 17
  * safari 16, Supported 16

Source

Further reading #

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

Acknowledgements #

Hero image by Jean Bach on Unsplash.Newly interoperable
Last updated: Mar 28, 2023 -- Improve article
Return to all articles
Share
subscribe
 

We want to help you build beautiful, accessible, fast, and secure
websites that work cross-browser, and for all of your users. This
site is our home for content to help you on that journey, written by
members of the Chrome team, and external experts.

Contribute

  * File a bug
  * View source

Related content

  * developer.chrome.com
  * Chrome updates
  * Case studies
  * Podcasts
  * Shows

Connect

  * Twitter
  * YouTube

  * Google Developers
  * Chrome
  * Firebase
  * Google Cloud Platform
  * All products

Dark theme [ ]

  * Terms & Privacy
  * Community Guidelines

Except as otherwise noted, the content of this page is licensed under
the Creative Commons Attribution 4.0 License, and code samples are
licensed under the Apache 2.0 License. For details, see the Google
Developers Site Policies. By Chrome DevRel