「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。
service worker 是个啥
service worker 是web应用程序与 浏览器和网络之间的代理服务器.因为在浏览器运行,对于缓存的控制,拦截请求完成相应动作更加的简单,甚至提供了推送通知入口和后台同步api
service worker由来
- js 是单线程的语言
- 异步编程通过Event Loop(事件循环),单终究还是单线程模式
- web works 是真正多线程(浏览器提供)
- Service Worker 是web Worker 的一个子类
特性
- 不能直接操作dom
- 子线程完全受主线程控制(没有改变单项成的本质)
- 有自己的独立自己的生命周期,跟页面没有直接关联关系,
- 事件驱动,由元和路径组成
- 有离线存储能力 CatchStorage, IndexDB 不能使用localStorage
- 使用大量的Promise
- 只能在https下使用,localhost 调试
生命周期
install 注册安装,要是缓存失败就失败,页面进入重新创建,成功代表缓存安装也完成,不会重新创建
Activeted 完成后触发没进入激活状态
fetch 监听客户端请求,配合respondWidth()方法,可以劫持Http响应
使用cache 缓存资源
install 事件会在注册完成之后触发。install 事件一般是被用来填充你的浏览器的离线缓存能力。 为了达成这个目的，我们使用了 Service Worker的新的标志性的存储API cache service worker 上的全局对象，它使我们可以存储网络响应发来的资源，并且根据它们的请求 来生成key。在安装事件的回调里我们需要完成一些缓存的工作，所以需要 waitUntil() 方法来暂时挂起代 码，waitUntil 方法接受一个promise。
Cache 接口为缓存的 Request / Response 对象对提供存储机制 一个域可以有多个命名 Cache 对象。 你需要在你的脚本（例如，在 ServiceWorker 中)中处理缓存更新的方式。除非明确地更新缓存，否则缓存将不 会被更新；除非删除，否则缓存数据不会过期。(也不能啥都寸,太多了,浏览器会干掉资源的)
CacheStorage 接口表示 Cache 对象存储。 使用通过全局caches 属性来访问CacheStorage，可以在window、Service Worker中访问。 使用CacheStorage.open(cacheName)打开一个Cache对象，再使用Cache对象的方法去处理缓存。
来个简单例子 举个数据 把网页中皮卡丘换变成冰墩墩 码云地址
