forked from trent_larson/crowd-funder-for-time-pwa
Notes on service worker for development of web push
This commit is contained in:
33
web-push.md
33
web-push.md
@@ -49,7 +49,38 @@ function askPermission(): Promise<NotificationPermission> {
|
|||||||
If the user grants permission, the client application registers a service worker using
|
If the user grants permission, the client application registers a service worker using
|
||||||
the ServiceWorkerRegistration API.
|
the ServiceWorkerRegistration API.
|
||||||
|
|
||||||
<Add Service Worker Notes>
|
|
||||||
|
Here's a version which can be used for testing locally. Note there can be
|
||||||
|
caching issues in your browser! Incognito is highly recommended.
|
||||||
|
|
||||||
|
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']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
In the next step, BROWSER requests a data structure from SERVICE called a VAPID (Voluntary
|
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.
|
Application Server Identification) which is the public key from a key-pair.
|
||||||
|
|||||||
Reference in New Issue
Block a user