service-worker

serviceworker

service-worker

• 视频：https://www.bilibili.com/video/BV1v34y1Z7QA/?spm_id_from=333.337.search-card.all.click&vd_source=677fb3b76ec1277e95a8ffb1282e30fa

  • 代码：https://gitee.com/wangluoshihuang/serviceWorker

• 

  • 因为 fetch 可以监听请求，所以才可以做代理服务器。配合 respondWith()方法，就可以劫持 http 发出的请求。

• 

  • cache 存的是 request（请求）和 response（响应）的键值对。
  • 如果 waitUntil 没执行完，那么 install 的函数也不会执行完。

• 

• 

  • 一个 caches 里可以包含多个 Cachestorage

• 

  • 参考代码：https://gitee.com/wangluoshihuang/serviceWorker/blob/master/sw-demo/public/example2/sw-cache.js
    • 缓存成功：
      • 
    • 查看已经缓存的资源：
      • 
      • 第 1 处是缓存的名字（cache storage 具的名字），第二处是已经缓存的资源
    • 上面只是演示了怎么去缓存资源，但是并没有去拦截页面的请求，那么我们怎么去劫持请求使用缓存的资源呢？
      • 
      • 我们可以在浏览器里看到如下情况：
        • 
        • #9 和 #10 是浏览器给 service Worker 取的版本号。因为 sw-fetch.js 里有和 sw-cache.js 里一样的 service worker，旧的 service worker 并没有退出，新的 service worker 并不会执行。当然我们可以点 skipWaiting 让新的 service worker 替代旧的。
          • service worker 的更新策略，查看后面的 ‘其他参考’ 里的“Service Worker 更新机制”
        • 如下图，就是从缓存里拿的资源：
          • 
        • 如下图，勾选箭头的那个地方，即使那么每次注册相同的 service worker，那么都会使用新的（一般用于调试）
          • 
      • 

• 

• 

• 

• 

• 

• 

• 特征：https://juejin.cn/book/6994678547826606095/section/6996932903829504037?utm_source=course_list

  • 已安装的渐进式 Web 应用程序在独立窗口中运行，而不是在浏览器 tab 页中运行
  • Service Worker 本质上是一种用 JavaScript 编写的脚本，其作为一个独立的线程，它可以使应用程序能够控制网络请求，缓存这些请求以提高性能，并提供对缓存内容的离线访问。
  • Service Worker 缓存是持久的，独立于浏览器缓存或网络状态。
  • 默认情况下 Service Worker 的作用范围不能超出其脚本所在的路径，如果上述脚本放在根目录下，那么代表项目根目录下的所有请求都可以代理。当然也可以在注册时指定对应的作用域
  • 同时出于安全考虑，Service worker 只能在 https 及 localhost 下被使用

• 其他参考：

  • 看这里的 https://harttle.land/archive.html 2017 年 4 月的笔记更为清楚
  • 掘进小册：https://juejin.cn/book/6994678547826606095/section/6996932903829504037?utm_source=course_list

看第 0- 14 、 30 分钟

其他讲 service worker 的文章，自己收录了：https://gitee.com/wangluoshihuang/static_article/tree/master/JS/Service%20Worker%20

注册 service worker 时，第二个参数是是什么意思：

• 例如：navigator.serviceWorker.register('./sw.js', { scope: './' })注册 service worker 时。中的第二个参数 { scope: './' } 是一个配置对象，用于指定 Service Worker 的作用范围（scope）。这个作用范围定义了 Service Worker 可以控制哪些页面或资源。
  • 默认行为：如果不提供 scope 参数，Service Worker 的作用范围将默认为注册它的目录及其子目录。例如，如果在 /example/ 目录下注册，那么它将控制 /example/ 下的所有页面和资源。
  • 自定义作用范围：通过设置 scope 参数，你可以限制 Service Worker 的控制范围。例如，{ scope: './' } 表示 Service Worker 将仅控制当前目录下的页面和资源，而不包括上级或其他并行目录的内容。
• 通讯时使用 MessageChannel 更方便：https://juejin.cn/post/7029715697173266469?searchId=20250402163130F10D6A44DF7CBB3C7F6E