Browse Source

fix some formatting of web-push doc

plan-loc
Trent Larson 1 year ago
parent
commit
dc54006fca
  1. 13
      web-push.md

13
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
@ -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.

Loading…
Cancel
Save