init

public/js/app.js

@@ -0,0 +1,6 @@
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker
+    .register("/sw.js")
+    .then(() => console.log("service worker is registed"))
+    .catch((e) => console.log(e));
+} else console.log("there is no")

public/sw.js

@@ -0,0 +1,44 @@
+let CACHE_STATIC_NAME = "static-v1";
+let CACHE_DYNAMIC_NAME = "dynamic-v2";
+
+self.addEventListener("install", function (event) {
+  console.log("[SW install]", event);
+  self.skipWaiting();
+  event.waitUntil(
+    caches.open(CACHE_STATIC_NAME).then((cache) => {
+      console.log("[SW precache]");
+      return cache.addAll(["/", "/index.html", "/js/app.js"]);
+    }),
+  );
+});
+
+self.addEventListener("activate", function (event) {
+  console.log("[SW activate]", event);
+  event.waitUntil(caches.keys().then((keys) => {
+    console.log("removing the old cache")
+    return Promise.all(keys.map(key => {
+      if (key !== CACHE_STATIC_NAME) {
+        return caches.delete(key)
+      }
+    }))
+  }))
+  return self.clients.claim();
+});
+
+self.addEventListener("fetch", function (event) {
+  event.respondWith(
+    caches.match(event.request).then((res) => {
+      console.log("res", res);
+      if (res) {
+        return res;
+      } else {
+        return fetch(event.request).then((res) => {
+          // caches.open(CACHE_DYNAMIC_NAME).then((cache) => {
+          //   cache.put(event.request.url, res.clone());
+          // });
+          return res;
+        });
+      }
+    }),
+  );
+});