小猿圈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:

login.php

/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前台内容的朋友可以关注小猿圈的每天的动态web前台自学②群：738735873，会不定时升级很多更好的内容奉献给大家，希望对你的学习有所帮助。