Push API

I want to read about the Push API because I want to add push notifications to this site.

Date Created:
1 42

References



Notes


The Push API 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.

For an app to receive push notifications, it has to have an active service worker. When the service worker is active, it can subscribe to push notifications, using PushManager.subscribe().

The resulting PushSubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.

The service worker will be started as necessary to handle incoming push messages, which are delivered to the onpush event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using ServiceWorkerRegistration.showNotification()).

Each subscription is unique to the service worker. The endpoint for the subscription is a unique capability URL: 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 URLs grant access to a resource to anyone who has the URL. There are times when this is useful, for example one-shot password reset URLs, but overuse can be problematic as URLs cannot generally be kept secret. This document provides some good practices for web developers who wish to incorporate capability URLs into their applications.
W3C Docs

Activating s 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.

Some basic questions you can answer to determine if a push notification is needed:

  • Is there someone waiting in real-time for a response?
  • Is up-to-the-minute updating necessary?
  • Is there breaking news that is timely?

Interfaces

PushEvent

Represents a push action, sent the global scope of a ServiceWorker. It contains information sent from an application to a PushSubscription.

PushManager

Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications.

PushMessageData

Provides access to push data sent by a server, and includes methods to manipulate the received data.

PushSubscription

Provides a subscription URL endpoint, and allows unsubscribing from a push service.

PushSubscriptionOptions

Represents the options associated with the push subscription.

Service Worker Additions

The following additions to the Service Worker API 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.

ServiceWorkerRegistration.pushManager

Returns a reference to the PushManager 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.

onpush

An event handler hired whenever a push event occurs; that is, whenever a server push message is received.

onsubscriptionchange

An event handler fired whenever a pushsubscriptionchange 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).


Comments

You have to be logged in to add a comment

User Comments

Insert Math Markup

ESC
About Inserting Math Content
Display Style:

Embed News Content

ESC
About Embedding News Content

Embed Youtube Video

ESC
Embedding Youtube Videos

Embed TikTok Video

ESC
Embedding TikTok Videos

Embed X Post

ESC
Embedding X Posts

Embed Instagram Post

ESC
Embedding Instagram Posts

Insert Details Element

ESC

Example Output:

Summary Title
You will be able to insert content here after confirming the title of the <details> element.

Insert Table

ESC
Customization
Align:
Preview:

Insert Horizontal Rule

#000000

Preview:


View Content At Different Sizes

ESC

Edit Style of Block Nodes

ESC

Edit the background color, default text color, margin, padding, and border of block nodes. Editable block nodes include paragraphs, headers, and lists.

#ffffff
#000000

Edit Selected Cells

Change the background color, vertical align, and borders of the cells in the current selection.

#ffffff
Vertical Align:
Border
#000000
Border Style:

Edit Table

ESC
Customization:
Align:

Upload Lexical State

ESC

Upload a .lexical file. If the file type matches the type of the current editor, then a preview will be shown below the file input.

Upload 3D Object

ESC

Upload Jupyter Notebook

ESC

Upload a Jupyter notebook and embed the resulting HTML in the text editor.

Insert Custom HTML

ESC

Edit Image Background Color

ESC
#ffffff

Insert Columns Layout

ESC
Column Type:

Select Code Language

ESC
Select Coding Language

Insert Chart

ESC

Use the search box below

Upload Previous Version of Article State

ESC