html5的离线web应用的浏览器和服务器交互的过程要是没有缓存怎么办_随笔

html5的离线web应用的浏览器和服务器交互的过程要是没有缓存就需要每次交互都要实时接口调用，增加网络开销。

一、离线存储的作用

1、用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要

2、用户访问本地的缓存文件，通常意味着更快的访问速度

3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力

二、实现离线存储

1、在html标签里通过manifest属性引用一个cache.manifest文件，该文件里声明了浏览器需缓存的所有资源文件，如下所示：

<!DOCTYPE html>

<head>

<title>离线缓存示例页面</title>

</head>

<body>

</body>

</html>

2、关于cache.manifest的定义

CACHE MANIFEST

# 注释：需要缓存的文件，无论在线与否，均从缓存里读取

chched.js

cached.css

# 注释：不缓存的文件，无论缓存中存在与否，均从新获取

NETWORK:

uncached.js

uncached.css

# 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面

FALLBACK:

index.html 404.html

在html里加入代码，禁用缓存就可以了

近期在发版验证时遇到一个问题，微信公众号登入后页面显示的是老的，强制刷新后，再退出重新登入，仍然显示的是老的页面；

经过一番查找得到了解决方案：

（1）公众号放的菜单地址后加 ?version=1.0.0 每次更新页面则更新菜单；

但是这样每次发版还得修改公众号的菜单，多一步很不方便；

于是和前端一块尝试寻找到另一中解决方案：

（2）前端在html的header中加入缓存策略

这样就彻底解决了缓存问题；

但是注意，往往遇到此问题时，已经缓存了没有加缓存策略的html文件，需要清除掉缓存，加载新的带缓存策略的html文件，将来才会实时更新；但是也不能让用户每个都清理缓存啊；

于是就要配合第一种解决方法，在菜单链接后面加参数，这样用户侧会重新load新版本的html（微信菜单设置发布后，有将近10分钟的延时），这样配合使用就完美解决了我们的问题；

期间多次尝试发现，微信的缓存策略和页面地址的后缀参数相关，使用相同的后缀，在不设置缓存策略下，就能回到对应的版本，很强大，也很鸡肋

欢迎分享，转载请注明来源：内存溢出

html5的离线web应用的浏览器和服务器交互的过程要是没有缓存怎么办