前端离线缓存（Application Cache）

什么是Application Cache

• HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用
• Application Cache带来的三个优势是：
  ① 离线浏览
  ② 提升页面载入速度
  ③ 降低服务器压力
  而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响
• 缺点:

1. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况）
2. 进入离线存储的页面，如果不更新版本，是会将其当成静态页面不请求。
3. 无法进行灰度发布等策略。
   PS：灰度发布，一部分使用旧版，一部分人用新版。
4. 无法增量更新。

实现

• 需要在服务端维护一个manifest清单【注释:manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置，不同的服务器不一样】

CACHE MANIFEST
#v1.0.1
//版本号
CACHE:
../assets/images/s.gif
../assets/images/grayarrow.gif
../assets/images/y18.gif
../assets/css/news.css
./index.html
//需要缓存的文件路径
NETWORK:
*
//不需要缓存的文件路径

FALLBACK:
//访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html

• 还需要在html标签上加入属性

• 成功缓存以后，可以离线访问，在线访问时可打开控制台看到类似缓存信息

  
  
  

  image.png