怎么实现HTML5清单离线缓存

  介绍

这篇文章主要为大家展示了怎么实现HTML5清单离线缓存,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“怎么实现HTML5清单离线缓存”这篇文章吧。

html有什么特点

1,简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。   2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证只         3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。         4,通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

<强>简介

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

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

<李>

离线浏览——用户可在离线时浏览您的完整网站

<李>

速度-缓存资源为本地资源,因此加载速度较快。

<李>

服务器负载更少——浏览器只会从发生了更改的服务器下载资源。

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

<强>引用清单文件

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

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

& lt; html 清单=?cache.manifest"比;   ,,…   & lt;/html>

& lt; html 清单=癶ttp://www.example.com/example.mf"比;   ,,…   & lt;/html>

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

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

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

<强>清单文件结构

简单的清单格式如下:

CACHE 清单   index . html   stylesheet.css   图片/logo.png/主要的脚本。js

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

您需要注意以下几点:

<李>

缓存清单字符串应在第一行,且必不可少。

<李>

网站的缓存数据量不得超过5 MB。不过,如果您要编写的是针对铬网上应用店的应用,可使用无限存储取消该限制。

<李>

如果清单文件或其中指定的资源无法下载,就无法进行整个缓存更新进程。在这种情况下,浏览器将继续使用原应用缓存。

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

CACHE 清单   # 2010-06-18:v2      #,Explicitly  cached  & # 39; master 条目# 39;。   缓存:/favicon.ico   index . html   stylesheet.css   图片/logo.png   脚本/main.js      #,Resources  that  require 从而user 用be 在线。   网络:   login。/myapi   http://api.twitter.com      #,static.html  will  be  served  if  main.py  is 无法访问   #,offline.jpg  will  be  served 拷贝place  of  all  images 图像拷贝/大/#,offline.html  will  be  served 拷贝place  of  all  other  .html 文件   回退:/main.py /static.html   图片/大/,/offline.jpg图像   * .html /离线。html

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

怎么实现HTML5清单离线缓存