H5缓存-Manifes
来源:互联网 发布:函数筛选出不重复数据 编辑:程序博客网 时间:2024/05/25 08:12
在app中更新h5页面一直有缓存问题。默认什么都不做的情况下,app有一定的空间缓存页面。一开始更新之后会马上加载,等到app缓存空间上来之后更新就无法下载了。安卓能够清理缓存空间,ios就只能卸载重装(are u kidding me?)。这是最坏的情况,你可以更换下地址。
no-cache
注意到这一点之后,页面加入no-cache
<meta http-equiv="Cache-Control" content="no-cache">
告诉浏览器不要缓存页面。实际是页面没有发生改变的时候请求是304,如果页面改变了才是200,所以说加了no-cache不是说每次都全新下载,而是更新了就会重新下载。但这个时候不同的手机表现还是不一样的。4s与6sp就不同。访问同一个页面,修改了js。4s更新了,6sp还是老样子。咋整呢,因为服务端还有缓存。先设置nginx缓存:
location / { root html; expires -1; index index.html index.htm; }
并需要重启下nginx:
nginx -s reload
这个时候6sp也更新了。但老是重启nginx不是办法啊,可能造成一些请求丢失。而且这种情况下,离线是完全不能用了。比如断网了去发消息,原本设置的一张红色叹号的图片和人物的头像都显示不出来。当然可以转成base64的字符串解决这个问题。base64就是很长,放在哪儿都占空间。怎么解决,manifest
manifest
介绍可以先看w3shool的:http://www.w3school.com.cn/html5/html_5_app_cache.asp ,这里就说下使用的情况。
1.设置html
<html manifest="index.appcache">
2.设置缓存目录
CACHE MANIFEST#v1.0.0.0#需要缓存的文件js/zepto.js#不需要缓存的页面NETWORK:*#无法访问页面FALLBACK404.html
3.设置nginx mime
text/cache-manifest appcache;
mime types文件都在conf目录下。启动nginx之后。这个时候页面会出现加载情况:
这个图说明2个事情,一个是流程上会先下载index.appcache,然后会陆续触发checking event,download event,progress event 和 updateReady event.二个是默认缓存了当前页面。而且居然是带个参数也缓存。看样子只要地址不一样的当前页都给缓存了(上面的缓存目录我只写了一个zepto)。再刷新页面:
index.appcache没有更新就不会触发检查。
加载缓存的文件状态是200,size一栏是from cache。从浏览器加载的是304,时间上一个是几毫秒,一个是十几毫秒。
更新已缓存的文件
最明显的就是首页,默认缓存下来。这个时候你改变首页内容而不修改index.appache是完全没有作用的。比如你删掉一个js的引用,客户端还是下载了这个js。这个时候你需要修改这个缓存文件:
#不需要缓存的页面NETWORK: mobile/index.html*
注意到虽然index.appache和index位于同一级,但不能写index.html,得写相当于网站的路径,其他资源也是一样。这个时候触发更新了,但页面还是加载的缓存资源,所以还需要做一个处理:
window.applicationCache.addEventListener("updateready", function(){ location.reload() });
这样才会加载最新的页面。如果首页再发生修改,可以随意(加个空格,加空行)修改缓存文件,就能触发更新。所以剩下的问题就是记得在更新资源之后记得更新缓存文件。建议就是不变的资源(框架样式,框架js,图片)缓存下来,经常要修改的js就让浏览器缓存吧。现在这样就避免了reload nginx。这个效果要比加no-cache的方法好。
- H5缓存-Manifes
- H5缓存-Manifes
- H5缓存-Manifes
- h5 缓存
- H5缓存
- h5缓存
- H5离线缓存总结
- [H5]浏览器缓存机制
- H5页面缓存详解
- H5离线缓存
- 浅谈H5离线缓存
- H5离线缓存
- H5 缓存机制浅析
- H5的缓存问题
- H5笔记3-资源缓存
- h5利用缓存优化性能
- H5离线缓存机制-manifest
- H5 Manifest实现缓存刷新
- 在做投屏出现的一个坑
- codevs 1069 关押罪犯
- Android性能优化整理
- mongodb索引占用内存大小优化
- 判断email 输入是否合法
- H5缓存-Manifes
- 数据库MySql类库系列(一)-DBOperator
- 漫谈SOA(面向服务架构)
- FlexboxLayout
- VMware 安装mac方法整理
- Unity3D —— 爆炸交互(震屏效果)
- iOS超全开源框架、项目和学习资料汇总--数据库、缓存处理、图像浏览、摄像照相视频音频篇
- 黑马6-10月JAVAEE+Hadoop大数据第10期
- 简单工厂模式