前沿
Hello 大家好! 这是我参与新手入门的第3篇文章
浏览器缓存
类型
机制
前端资源缓存演进
1. 利用webview自身的http缓存机制。这里往往需要服务器运维同事配合,对于前端来讲不够灵活且缓存粒度太粗,
而且在http协议在不同版本下缓存机制有一定的差异(例如1.0版本中If-Modified-Since、Last-Modified、expires,
1.1版本中对缓存进行了优化,添加If-None-Match、Etag、cache-control等;
2. 离线包策略,其大致原理是通过将静态资源打包至离线管理平台(自行开发),在app启动时从离线管理平台拉取资源包并存放于本地,
后续终端将会拦截url请求并基于约定规则将请求代理到本地文件系统,进而加快静态资源的访问以及为cdn减压,
该方案的缺陷在于需要离线资源管理平台和终端的配合,牵扯资源过多,但其优点是不存在兼容性问题;
3. h5离线缓存manifest,其实质就是一个缓存清单文件(xx.manifest),然后在html标签设置manifest属性为xx.manifest,
该缓存方案也存在“二次更新”的问题,该方案需要注意的问题是xx.manifest文件自身不要被webview缓存,
且manifest文件cache部分不能使用通配符,必须手动指定,不过好在可以通过构建工具来解决,主流浏览器对该方案支持度也不错。
与service worker相对,其业务JS代码无法感知缓存更新的时机,所以service worker方案更具有想象空间;
4. service worker 通过一个独立JS线程来实现资源的可编程式缓存;
其他方案
1. localStorage
2. indexDB + preload
3. jszip + indexDB
4. ...
service worker 简介 MDN
Service workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。
这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用采取来适当的动作、更新来自服务器的的资源。
它还提供入口以推送通知和访问后台同步 API。
service worker Scope
srvice workder生效的领域, 比如如下的demo, scope为 folder,实际为
http://[ip]:[port]/folder/。
http:///[ip]:[port]/index.html , 不匹配sw scope,故sw不会生效。
http:///[ip]:[port]/folder/index.html, 匹配sw scope,sw生效。
http:///[ip]:[port]/folder2/index.html,不匹配sw scope,故sw不会生效。
* 默认情况,scope是service worker 文件的上级目录。
* 缓存的文件,不主动删除的话,即便更换sw,好像依然在缓存中。
service worker 生命周期
workbox-webpack-plugin
workbox-build: 基础版
https://developers.google.com/web/tools/workbox/modules/workbox-build
The workbox-build module integrates into a node-based build process and can generate an entire service worker, or just generate a list of assets to precache that could be used within an existing service worker.
大多数开发人员将使用的两种模式是 generateSW 和 injectManifes
workbox-cli: 命令版
https://developers.google.com/web/tools/workbox/modules/workbox-cli
Workbox 命令行界面(包含在 Workbox-cli 包中)由一个名为 Workbox 的 Node.js 程序组成,该程序可以从 unix 兼容的命令行环境的 Windows macOS 中运行。在引擎盖之下,Workbox-cli 包装了 Workbox-build 模块,并提供了一种简单的方法,可以将 Workbox 集成到命令行构建过程中,并具有灵活的配置。
workbox-webpack-plugin: webpack插件定制版
https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
Workbox provides two webpack plugins: one that generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file.
这些插件被实现为 workbox-webpack-plugin 模块中的两个类,名为 GenerateSW 和 InjectManifes
后语
新手上路,大家有问题多多指教!