083_html5应用程序缓存

1. 使用html5, 通过创建cache manifest文件, 可以轻松地创建web应用的离线版本。

2. 什么是应用程序缓存(Application Cache)?

2.1. html5引入了应用程序缓存, 这意味着web应用可进行缓存, 并可在没有因特网连接时进行访问。

2.2. 应用程序缓存为应用带来三个优势:

2.2.1. 离线浏览: 用户可在应用离线时使用它们。

2.2.2. 速度: 已缓存资源加载得更快。

2.2.3. 减少服务器负载: 浏览器将只从服务器下载更新过或更改过的资源。

3. 浏览器支持

3.1. 所有主流浏览器均支持应用程序缓存, 除了Internet Explorer。

4. Cache Manifest基础

4.1. 如需启用应用程序缓存, 请在文档的<html>标签中包含manifest属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

4.2. 每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性, 则页面不会被缓存(除非在manifest文件中直接指定了该页面)。

4.3. manifest文件的建议的文件扩展名是: ".appcache"。

4.4. 请注意, manifest文件需要配置正确的MIME-type, 即"text/cache-manifest"。必须在web服务器上进行配置。

4.5. 在Tomcat的web.xml里已经自动配置了:

5. Manifest文件

5.1. manifest文件是简单的文本文件, 它告知浏览器被缓存的内容(以及不缓存的内容)。

5.2. manifest文件可分为三个部分:

5.2.1. CACHE MANIFEST: 在此标题下列出的文件将在首次下载后进行缓存。

5.2.2. NETWORK: 在此标题下列出的文件需要与服务器的连接, 且不会被缓存。

5.2.3. FALLBACK: 在此标题下列出的文件规定当页面无法访问时的回退页面(比如: 404页面)。

5.3. CACHE MANIFEST

5.3.1. 第一行, CACHE MANIFEST, 是必需的:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

5.3.2. 上面的manifest文件列出了三个资源: 一个CSS文件, 一个GIF图像, 以及一个JavaScript文件。当manifest文件加载后, 浏览器会从网站的根目录下载这三个文件。然后, 无论用户何时与因特网断开连接, 这些资源依然是可用的。

5.4. NETWORK

5.4.1. 下面的NETWORK小节规定文件"login.jsp"永远不会被缓存, 且离线时是不可用的:

NETWORK:
login.jsp

5.4.2. 可以使用星号来指示所有其他资源、文件都需要因特网连接:

NETWORK:
*

5.5. FALLBACK

5.5.1. 下面的FALLBACK小节规定如果无法建立因特网连接, 则用"404.html"替代myhtml/目录中的所有文件:

FALLBACK:
/myhtml/ 404.html

5.5.2. 第一个URI是资源, 第二个是替补。

6. 更新缓存

6.1. 一旦应用被缓存, 它就会保持缓存直到发生下列情况:

6.1.1. 用户清空浏览器缓存。

6.1.2. manifest文件被修改。

6.1.3. 由程序来更新应用缓存。

6.2. 实例 - 完整的Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.jsNETWORK:
login.jspFALLBACK:
/myhtml/ 404.html

6.3. 重要的提示: 以"#"开头的是注释行, 但也可满足其他用途。应用的缓存会在其manifest文件更改时被更新。如果您编辑了一幅图片, 或者修改了一个JavaScript函数, 这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

7. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5MB)。

8. 例子

8.1. 编写manifest.html

<!DOCTYPE html>
<html manifest="demo.appcache"><head><meta charset="utf-8" /><title>应用程序缓存</title></head><body><script type="text/javascript" src="demo.js"></script><p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p><p><img src="w3school_banner.gif" /></p><p>请打开<a href="manifest.html" target="_blank">这个页面</a>, 然后脱机浏览, 重新加载页面。页面中的脚本和图像依然可用。</p></body>
</html>

8.2. demo.js

function getDateTime() {var d = new Date();document.getElementById('timePara').innerHTML=d;
}

8.3. demo.appcache

CACHE MANIFEST
/demo.js
/w3school_banner.gif

8.4. 新建一个名为ApplicationCache的动态Web工程

8.5. 启动服务器, 访问manifest.html

8.6. 关闭服务器, 访问manifest.html

083_html5应用程序缓存相关推荐

HTML 5 应用程序缓存
2019独角兽企业重金招聘Python工程师标准>>> 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存( ...
HTML5 应用程序缓存
2019独角兽企业重金招聘Python工程师标准>>> 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存( ...
神奇的HTML5离线存储（应用程序缓存）
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
网站性能优化之应用程序缓存-初篇
一. 摘要首先声明这篇服务器缓存篇是我平时工作中的一些经验心得,对没有用过,或者不知道如何使用服务器缓存的朋友们提供一个简单的认识与实现思路,本文只是抛砖引玉,还请各位多多提出宝贵意见,希望能够在 ...
同时存多个变量缓存微信小程序_微信小程序缓存（本地缓存、异步缓存、同步缓存）详解...
微信小程序缓存关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...
本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
应用程序缓存_应用程序模块和实体缓存
应用程序缓存任何具有ADF业务组件基础知识的ADF开发人员都应该熟悉下图: 它代表运行时ADF业务组件的核心构建块. 有一个包含视图对象实例的根应用程序模块实例. 视图对象实例可能由存储在实体集合或 ...
w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)
一.作用离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景正如 manifest 英译的名字:离线应用程 ...
HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

083_html5应用程序缓存

083_html5应用程序缓存相关推荐

最新文章

热门文章