html5新特性-----离线存储

最新推荐文章于 2021-03-04 18:46:41 发布

原创最新推荐文章于 2021-03-04 18:46:41 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

h5新特性专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5中离线存储的应用场景和技术细节，包括如何使用manifest文件指定离线资源，浏览器如何处理manifest文件，以及需要注意的问题。

用到离线存储的原因：越来越多的APP使用H5开发，通过浏览器进行访问，浏览器访问就需要互联网请求，在手机断网的情况下，就无法使用APP，而且很多资源是不需要随时更改的，综合这些原因，h5提供了一个新特性–离线存储。
用法：在页面头部加入manifest

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

cache.manifest文件里面写

CACHE MANIFEST
#v0.11//版本号

CACHE:  //需要离线存储的资源列表，包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来

js/app.js
css/style.css

NETWORK:  //这下面的资源只有在线情况才能访问，不会被离线存储。但是在CACHE和NETWORK都有的资源还是会离线存储，CACHE优先级更高
resourse/logo.png

FALLBACK:  //如果访问第一个资源失败，就用FALLBACK下的资源替换。
/ /offline.html  //这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

浏览器解析manifest ：在线情况下，浏览器会识别manifest 属性，会请求manifest文件，如果是第一次访问，浏览器会根据manifest 文件存储资源，如果非第一次访问，浏览器会使用离线资源加载页面，然后对比manifest 文件是否改变，如果改变重新下载文件中资源。离线情况浏览器会直接使用离线存储的资源。
注意：①如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
②对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
③浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
④在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

文章参考：https://segmentfault.com/a/1190000000732617