The gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. Push API Push concepts and usage When implementing PushManager subscriptions, it is vitally important that you protect against CSRF/XSRF issues in your app. See the following articles for more information: Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet Preventing CSRF and XSRF Attacks For an app to receive push messages, it has to have an active . When the service worker is active, it can subscribe to push notifications, using . service worker PushManager.subscribe() This should be done in response to a user gesture, such as clicking a button, for example: btn.addEventListener( , {
  serviceWorkerRegistration.pushManager.subscribe(options)
  .then( { });
}) 'click' ( ) function ( ) function pushSubscription // handle subscription This is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture. Firefox is already doing this from version 72, for example. The resulting includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data. PushSubscription The service worker will be started as necessary to handle incoming push messages, which are delivered to the event handler. ServiceWorkerGlobalScope.onpush This allows apps to react to push messages being received, for example, by displaying a notification (using .) ServiceWorkerRegistration.showNotification() Each subscription is unique to a service worker.  The endpoint for the subscription is a unique : knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application. capability URL Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Both Firefox and Chrome allow any number of Push messages that generate notifications. Firefox, but not Chrome, allows a limited number (quota) of push messages to be sent to an application that don't display a notification. The quota is refreshed each time the site is visited. : As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of Push messages is received, and not all generate a visible notification. Note : Chrome versions earlier than 52 require you to set up a project on to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service. Note Google Cloud Messaging Interfaces PushEvent Represents a push action, sent to the of a . It contains information sent from an application to a . global scope ServiceWorker PushSubscription PushManager Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete interface. PushRegistrationManager PushMessageData Provides access to push data sent by a server, and includes methods to manipulate the received data. PushSubscription Provides a subcription's URL endpoint, and allows unsubscription from a push service. Service worker additions The following additions to the have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events. Service Worker API ServiceWorkerRegistration.pushManager Returns a reference to the interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging. PushManager ServiceWorkerGlobalScope.onpush An event handler fired whenever a event occurs; that is, whenever a server push message is received. push ServiceWorkerGlobalScope.onpushsubscriptionchange An event handler fired whenever a event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.) pushsubscriptionchange Examples Mozilla's contains many useful Push examples. ServiceWorker Cookbook Specifications Browser compatibility PushEvent PushMessageData See also Sending VAPID identified WebPush Notifications via Mozilla’s Push Service , Joseph Medley Web Push Notifications: Timely, Relevant, and Precise Service Worker API Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Push_API Published under licence Open CC Attribution ShareAlike 3.0

Google

Mozilla

Timely

Push API Guide: How to Send Push Message to Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

119 Stories To Learn About Apps

A Quick Introduction to the Resize Observer API

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

119 Stories To Learn About Apps

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps