JS,CSS 版本缓存控制, 离线WEB应用(PWA很多不兼容, 遂用Application Cache实现离线缓存)
js,css等静态资源缓存可以在代码里面控制,但是鉴于目前一系列生态来说,早已不是原生js, jQuery直接使用的时候了, 所以本地缓存并不推荐, 因为改动比较多。
然后就是HTTP缓存了, 我们用Expires和Cache-Control, 服务器那边直接控制到max, 就是永久缓存到本地。然后更新的话依靠hash值, 这时候框架基本都已经自动生成好了。
所以后台修改下就可以,附上nginx代码
这时候我们可以看到不管我们怎么刷新, 都不会请求服务器资源,直接读取本地资源。但是我们网络一关闭就无法访问了。
这时候用离线缓存,这里用应用缓存。
应用缓存已经标准废弃了, 新的方案https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers
但是不影响我们使用它, 因为主流浏览器都支持。
需要先在html根节点选择appcache清单,假设取这个名字, 我文件就是这样叫的~~
html manifest="cache.appcache"
然后在js选择更新
// CACHE MANIFEST
window.applicationCache.addEventListener('updateready', function () {
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
window.location.reload();
}
})
然后服务端填写cache.appcache
vi cache.appcache
CACHE MANIFEST
#v: 1.0.0
CACHE:
index.html
NETWORK:
*
然后上传代码, 前端部分完成了。
(把appcache也上传)
这时候去nginx编辑mime.types, 因为manifest的Content-Type必须是text/cache-manifest
(不用nginx的绕过),添加一条
text/cache-manifest appcache
重启 nginx -s stop & nginx
刷新看一下。
关闭网络也可以打开,跟app一样。
以后更新版本,也需要同步下版本,这样就可以触发上面的js代码了。
Tips:
1.这样就只在有需要的时候才去加载,而不是每一次点击的时候都加载,就跟app只有在更新版本的时候才去下载app包一样
2.做的更鬼畜的就是也控制api,简单点就控制速度,但是这基本没啥用,就跟一般设置缓存只设置几小时几天, 丢,压根没用...., 之前我搞过一个xyios.js可以做到这点,成本小, 好的做法应该是,比如商品属性修改了,这时候才更新api接口。
3.加载DOM时间其实也不能小视,我网站100ms就加载完成了, 但是700ms才dom渲染完成,开始请求api~~
--END--