forked from trent_larson/crowd-funder-for-time-pwa
fix some formatting of web-push doc
This commit is contained in:
17
web-push.md
17
web-push.md
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user