Am using react and trying to implement service worker, I had written a mini service worker file for push notifications, when the user clicks a button am registering a service worker, now if i send a push message it working as expected, but when i reload the page, the service worker in application shows as deleted even though the registration was successful, please refer screenshot
Service worker code
const self = this;
function receivePushNotification(event) {
console.log('[Service Worker] Push Received.');
console.log(event);
// const { image, tag, url, title, text } = event.data.json();
const options = {
data: '/neworders',
body: 'New order request',
vibrate: [200, 100, 200],
badge: 'https://spyna.it/icons/favicon.ico',
actions: [
{
action: 'Detail',
title: 'View',
icon: 'https://via.placeholder.com/128/ff0000',
},
],
};
event.waitUntil(self.registration.showNotification('Hello', options));
}
function openPushNotification(event) {
console.log(
'[Service Worker] Notification click Received.',
event.notification.data
);
event.notification.close();
event.waitUntil(clients.openWindow(event.notification.data));
}
self.addEventListener('install', function (event) {
console.log({ event });
// The promise that skipWaiting() returns can be safely ignored.
self.skipWaiting();
// Perform any other actions required for your
// service worker to install, potentially inside
// of event.waitUntil();
});
self.addEventListener('activate', (event) => {
console.log('V1 now ready to handle fetches!');
});
self.addEventListener('push', receivePushNotification);
self.addEventListener('notificationclick', openPushNotification);
Register service worker function
function registerServiceWorker() {
return navigator.serviceWorker.register('/newsw.js');
}
Service worker deleted screenshot
from Service Worker showing as deleted after reloading the page
No comments:
Post a Comment