HTML5 离线缓存两个需要注意的地方

笔记

2016-04-10 00:00

这两天用 ClojureScript 弄了个 Todo List

为了能离线使用, 试着用了下 HTML5 加的 Application Cache, 效果当然是不错的

不过中间看文档不仔细导致白折腾了半天

第一个问题:

缓存只有在浏览器检测到所设置的 manifest 更新后才会更新

如果 manifest 文件没更新, 手动调用 window.applicationCache.update() 也是没用的

简单暴力的方法是在文件里用注释标记一个版本号或者时间之类的

CACHE MANIFEST
# Version: 1.0.1
script.js
style.css

第二个问题:

坑爹的 CDN 优化

在前几篇博文里, 说过使用了 Kloudsec 的 CDN

然而这货的 Page Optimizer 就算关掉后, 也会默认使用级别 3 的优化

于是 css、js 之类的静态文件就被加了后缀了, 导致无法被缓存

调整到级别 1, 虽然静态文件名不变了, 但是依然会插入统计用的 js

离线使用时喜闻乐见的导致页面加载出错, window.onload 就挂了

至于解决方法, 我没找到, 也懒得找客服了。现在博客所使用的是 CloudFlare

顺带一提在 Chrome 里可以用 chrome://appcache-internals/ 清空缓存