Web Push notifications is a web browser messaging protocol defined by the W3C.
Discussions of this interesting technology are clouded because of a
terminological morass.
To understand how Web Push operates, we need to observe that are three (and
potentially four) parties involved. These are:
1) The user's web browser. Let's call that BROWSER
2) The Web Push Service Provider which is operated by the organization
controlling the web browser's source code. Here named PROVIDER. An example of a
PROVIDER is FCM (Firebase Cloud Messaging) which is owned by Google.
3) The Web Application that a user is visiting from their web browser. Let's
call this the SERVICE (short for Web Push application service)
4) A Custom Web Push Intermediary Service, either third party or self-hosted.
Called INTERMEDIARY here. FCM also may fit in this category if the SERVICE
has an API key from FCM.]
The workflow works like this:
BROWSER visits a website which hosts a SERVICE.
The SERVICE asks BROWSER for its permission to subscribe to messages coming
from the SERVICE.
The SERVICE will provide context and obtain explicit permission before prompting
for notification permission:
In order to provide this context and explict permission a two-step opt-in process
where the user is first presented with a pre-permission dialog box that explains
what the notifications are for and why they are useful. This may help reduce the
possibility of users clicking "don't allow".
Now, to explain what happens in Typescript, we can activate a browser's
permission dialogue in this manner:
```
function askPermission(): Promise< NotificationPermission > {
return new Promise(function(resolve, reject) {
const permissionResult = Notification.requestPermission(function(result) {
resolve(result);
});
if (permissionResult) {
permissionResult.then(resolve, reject);
}
}).then(function(permissionResult) {
if (permissionResult !== 'granted') {
throw new Error("We weren't granted permission.");
}
return permissionResult;
});
}
```
The Notification.permission property indicates the permission level for the
current session and returns one of the following string values:
'granted': The user has granted permission for notifications.
'denied': The user has denied permission for notifications.
'default': The user has not made a choice yet.
Once the user has granted permission, the client application registers a service
worker using the `ServiceWorkerRegistration` API.
The `ServiceWorkerRegistration` API is accessible via the browser's `navigator`
object and the `navigator.serviceWorker` child object and ultimately directly
accessible via the navigator.serviceWorker.register method which also creates
the service worker or the navigator.serviceWorker.getRegistration method.
Once you have a `ServiceWorkerRegistration` object, that object will provide a
child object named `pushManager` through which subscription and management of
subscriptions may be done.
Let's go through the `register` method first:
```
navigator.serviceWorker.register('sw.js', { scope: '/' })
.then(function(registration) {
console.log('Service worker registered successfully:', registration);
})
.catch(function(error) {
console.log('Service worker registration failed:', error);
});
```
The `sw.js` file contains the logic for what a service worker should do.
It executes in a separate thread of execution from the web page but provides a
means of communicating between itself and the web page via messages.
Note that there is a scope can specify what network requests it may
intercept.
The Vue project already has its own service worker but it is possible to
create multiple service worker files by registering them on different scopes.
It is useful architecturally to specify a separate server worker file.
In the case of web push, the path of the scope only has reference to the domain
of the service worker and no relationship to the pathing for the web push
server. In order to specify more than one server workers each needs to be on
different scope paths!
Here's a version which can be used for testing locally. Note there can be
caching issues in your browser! Incognito is highly recommended.
sw-dev.ts
```
self.addEventListener('push', function(event: PushEvent) {
console.log('Received a push message', event);
const title = 'Push message';
const body = 'The message body';
const icon = '/images/icon-192x192.png';
const tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
```
vue.config.js
```
module.exports = {
pwa: {
workboxOptions: {
importScripts: ['sw-dev.ts']
}
}
}
```
Once we have the service worker registered and the ServiceWorkerRegistration is
returned, we then have access to a `pushManager` property object. This property
allows us to continue with the web push work flow.
In the next step, BROWSER requests a data structure from SERVICE called a VAPID
(Voluntary Application Server Identification) which is the public key from a
key-pair.
The VAPID is a specification used to identify the application server (i.e. the
SERVICE server) that is sending push messages through a push PROVIDER. It's an
authentication mechanism that allows the server to demonstrate its identity to
the push PROVIDER, by use of a public and private key pair. These keys are used
by the SERVICE in encrypting messages being sent to the BROWSER, as well as
being used by the BROWSER in decrypting the messages coming from the SERVICE.
The VAPID (Voluntary Application Server Identification) key provides more
security and authenticity for web push notifications in the following ways:
Identifying the Application Server:
The VAPID key is used to identify the application server that is sending
the push notifications. This ensures that the push notifications are
authentic and not sent by a malicious third party.
Encrypting the Messages:
The VAPID key is used to sign the push notifications sent by the
application server, ensuring that they are not tampered with during
transmission. This provides an additional layer of security and
authenticity for the push notifications.
Adding Contact Information:
The VAPID key allows a web application to add contact information to
the push messages sent to the browser push service. This enables the
push service to contact the application server in case of need or
provide additional debug information about the push messages.
Improving Delivery Rates:
Using the VAPID key can help improve the overall performance of web push
notifications, specifically improving delivery rates. By streamlining the
delivery process, the chance of delivery errors along the way is lessened.
If the BROWSER accepts and grants permission to subscribe to receiving from the
SERVICE Web Push messages, then the BROWSER makes a subscription request to
PROVIDER which creates and stores a special URL for that BROWSER.
Here's a bit of code describing the above process:
```
// b64 is the VAPID
b64 = 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U';
const applicationServerKey = urlBase64ToUint8Array(b64);
const options: PushSubscriptionOptions = {
userVisibleOnly: true,
applicationServerKey: applicationServerKey
};
registration.pushManager.subscribe(options)
.then(function(subscription) {
console.log('Push subscription successful:', subscription);
})
.catch(function(error) {
console.error('Push subscription failed:', error);
});
```
In this example, the `applicationServerKey` variable contains the VAPID public
key, which is converted to a `Uint8Array` using a function such as this:
```
export function toUint8Array(base64String: string, atobFn: typeof atob): Uint8Array {
const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
const rawData = atobFn(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length ; + + i ) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
```
The options object is of type `PushSubscriptionOptions` , which includes the
`userVisibleOnly` and `applicationServerKey` (ie VAPID public key) properties.
options: An object that contains the options used for creating the
subscription. This object itself has the following sub-properties:
applicationServerKey: A public key your push service uses for application
server identification. This is normally a Uint8Array.
userVisibleOnly: A boolean value indicating that the push messages that
are sent should be made visible to the user through a notification.
This is often set to true.
The subscribe() method returns a `Promise` that resolves to a `PushSubscription`
object containing details of the subscription, such as the endpoint URL and the
public key. The returned data would have a form like this:
{
"endpoint": "https://some.pushservice.com/some/unique/identifier",
"expirationTime": null,
"keys": {
"p256dh": "some_base64_encoded_string",
"auth": "some_other_base64_encoded_string"
}
}
endpoint: A string representing the endpoint URL for the push service. This
URL is essentially the push service address to which the push message would
be sent for this particular subscription.
expirationTime: A DOMHighResTimeStamp (which is basically a number or null)
representing the subscription's expiration time in milliseconds since
01 January, 1970 UTC. This can be null if the subscription never expires.
The BROWSER will, internally, then use that URL to check for incoming messages
by way of the service worker we described earlier. The BROWSER also sends this
URL back to SERVICE which will use that URL to send messages to the BROWSER via
the PROVIDER.
Ultimately, the actual internal process of receiving messages varies from BROWSER
to BROWSER. Approaches vary from long-polling HTTP connections to WebSockets. A
lot of handwaving and voodoo magic. The bottom line is that the BROWSER itself
manages the connection to the PROVIDER whilst the SERVICE must send messages
via the PROVIDER so that they reach the BROWSER service worker.
Just to remind us that in our service worker our code for receiving messages
will look something like this:
```
self.addEventListener('push', function(event: PushEvent) {
console.log('Received a push message', event);
const title = 'Push message';
const body = 'The message body';
const icon = '/images/icon-192x192.png';
const tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
```
Now to address the issue of receiving notification messages on mobile devices.
It should be noted that Web Push messages are only received when BROWSER is
open, except in the cases of Chrome and Firefox mobile BROWSERS. In iOS, the
mobile application (in our case a PWA) must be added to the Home Screen and
permissions must be explicitly granted that allow the application to receive
push notifications. Further, with an iOS device the user must enable wake on
notification to have their device light-up when it receives a notification
(https://support.apple.com/enus/HT208081).
So what about #4 ? - The INTERMEDIARY. Well, It is possible under very special
circumstances to create your own Web Push PROVIDER. The only case I've found so
far relates to making an Android Custom ROM. (An Android Custom ROM is a
customized version of the Android Operating System.) There are open source
IMTERMEDIARY products such as UnifiedPush (https://unifiedpush.org/) which can
fulfill this role. If you are using iOS you are not permitted to make or use
your own custom Web Push PROVIDER. Apple will never allow anyone to do that.
Apple has none of its own.
It is, however, possible to have a sort of proxy working between your SERVICE
and FCM (or iOS). Services that mash up various Push notification services (like
OneSignal) can perform in the role of such proxies.
#4 -The INTERMEDIARY- doesn't appear to be anything we should be spending our
time on.
A BROWSER may also remove a subscription. In order to remove a subscription,
the registration record must be retrieved from the serviceWorker using
`navigator.serviceWorker.ready` . Within the `ready` property is the
`pushManager` which has a `getSubscription` method. Once you have the
subscription object, you may call the `unsubscribe` method. `unsubscribe` is
asynchronnous and returns a boolean true if it is successful in removing the
subscription and false if not.
```
async function unsubscribeFromPush() {
// Check if the browser supports service workers
if ("serviceWorker" in navigator) {
// Get the registration object for the service worker
const registration = await navigator.serviceWorker.ready;
// Get the existing subscription
const subscription = await registration.pushManager.getSubscription();
if (subscription) {
// Unsubscribe
const successful = await subscription.unsubscribe();
if (successful) {
console.log("Successfully unsubscribed from push notifications.");
// You can also inform your server to remove this subscription
} else {
console.log("Failed to unsubscribe from push notifications.");
}
} else {
console.log("No subscription was found.");
}
} else {
console.log("Service workers are not supported by this browser.");
}
}
// Unsubscribe from push notifications
unsubscribeFromPush().catch((err) => {
console.error("An error occurred while unsubscribing from push notifications", err);
});
```
NOTE: We could offer an option within the app to "mute" these notifications. This wouldn't turn off the notifications at the browser level, but you could make it so that your Service Worker doesn't display them even if it receives them.
## NOTIFICATION DIALOG WORKFLOW
# ON APP FIRST-LAUNCH:
The user is periodically presented with the notification permission dialog that asks them if they want to turn on notifications. User is given 3 choices:
- "Turn on Notifications": triggers the browser's own notification permission prompt.
- "Maybe Later": dismisses the dialog, to reappear at a later instance. (The next time the user launches the app? After X amount of days? A combination of both?)
- "Never": dismisses the dialog; app remembers to not automatically present the dialog again.
# IF THE USER CHOOSES "NEVER":
The dialog can still be accessed via the Notifications toggle switch in `AccountViewView` (which also tells the user if notifications are turned on or off).
# TO TEMPORARILY MUTE NOTIFICATIONS:
While notifications are turned on, the user can tap on the Mute Notifications toggle switch in `AccountViewView` (visible only when notifications are turned on) to trigger the Mute Notifications Dialog. User is given the following choices:
- Several "Mute for X Hour/s" buttons to temporarily mute notifications.
- "Mute until I turn it back on" button to indefinitely mute notifications.
- "Cancel" to make no changes and dismiss the dialog.
# TO UNMUTE NOTIFICATIONS:
Simply tap on the Mute Notifications toggle switch in `AccountViewView` to immediately unmute notifications. No dialog needed.
# TO TURN OFF NOTIFICATIONS:
While notifications are turned on, the user can tap on the App Notifications toggle switch in `AccountViewView` to trigger the Turn Off Notifications Dialog. User is given the following choices:
- "Turn off Notifications" to fully turn them off (which means the user will need to go through the dialogs agains to turn them back on).
- "Leave it On" to make no changes and dismiss the dialog.
