静态资源本地存储方案 - workbox

944 阅读3分钟

前沿

Hello 大家好! 这是我参与新手入门的第3篇文章

浏览器缓存

类型

image.png

机制

image.png

前端资源缓存演进

 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 生命周期

image.png

image.png

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 包中)由一个名为 WorkboxNode.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

后语

新手上路,大家有问题多多指教!