随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些HybridApp以外,其他一部分Web App还是通过浏览器来访问的,通过浏览器访问就需要联网发送请求,这样就使得用户在离线的状态下无法使用App,同时Web App中一部分资源并不是经常改变,并不需要每次都向服务器发出请求,出于这些原因,HTML5提出的一个新的特性:离线存储。
HTML5引入了应用程序缓存(Application Cache),通过创建manifest文件可以轻松地创建Web应用的离线版本,使Web应用可以在没有网络的时候任然可以访问。manifest文件主要定义需要缓存的文件,支持manifest的浏览器将按照manifest文件的规则把文件保存在本地,这样在没有网络的时候就可以从本地读取缓存文件。
通过离线存储,我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中,这样即使在离线的情况下,用户也可以正常使用App。
首先来讲解下离线存储的使用方法,说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。
<!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html>
然后cache.manifest
文件的书写方式,就像下面这样:
CACHE MANIFEST #v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK: / /offline.html
离线存储的manifest一般由三个部分组成:
那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。
这个过程中有几个问题需要注意。
window.applicationCache.swapCache()
方法来使之生效,出现这种现象的原因是浏览器会先使用离线资源加载页面,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。说了这么多,不如自己动手来试试。这里需要说明的是,如果需要看到离线存储的效果,那么你需要把你的网页部署到服务器上,不管是本地还是生产环境服务器中,通过本地文件打开网页是无法体验到离线存储的。 我在我的电脑上跑了一个本地node服务器,通过localhost访问。我的manifest文件向下面这样:
CACHE MANIFEST #v0.11
CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js js/app.js
lib/ionic/css/ionic.css
css/style.css
views/index.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
NETWORK:
views/login.html
对于HTML5中离线存储对象window.applicationCache有几个事件需要我们关注下:
参考文章: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache http://diveintohtml5.info/offline.html
转载本站文章《html5离线缓存manifest详解》, 请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2016_0109_394.html
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。