HTML5之离线应用缓存
来源:互联网 发布:apache tomcat默认密码 编辑:程序博客网 时间:2024/04/30 07:56
今天说说HTML5的新特性之一:离线应用缓存。
离线应用,就是在没有网络的情况下访问Web应用程序时,实际上是访问已下载的离线文件资源,并使得Web应用程序正常运行。
特性
开发者需要注意三个特性:
1. 离线资源缓存
在开发离线应用时,必须使用一种方案来说明哪些文件资源需要在离线状态下工作。当设备处于在线状态下,被指定缓存的资源文件便会缓存到本地。此后,如果用户在离线状态下再次访问该Web应用程序,浏览器就会自动加载本地资源,使得用户能够正常使用该Web应用程序。离线应用将使用manifest类型的文件作为需要配置缓存资源文件的配置文件。
2. ApplicationCache对象缓存状态
ApplicationCache对象记录着Web应用程序的缓存状态,开发者可以通过该缓存状态手动更新资源文件的缓存。
3. 在线状态检测
HTML5标准提供了onLine方法用于检测当前网络是否在线。
实例
下面说说具体如何实现缓存资源文件。
首先,将一个页面标为离线存储页面,需要给html标签绑定一个manifest属性指向离线配置文件:
<code class="hljs xml has-numbering"><span class="hljs-doctype"><!doctype html></span><span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">manifest</span>=<span class="hljs-value">"test.manifest"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/cache-manifest"</span>></span><span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-title">title</span>></span><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/a.css"</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/a.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/b.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"></<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li></ul>
test.manifest文件内容如下:
<code class="hljs avrasm has-numbering">CACHE MANIFEST<span class="hljs-preprocessor">#v0.1.0</span><span class="hljs-label">CACHE:</span>js/a<span class="hljs-preprocessor">.js</span>css/a<span class="hljs-preprocessor">.css</span><span class="hljs-label">NETWORK:</span>js/b<span class="hljs-preprocessor">.js</span><span class="hljs-label">FALLBACK:</span><span class="hljs-number">404.</span>html</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
其中第一行的CACHE MANIFEST是必须要的标识
v是版本号
CACHE是要缓存的文件
NETWORK是不需要缓存的文件
FALLBACK是如果找不到文件,替换出现的文件
第一次加载页面:
第二次加载后可以看到只有b.js一个文件更新了,而其他文件都是从缓存中读取的。
可以通过开发者工具查询离线缓存:
在更新了资源之后,新的资源需要等到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用window.applicationCache.swapCache()方法来使之生效,出现这种现象的原因的浏览器会先使用离线资源加载页面,然后再去检测mainfest是否有更新,所以需要下次打开页面才能生效。
- HTML5之离线应用缓存
- HTML5之离线应用缓存
- html5应用缓存(离线存储)
- Html5 离线应用缓存application Cache
- HTML5之应用缓存
- html5学习笔记之离线缓存
- HTML5之---Manifest 文件--离线缓存
- HTML5新特性之离线缓存技术
- HTML5新特性之离线缓存技术
- html5离线缓存
- HTML5 离线缓存
- html5离线缓存--manifest
- HTML5离线缓存Manifest
- html5的离线缓存
- html5 manifest 离线缓存
- HTML5 离线缓存
- HTML5实战与剖析之离线应用
- Win8.1应用开发之离线缓存
- mysql 连接异常A ResourcePool could not acquire a resource from its primary factory or source.
- PAT-12-24小时制(简单编程题)
- Caused by: java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11GraphicsEnvironment
- std::bad_alloc的处理
- 【译文】通过Go来处理每分钟达百万的数据请求
- HTML5之离线应用缓存
- iOS RSA 加密
- java多线程
- Tomcat 远程调试
- ionic如何检测网络连接
- HTTP 协议之压缩
- 全方位解析Telerik平台(一)
- 二十三种设计模式
- ios中Block内访问函数局部变量时变量的改变情况