HTML5 manifest离线缓存的示例代码


Posted in HTML / CSS onAugust 08, 2018

简介

离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。

使用缓存接口可为您的应用带来以下三个优势:

  1. 离线浏览 - 用户可在离线时浏览您的完整网站
  2. 速度 - 缓存资源为本地资源,因此加载速度较快。
  3. 服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。

应用缓存(又称 AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。

引用清单文件

要启用某个应用的应用缓存,请在文档的 html 标记中添加 manifest 属性:

manifest 属性可指向绝对网址或相对路径,但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名,但必须以正确的 MIME 类型提供(参见下文)。

<html manifest="/cache.manifest">
  ...
</html>

<html manifest="http://www.example.com/example.mf">
  ...
</html>

您应在要缓存的网络应用的每个页面上都添加 manifest 属性。如果网页不包含 manifest 属性,浏览器就不会缓存该网页(除非清单文件中明确列出了该属性)。

这就意味着用户浏览的每个包含 manifest 的网页都会隐式添加到应用缓存。因此,您无需在清单中列出每个网页。

清单文件必须以 text/cache-manifest MIME类型提供。文件后缀名可以自定义(建议为.manifest)所以我们需要现在服务端将.manifest后缀的文件类型声明为text/cache-manifest。
以apache为例,我们需要在httpd.conf中加上:AddType text/cache-manifest .manifest

清单文件结构

简单的清单格式如下:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

该示例将在指定此清单文件的网页上缓存四个文件。

您需要注意以下几点:

  1. CACHE MANIFEST 字符串应在第一行,且必不可少。
  2. 网站的缓存数据量不得超过 5 MB。不过,如果您要编写的是针对 Chrome 网上应用店的应用,可使用 unlimitedStorage 取消该限制。
  3. 如果清单文件或其中指定的资源无法下载,就无法进行整个缓存更新进程。在这种情况下,浏览器将继续使用原应用缓存。

我们再来看看更复杂的示例:

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

以“#”开头的行是注释行,但也可用于其他用途。例如更新缓存

应用缓存只在其清单文件发生更改时才会更新。例如,如果您修改了图片资源或更改了 JavaScript 函数,这些更改不会重新缓存。您必须修改清单文件本身才能让浏览器刷新缓存文件。使用生成的版本号、文件哈希值或时间戳创建注释行,可确保用户获得您的软件的最新版。
您还可以在出现新版本后,以编程方式更新缓存,如更新缓存部分中所述。

如果页面引入了缓存清单文件,那么清单文件必须包含当前页面需要的所有文件(css,js,image...),否则不会被加载,所以除去固定需要缓存的文件,建议在文件中的NETWORK一项加上星号*,表示其余所有文件

清单可包括以下三个不同部分:CACHE、NETWORK 和 FALLBACK。

CACHE:
这是条目的默认部分。系统会在首次下载此标头下列出的文件(或紧跟在 CACHE MANIFEST 后的文件)后显式缓存这些文件。

NETWORK:
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态,对这些资源的所有请求都会绕过缓存。可使用通配符。

FALLBACK:
此部分是可选的,用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源,第二个代表后备网页。两个 URI 必须相关,并且必须与清单文件同源。可使用通配符。
请注意:这些部分可按任意顺序排列,且每个部分均可在同一清单中重复出现。

以下清单定义了用户尝试离线访问网站的根时显示的“综合性”网页 (offline.html),也表明了其他所有资源(例如远程网站上的资源)均需要互联网连接。

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

请注意:系统会自动缓存引用清单文件的 HTML 文件。因此您无需将其添加到清单中,但我们建议您这样做。

请注意:HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此,通过 https 提供的网页可实现离线运行。

更新缓存

应用在离线后将保持缓存状态,除非发生以下某种情况:

  1. 用户清除了浏览器对您网站的数据存储。
  2. 清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
  3. 应用缓存通过编程方式进行更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5移动端自适应布局的实现
Apr 15 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 #HTML / CSS
详解WebSocket跨域问题解决
Aug 06 #HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 #HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 #HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP+javascript模拟Matrix画面
2006/10/09 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
保密工作目标责任书
2014/07/28 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server