App内H5应用缓存设计方案

安逸和尚easymonk
1,013 阅读3分钟

App内H5应用缓存设计方案

我们的目标是:

  • 可以随时更新
  • 可以随时使用缓存
  • 只需要打开一次;若是没有更新，始终走缓存

需要注意的地方，一旦用上SW，需要注意缓存的设置，一不小心就会致使其无法更新到最新的版本; 需要注意:

  • service-worker.js 文件名不不能换
  • 缓存的名字一律使用项目名字，不得每次都换名字;

这样保证每次都是用的同一个server-worker文件，使用的缓存目录也是同一个，所以这是保证程序能 够版本一致性的基本条件，对后期的更新维护更加容易;出错率减小。

ServiceWorkers

sw工作流程⻅ SW

如何使用应用的缓存?

现在应用的环境;在安卓和ios两端的内置webview中， serviceWorker

只在安卓中生效;ios中的 serviceWorkers 不生效，但是 applicationCache 在ios上是完美适用，然而这个在安卓中有瑕疵;

所以决定同时使用两种方案，由于serviceWorkers 可以拦截请求，所以对于applicationCache是优先起 作用，所以两者可以相互使用。

针对现有开发工具的改造;设置项目是要支持的模式SW或者hdc，默认是hdc模式;

hdc 1 模式是原来用的模式，便于快速更新缓存，在hdc@0.5.8之后支持使用indexdDb去缓存资源;节省带宽;

缓存加载的时机加载时机;

  1. 设计为每个h5均为加载缓存的入口，一旦h5加载完毕，会延迟2秒钟去加载检测是否更新缓存的 js，会使用iframe的模式去加载，缓存新的应用或者更新老的应用;

  2. 上做加载控制(只是在第一次加载时使用)，首次打开使用隐藏的webview加载，这样;保证了用 户第一次进入h5的时候不会现加载;

在任意h5⻚面，做一次是否缓存的判断;只要用户打开一次h5都会主动去检测是否有相应缓存的没有的 话，就自动加载上;缓存完毕后关闭即可;(生成缓存list的自动化程序已经在本地h5项目管理程序中 加入完成)

1.png

缓存应用方案之间转化

SW/applicationCache 与HDC模式转换测试:

由于SW注销安卓会使用application去加载，所以设置manifest.appcache 需要缓存的为空，manifest改动后会自动缓存新的html文件的后会使用。

HDC 转sw;做了保留HDC的配置js;

安卓小米，ios

  • SW 转hdc 测试(需要上线两次;确定把老的资源给删掉)

    • 打包后第一次上线;ios可以收到更新;安卓没有收到更新(原因是serviceWorker文件还存 在;(上线默认保存上个版本内容))

    • 安卓需要刷新两次才能更新过来;

  • hdc 转SW。

    • 上线一次 安卓刷新一次即可更新
    • ios需要退出再进，或者刷新

之后的操作正常;

所以建议，在使用缓存方案后，减少切换的次数;

备注:
  1. hdc模式是使用html-disable-cache 工具，来处理html缓存的工作，处理后会在html注入hdc主程序和生成静态文件的配置;hdc@0.5.8+的新版本 是使用indexdDb去储存静态文件的;hdc首先会去检测是否有缓存，有缓存会优先加载缓存，节约服务器带宽，没有的话会去服务器加载静态文件的 配置文件，获取到要加载的静态文件，去xhr获取静态资源，写入indexdDb，并且写入到html中使之生效;顺序与原html的静态文件的顺序一致;
avatar
文章
阅读
粉丝