重新加载页面后 Service Worker 显示为已删除 [英] Service Worker showing as deleted after reloading the page

问题描述

我正在使用 react 并尝试实现 Service Worker，我编写了一个用于推送通知的微型 Service Worker 文件，当用户单击按钮时正在注册 Service Worker，现在如果我发送推送消息，它会按预期工作，但是当我重新加载页面时，即使注册成功，应用程序中的 Service Worker 仍显示为已删除，请参考截图

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

服务工作者代码

    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);

注册 service worker 函数

Register service worker function

function registerServiceWorker() {
  return navigator.serviceWorker.register('/newsw.js');
}

Service Worker 删除的截图

Service worker deleted screenshot

推荐答案

我怀疑它发生是因为你打开了重新加载时更新"

I suspect it happens because you turned "update on reload" on.

这会强制 Service Worker 在您重新加载页面时进行更新.(在此处阅读更多信息)

This forces the service worker to update whenever you reload the page. (read more here)

这篇关于重新加载页面后 Service Worker 显示为已删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！