Service Worker 原理与实践

if ('serviceWorker' in navigator) {
  // Register a service worker hosted at the root of the
  // site using the default scope.
  navigator.serviceWorker.register('/sw.js', {
    scope: "/",
    updateViaCache: "none",
  }).then((registration) => {
    console.log('Service worker registration succeeded:', registration);
  }, (error) => {
    console.error(`Service worker registration failed: ${error}`);
  });
} else {
  console.error('Service workers are not supported.');
}

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ])
      )
  );
});

self.addEventListener('activate', event => {
  clients.claim();
  console.log('v1 now ready to handle fetches!');
});

self.addEventListener("fetch", event => {
  // 阻止默认行为，自己处理请求
  event.respondWith(
    caches.match(event.request).then(response => {
      // 如果发现缓存有响应则返回，否则走网络请求
      return response || fetch(event.request);
    }).catch(() => {
      return caches.match("/fallback.html");
    })
  );
});

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      console.log("Registration succeeded.");
      button.onclick = () => {
        registration.update();
      };
    })
    .catch((error) => {
      console.error(`Registration failed with ${error}`);
    });
}

self.addEventListener('install', event => {
  // skipWaiting 返回立刻 resolve 为 undefined 的 promise
  // 可以安全地忽略
  self.skipWaiting();

  event.waitUntil(
    // caching etc
  );
});

self.addEventListener('activate', (event) => {
  const cacheAllowlist = ['v2'];

  event.waitUntil(
    caches.forEach((cache, cacheName) => {
      if (!cacheAllowlist.includes(cacheName)) {
        return caches.delete(cacheName);
      }
    })
  );
});

self.addEventListener('install', function (event) {
  console.log('[SW]:', 'Install event');

  var installing = undefined;

  if (strategy === 'changed') {
    installing = cacheChanged('main');
  } else {
    installing = cacheAssets('main');
  }

  event.waitUntil(installing);
});

self.addEventListener('activate', function (event) {
  console.log('[SW]:', 'Activate event');

  var activation = cacheAdditional();

  // Delete all assets which name starts with CACHE_PREFIX and
  // is not current cache (CACHE_NAME)
  activation = activation.then(storeCacheData);
  activation = activation.then(deleteObsolete);
  activation = activation.then(function () {
    if (self.clients && self.clients.claim) {
      return self.clients.claim();
    }
  });

  if (navigationPreload && self.registration.navigationPreload) {
    activation = Promise.all([activation, self.registration.navigationPreload.enable()]);
  }

  event.waitUntil(activation);
});

self.addEventListener('fetch', function (event) {
  if (event.request.method !== 'GET') {
    return;
  }

  var url = new URL(event.request.url);
  url.hash = '';

  var urlString = url.toString();

  // 处理非 external URL
  if (externals.indexOf(urlString) === -1) {
    url.search = '';
    urlString = url.toString();
  }

  var assetMatches = allAssets.indexOf(urlString) !== -1;
  var cacheUrl = urlString;

  // 处理单页面重定向
  if (!assetMatches) {
    var cacheRewrite = matchCacheMap(event.request);

    if (cacheRewrite) {
      cacheUrl = cacheRewrite;
      assetMatches = true;
    }
  }

  if (!assetMatches) {
    // 处理 navigationPreload
    // ...
    // 请求如果不在资源列表则使用浏览器默认的处理方式
    return;
  }

  // Cache handling/storing/fetching starts here
  var resource = undefined;

  if (responseStrategy === 'network-first') {
    resource = networkFirstResponse(event, urlString, cacheUrl);
  } else { // 'cache-first' otherwise
    resource = cacheFirstResponse(event, urlString, cacheUrl);
  }

  event.respondWith(resource);
});

self.addEventListener('message', function (e) {
  var data = e.data;
  if (!data) return;

  switch (data.action) {
    case 'skipWaiting':
      {
        if (self.skipWaiting) self.skipWaiting();
      }break;
  }
});

// 0. 请求通知权限
export function requestNotificationPermission() {
  if (!("Notification" in window)) return;

  if (Notification.permission === "granted") {
    initListener();
    return;
  }

  if (Notification.permission === "default") {
    Notification.requestPermission().then((permission) => {
      if (permission === "granted") {
        initListener();
      }
    });
  }
}

export const TAB_STATUS = {
  noTab: "noTab",
  noVisibleTab: "noVisibleTab",
  hasVisibleTab: "hasVisibleTab",
};

// 2. 注册 sw.js
export function registerServiceWorker() {
  if ("serviceWorker" in navigator) {
    window?.requestIdleCallback?.(() => {
      navigator.serviceWorker.register("/sw.js").then(
        function (registration) {
          console.log("注册成功，scope: ", registration.scope);
        },
        function (err) {
          console.log("注册失败: ", err);
        }
      );
    });
    
    // 3. 监听 sw 传递的消息
    navigator.serviceWorker.addEventListener("message", (event) => {
      const lastReadMessageId = getLastReadMessageId();

      switch (event.data.msg) {
        case TAB_STATUS.noTab:
          break;
        case TAB_STATUS.noVisibleTab:
        case TAB_STATUS.hasVisibleTab:
          // 自定义一些操作，比如展示未读消息
          ee.emit("displayUnreadMessages", lastReadMessageId);
          break;
        default:
          break;
      }
    });
  }
}

// 4. 发送通知
export function pushNotification(text: string) {
  if (window?.Notification?.permission !== "granted") return;

  const visibleTabCount = getVisibleTabCount();
  if (visibleTabCount > 0) return;

  // 由 master tab 发送通知
  if (!sharedAgentChat.isMaster) return;

  navigator?.serviceWorker.getRegistration().then(function (reg) {
    reg?.showNotification("PN Title", {
      body: text, // 消息主体
      data: { // 任意类型的数据
        url: window.location.origin + '#pn', // 比如传了 url，用 #pn 来标记从通知进入
      },
    });
  });
}

self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim());
});

// 1. 准备 sw.js 文件 监听通知点击事件
self.addEventListener("notificationclick", (e) => {
  e.notification.close(); // 关闭通知
  e.waitUntil( // 获取所有 Window clients
    self.clients.matchAll({ type: "window" }).then((clientsArr) => {
      if (clientsArr.length) {
        const hasVisibleTab = clientsArr.some((windowClient) => {
          // 已有 visible tab
          if (windowClient.visibilityState === "visible") {
            windowClient.postMessage({ msg: "hasVisibleTab" });
            return true;
          }

          return false;
        });

        if (!hasVisibleTab) {
          clientsArr[0].postMessage({ msg: "noVisibleTab" });
          clientsArr[0].focus();
        }
      } else {
        self.clients
          .openWindow(e.notification.data.url) // 通过 data.url 打开新tab
          .then((windowClient) => {
            if (windowClient) {
              windowClient.postMessage({ msg: "noTab" });
              windowClient.focus();
            }
          });
      }
    })
  );
});