Service Worker 简单学习

Service Worker 是PWA核心，是一种

• 事件驱动的具有生命周期的独立于浏览器的主线程
• 可以根据所在的目录来拦截所有网络请求
• 可以访问缓存和IndexDB
• 支持推送和缓存文件版本管理

特点：无法操作DOM、只能使用HTTPS和localhost

1. 前提Scope 限定其拦截请求范围

Service Worker 会根据其所在目录进行请求拦截，所以对于有离线访问需求的文件目录，可以在其中建立sw.js
（目前只在根目录下测试缓存成功。。。）

2. 背景demo

页面：

  <select onChange="onChange(this.value)">
    <option value="">--请选择--</option>
    <option value="/">首页</option>
    <option value="/login">登录</option>
    <option value="/register">注册</option>
    <option value="/data">数据</option>
  </select>
  <div id="data"></div>
  <script>
  function onChange(e) {
    if (e === "") return;
    fetch(
      "http://localhost:9988" + e, {
      method: 'GET',
    }).then(res => {
      return res.text();
    }).then(res => {
      document.getElementById('data').innerHTML = res
    })
  }
</script>

改变选则时请求数据并显式在div中

利用sw的缓存功能，可以将一些资源进行缓存，以便下次请求时使用

3. 加入sw

html引入一个app.js，用于注册sw

// 注册sw
if("serviceWorker" in navigator){
  navigator.serviceWorker.register("./sw.js").then(res=>{
    console.log("rg success! scope="+res.scope);
  });
}

sw.js

let cacheName = "weather-pwa-v1";
let appShellFiles = [
  "./index.html",
  "./app.js",
  "./weather.png",
  "./img/bg.jpg",
];

self.addEventListener("install", function (e) {
  e.waitUntil(
    caches.open(cacheName).then(function (cache) {
      // waitUntil 确保安装前执行完里面的代码
      console.log("[Service Worker] 缓存所有文件");
      return cache.addAll(appShellFiles);
    })
  );
});

self.addEventListener("fetch", function (e) {
  console.log("request.url", e.request.url);
  e.respondWith(
    caches.match(e.request).then(function (r) {
      console.log("[Service Worker] Fetch:" + e.request.url);
      return (
        r ||
        fetch(e.request).then(function (response) {
          return caches.open(cacheName).then((cache) => {
            console.log("[Service Worker] 缓存新文件:" + e.request.url);
            cache.put(e.request, response.clone());
            return response;
          });
        })
      );
    })
  );
});

此处将目标资源都缓存了，然后后面的请求也全部缓存起来，最终项目可以离线运行~