feat: service-worker

WindRunnerMax · WindRunnerMax · commit a51ff74417a5 · 2024-04-15T22:44:53.000+08:00
diff --git a/README.md b/README.md
@@ -40,6 +40,15 @@
 <td><a href="https://juejin.cn/post/7265515986471600143">从零实现的Chrome扩展</a></td>
 </tr>
 
+<tr>
+<td><a href="https://juejin.cn/post/7357390581301739531">基于React的虚拟滚动方案</a></td>
+<td>
+<a href="./packages/virtual-list-fixed-scroll">packages/virtual-list-fixed-scroll</a><br>
+<a href="./packages/virtual-list-placeholder">packages/virtual-list-placeholder</a><br>
+<a href="./packages/virtual-list-virtualization">packages/virtual-list-virtualization</a><br>
+<a href="./packages/virtual-list-dynamic-scroll">packages/virtual-list-dynamic-scroll</a>
+</td>
+</tr>
 
 </tbody>
 </table>
diff --git a/packages/service-worker/index.html b/packages/service-worker/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Service Worker</title>
+    <style type="text/css">
+        .avatar{
+            width: 50px;
+            height: 50px;
+            border-radius: 50px;
+        }
+    </style>
+</head>
+<body>
+    <img class="avatar" src="./static/avatar.png">
+    <script type="text/javascript">
+        navigator.serviceWorker
+            .register("sw.js")
+            .then(() => {
+                console.info("注册成功");
+            })
+            .catch(() => {
+                console.error("注册失败");
+            });
+    </script>
+    <script src="./static/cache.js"></script>
+</body>
+</html>
diff --git a/packages/service-worker/package.json b/packages/service-worker/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "service-worker",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "anywhere -h localhost -p 7890",
+    "dev-python": "python3 -m http.server 9000 --bind 127.0.0.1"
+  },
+  "devDependencies": {
+    "anywhere": "1.6.0"
+  }
+}
diff --git a/packages/service-worker/static/avatar.png b/packages/service-worker/static/avatar.png
diff --git a/packages/service-worker/static/cache.js b/packages/service-worker/static/cache.js
@@ -0,0 +1 @@
+console.log("cache.js loaded");
diff --git a/packages/service-worker/sw.js b/packages/service-worker/sw.js
@@ -0,0 +1,55 @@
+const CACHE_NAME = "service-worker-demo";
+const urlsToCache = ["/", "/static/avatar.png", "/static/cache.js"];
+
+this.addEventListener("install", event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      console.log("[Service Worker]", urlsToCache);
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+this.addEventListener("activate", event => {
+  // 不在白名单的`CACHE_NAME`就清理
+  const cacheWhitelist = ["service-worker-demo"];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+  // 查看一下缓存
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => cache.keys().then(res => console.log(res)))
+  );
+});
+
+this.addEventListener("fetch", event => {
+  const url = new URL(event.request.url);
+  if (url.origin === location.origin && urlsToCache.indexOf(url.pathname) > -1) {
+    event.respondWith(
+      caches.match(event.request).then(resp => {
+        if (resp) {
+          console.log("fetch ", event.request.url, "有缓存，从缓存中取");
+          return resp;
+        } else {
+          console.log("fetch ", event.request.url, "没有缓存，网络获取");
+          return fetch(event.request);
+          // // 如果有需要的话我们不需要在事件响应时进行匹配 可以直接将所有发起过的请求缓存
+          // return fetch(event.request).then(response => {
+          //     return caches.open(CACHE_NAME).then(cache => {
+          //         cache.put(event.request, response.clone());
+          //         return response;
+          //     });
+          // });
+        }
+      })
+    );
+  }
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
