Notes on service worker for development of web push

This commit is contained in:
Matthew Raymer
2023-08-24 21:21:15 +08:00
parent bb6bacac97
commit 7de6171911

View File

@@ -49,7 +49,38 @@ function askPermission(): Promise<NotificationPermission> {
If the user grants permission, the client application registers a service worker using
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
Application Server Identification) which is the public key from a key-pair.