小猿圈web前端开发之HTML5 manifest离线缓存的示例

在学习前端的小伙伴都在迷茫，遇到问题该怎么办？怎么去处理，找不到老师怎么办？这些也是小猿圈web前端老师担心的，以后每天小猿圈都会为大家分享一些关于学习前端中的一些小问题，今天分享的是HTML5 manifest离线缓存的示例。

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

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

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

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

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

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

引用清单文件

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

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

<htmlmanifest="/cache.manifest">

...

</html>

或

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

...

</html>

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

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

清单文件必须以text/cache-manifestMIME类型提供。文件后缀名可以自定义(建议为.manifest)所以我们需要现在服务端将.manifest后缀的文件类型声明为text/cache-manifest。

以apache为例，我们需要在httpd.conf中加上：AddTypetext/cache-manifest.manifest

清单文件结构

简单的清单格式如下：

CACHEMANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

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

您需要注意以下几点：

CACHEMANIFEST字符串应在第一行，且必不可少。

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

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

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

CACHEMANIFEST

#2010-06-18:v2

#Explicitlycached'masterentries'.

CACHE:

/favicon.ico

index.html

stylesheet.css

images/logo.png

scripts/main.js

#Resourcesthatrequiretheusertobeonline.

NETWORK:

/myapi

http://api.twitter.com

#static.htmlwillbeservedifmain.pyisinaccessible

#offline.jpgwillbeservedinplaceofallimagesinimages/large/

#offline.htmlwillbeservedinplaceofallother.htmlfiles

FALLBACK:

/main.py/static.html

images/large/images/offline.jpg

*.html/offline.html

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

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

您还可以在出现新版本后，以编程方式更新缓存，如更新缓存部分中所述。

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

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

CACHE：

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

NETWORK：

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

FALLBACK：

此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个URI代表资源，第二个代表后备网页。两个URI必须相关，并且必须与清单文件同源。可使用通配符。

请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

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

CACHEMANIFEST

#2010-06-18:v3

#Explicitlycachedentries

index.html

css/style.css

#offline.htmlwillbedisplayediftheuserisoffline

FALLBACK:

//offline.html

#Allotherresources(e.g.sites)requiretheusertobeonline.

NETWORK:

#Additionalresourcestocache

CACHE:

images/logo1.png

images/logo2.png

images/logo3.png

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

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

更新缓存

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

用户清除了浏览器对您网站的数据存储。

清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

应用缓存通过编程方式进行更新。

今天的知识点就分享到这里了，有需要的朋友欢迎点赞评论转发，想了解更对web前端内容的朋友可以关注小猿圈的每天的动态，会不定时更新很多更好的内容奉献给大家，希望对你的学习有所帮助。

、XHTML与HTML的区别

文档结构

XHTML DOCTYPE 是强制性的

<html>中的 XML namespace 属性是强制性的

<html>、<head>、<title>以及 <body>也是强制性的

元素语法

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写

XHTML 属性值必须用引号包围

XHTML 属性最小化也是禁止的

二、HTML5中一些新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

   /*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

三、HTML5web存储

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以键/值对存在, web网页的数据只允许该网页访问使用。

浏览器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

四、HTML5 应用程序缓存

HTML5 -应用程序缓存=>使用文章链接跳转点这里

五、HTML5 服务器发送事件（Server-Sent Events）

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。

<h1>获取服务端更新数据</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

详情和代码示例：.

七、HTTP状态消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客户端错误

5xx: 服务器错误

详情

八、HTTP 方法：GET 对比 POST

两种最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据。

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.php?name1=value1&name2=value2

有关 GET 请求的其他一些注释：

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

有关 POST 请求的其他一些注释：

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

其他 HTTP 请求方法

下面的表格列出了其他一些 HTTP 请求方法：

原文链接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

、XHTML与HTML的区别

文档结构

XHTML DOCTYPE 是强制性的

<html>中的 XML namespace 属性是强制性的

<html>、<head>、<title>以及 <body>也是强制性的

元素语法

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写

XHTML 属性值必须用引号包围

XHTML 属性最小化也是禁止的

二、HTML5中一些新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

三、HTML5web存储

使用HTML5可以在本地存储用户的浏览数据。

数据以键/值对存在, web网页的数据只允许该网页访问使用。

浏览器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。

注意: Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

四、HTML5 应用程序缓存

HTML5 -应用程序缓存=>使用文章链接跳转点这里

五、HTML5 服务器发送事件（Server-Sent Events）

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。

六、HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

详情和代码示例：

七、HTTP状态消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客户端错误

5xx: 服务器错误

详情

八、HTTP 方法：GET 对比 POST

两种最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本传输协议（HTTP）的设计目的是保证客户端与服务器之间的通信。

HTTP 的工作方式是客户端与服务器之间的请求-应答协议。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

GET - 从指定的资源请求数据。

POST - 向指定的资源提交要被处理的数据。

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

有关 GET 请求的其他一些注释：

GET 请求可被缓存

GET 请求保留在浏览器历史记录中

GET 请求可被收藏为书签

GET 请求不应在处理敏感数据时使用

GET 请求有长度限制

GET 请求只应当用于取回数据

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

有关 POST 请求的其他一些注释：

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

下面的表格列出了其他一些 HTTP 请求方法：

最后送福利了，自己是从事了五年的前端工程师，整理了一份最全面前端学习资料，只要私信：“前端"等3秒后即可获取地址，

里面概括应用网站开发，css，html，JavaScript，jQuery，Ajax，node，angular等。等多个知识点高级进阶干货的相关视频资料，等你来拿

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

小猿圈web前端开发之HTML5 manifest离线缓存的示例

您的项目需求