|
|
@ -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. |
|
|
|
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. |
|
|
|
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.] |
|
|
|
|
|
|
@ -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. |
|
|
|
|
|
|
|
sw-dev.ts |
|
|
|
|
|
|
|
``` |
|
|
|
self.addEventListener('push', function(event: PushEvent) { |
|
|
|
console.log('Received a push message', event); |
|
|
|
|
|
|
@ -122,10 +122,11 @@ self.addEventListener('push', function(event: PushEvent) { |
|
|
|
}) |
|
|
|
); |
|
|
|
}); |
|
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
vue.config.js |
|
|
|
|
|
|
|
``` |
|
|
|
module.exports = { |
|
|
|
pwa: { |
|
|
|
workboxOptions: { |
|
|
@ -133,6 +134,7 @@ module.exports = { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
Once we have the service worker registered and the ServiceWorkerRegistration is |
|
|
|
returned, we then have access to a `pushManager` property object. This property |
|
|
@ -152,13 +154,13 @@ 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: |
|
|
|
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: |
|
|
|
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 |
|
|
@ -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: |
|
|
|
|
|
|
|
``` |
|
|
|
// b64 is the VAPID |
|
|
|
b64 = 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'; |
|
|
|
const applicationServerKey = urlBase64ToUint8Array(b64); |
|
|
@ -199,6 +202,7 @@ registration.pushManager.subscribe(options) |
|
|
|
.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: |
|
|
@ -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 messages |
|
|
|
will look something like this: |
|
|
|
|
|
|
|
``` |
|
|
|
self.addEventListener('push', function(event: PushEvent) { |
|
|
|
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. |
|
|
|