@ -12,7 +12,7 @@ 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.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's3) The Web Application that a user is visiting from their web browser. Let's
call this the SERVICE (short for Web Push application service)call this the SERVICE (short for Web Push application service)
[ 4) A Custom Web Push Intermediary Service, either third party or self-hosted.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 SERVICECalled INTERMEDIARY here. FCM also may fit in this category if the SERVICE
has an API key from FCM.]has an API key from FCM.]
@ -105,7 +105,7 @@ Here's a version which can be used for testing locally. Note there can be
caching issues in your browser! Incognito is highly recommended.caching issues in your browser! Incognito is highly recommended.
sw-dev.tssw-dev.ts
```
self.addEventListener('push', function(event: PushEvent) {self.addEventListener('push', function(event: PushEvent) {
console.log('Received a push message', event); console.log('Received a push message', event);
@ -122,10 +122,11 @@ self.addEventListener('push', function(event: PushEvent) {
}) })
); );
});});
```
vue.config.jsvue.config.js
```
module.exports = {module.exports = {
pwa: { pwa: {
workboxOptions: { workboxOptions: {
@ -133,6 +134,7 @@ module.exports = {
} }
} }
}}
```
Once we have the service worker registered and the ServiceWorkerRegistration isOnce we have the service worker registered and the ServiceWorkerRegistration is
returned, we then have access to a `pushManager` property object. This propertyreturned, we then have access to a `pushManager` property object. This property
@ -184,6 +186,7 @@ PROVIDER which creates and stores a special URL for that BROWSER.
Here's a bit of code describing the above process:Here's a bit of code describing the above process:
```
// b64 is the VAPID// b64 is the VAPID
b64 = 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U';b64 = 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U';
const applicationServerKey = urlBase64ToUint8Array(b64);const applicationServerKey = urlBase64ToUint8Array(b64);
@ -199,6 +202,7 @@ registration.pushManager.subscribe(options)
.catch(function(error) { .catch(function(error) {
console.error('Push subscription failed:', error); console.error('Push subscription failed:', error);
}); });
```
In this example, the `applicationServerKey` variable contains the VAPID publicIn this example, the `applicationServerKey` variable contains the VAPID public
key, which is converted to a `Uint8Array` using a function such as this:key, which is converted to a `Uint8Array` using a function such as this:
@ -221,6 +225,16 @@ export function toUint8Array(base64String: string, atobFn: typeof atob): Uint8Ar
The options object is of type `PushSubscriptionOptions` , which includes theThe options object is of type `PushSubscriptionOptions` , which includes the
`userVisibleOnly` and `applicationServerKey` (ie VAPID public key) properties.`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` The subscribe() method returns a `Promise` that resolves to a `PushSubscription`
object containing details of the subscription, such as the endpoint URL and theobject containing details of the subscription, such as the endpoint URL and the
public key. The returned data would have a form like this:public key. The returned data would have a form like this:
@ -242,16 +256,6 @@ public key. The returned data would have a form like this:
representing the subscription's expiration time in milliseconds since representing the subscription's expiration time in milliseconds since
01 January, 1970 UTC. This can be null if the subscription never expires. 01 January, 1970 UTC. This can be null if the subscription never expires.
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 BROWSER will, internally, then use that URL to check for incoming messagesThe 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 thisby 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 viaURL back to SERVICE which will use that URL to send messages to the BROWSER via
@ -266,6 +270,7 @@ via the PROVIDER so that they reach the BROWSER service worker.
Just to remind us that in our service worker our code for receiving messagesJust to remind us that in our service worker our code for receiving messages
will look something like this:will look something like this:
```
self.addEventListener('push', function(event: PushEvent) {self.addEventListener('push', function(event: PushEvent) {
console.log('Received a push message', event); console.log('Received a push message', event);
@ -282,7 +287,7 @@ self.addEventListener('push', function(event: PushEvent) {
}) })
); );
});});
```
Now to address the issue of receiving notification messages on mobile devices.Now to address the issue of receiving notification messages on mobile devices.
@ -309,3 +314,47 @@ OneSignal) can perform in the role of such proxies.
#4 -The INTERMEDIARY- doesn't appear to be anything we should be spending our#4 -The INTERMEDIARY- doesn't appear to be anything we should be spending our
time on.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.
