update

index.html

@@ -13,11 +13,14 @@
   <script>
     // serviceWorker
     if ("serviceWorker" in navigator) {
-      navigator.serviceWorker
-        .register("serviceWorker.js")
-        .then(res => console.log("service worker registered"))
-        .catch(err => console.log("service worker not registered", err));
+      window.addEventListener("load", function () {
+        navigator.serviceWorker
+          .register("./serviceWorker.js")
+          .then(res => console.log("service worker registered"))
+          .catch(err => console.log("service worker not registered", err));
+      })
     }
+
   </script>
 
 </head>
@@ -29,4 +32,4 @@
 
 </body>
 
-</html>
+</html>

serviceWorker.js

@@ -1,41 +1,70 @@
-const cacheName = "watermark"; // cache名, 在控制台Application的CaChe下可以看到
+// cache名, 在控制台Application的CaChe下可以看到
+const cacheName = "watermark";
+// cache文件
+const cacheFiles = ["/", "/index.html", "/manifest.json"];
 
+/**
+ * 安装 Service Worker
+ * install事件是 Service Worker 执行的第一个事件,同一个 Service Worker 只会调用一次,
+ * 即使 Service Worker 脚本文件只有一个字节不同,浏览器也将视为一个新的 Service Worker。
+ */
 // eslint-disable-next-line no-restricted-globals
-self.addEventListener("install", e => {
+self.addEventListener("install", (e) => {
+  // eslint-disable-next-line no-restricted-globals
+  self.skipWaiting();
   e.waitUntil(
-    caches.open(cacheName).then(cache => {
-      return cache.addAll(["/", "/index.html", "/manifest.json"]);
-    }),
+    caches.open(cacheName).then((cache) => {
+      return cache.addAll(cacheFiles);
+    })
   );
 });
 
+/**
+ * 激活 Service Worker
+ * Service Worker 安装成功之后,会触发activate事件
+ * 在这个阶段我们一般做一些清理旧缓存相关的工作
+ */
 // eslint-disable-next-line no-restricted-globals
-self.addEventListener("fetch", event => {
-  event.respondWith(
+self.addEventListener("activate", (e) => {
+  // e.waitUntil(caches.delete(cacheName));
+  e.waitUntil(
+    caches
+      .keys()
+      .then((keys) => {
+        return Promise.all(
+          // eslint-disable-next-line array-callback-return
+          keys.map((key) => {
+            // 清理缓存
+            if (cacheName !== key) {
+              return caches.delete(key);
+            }
+          })
+        );
+      })
+      .then(() => {
+        console.log("cache deleted");
+      })
+  );
+});
+
+// service worker发生更新后,刷新页面
+// eslint-disable-next-line no-restricted-globals
+self.addEventListener('controllerchange', () => {
+  window.location.reload();
+})
+
+// eslint-disable-next-line no-restricted-globals
+self.addEventListener("fetch", (e) => {
+  e.respondWith(
     caches
       .open(cacheName)
-      .then(cache => cache.match(event.request, { ignoreSearch: true }))
-      .then(response => {
-        return response || fetch(event.request);
-      }),
+      .then((cache) =>
+        cache.match(e.request, {
+          ignoreSearch: true,
+        })
+      )
+      .then((response) => {
+        return response || fetch(e.request);
+      })
   );
-});
-
-// eslint-disable-next-line no-restricted-globals
-self.addEventListener('activate', e => {
-  e.waitUntil(
-    caches.delete(cacheName));
-  // e.waitUntil(
-  //   Promise.all(
-  //     caches.keys().then(cacheNames => {
-  //       return cacheNames.map(name => {
-  //         if (name !== cacheStorageKey) {
-  //           return caches.delete(name)
-  //         }
-  //       })
-  //     })
-  //   ).then(() => {
-  //     return self.clients.claim()
-  //   })
-  // )
-})
+});