在 Service Worker 当中会用到一些全局变量:
self: 表示 Service Worker 作用域, 也是全局变量
caches: 表示缓存
skipWaiting: 表示强制当前处在...处理动态缓存
网页抓取资源的过程中, 在 Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源的请求:
真实的项目当中, 可以根据资源的类型, 站点的特点, 可以专门设计复杂的策略...更新静态资源
缓存的资源随着版本的更新会过期, 所以会根据缓存的字符串名称(这里变量为 cacheStorageKey, 值用了 "minimal-pwa-1")清除旧缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除...比如在 HTML 当中更新版本到 2:
同时 sw.js 文件当中也要进行一次修改, 保证文件发生改变, 同时缓存的名称也变改变了:
然后重新打开一次页面, 这个时候渲染的页面依然是旧的, 不过可以从...之后关闭页面, 再次打开, 就可以见到网页上的显示版本变成了 2。