这篇文章主要为大家展示了怎么实现HTML5 manifest离线缓存,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“怎么实现HTML5 manifest离线缓存”这篇文章吧。
1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
简介
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。
使用缓存接口可为您的应用带来以下三个优势:
离线浏览 - 用户可在离线时浏览您的完整网站
速度 - 缓存资源为本地资源,因此加载速度较快。
服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。
应用缓存(又称 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
该示例将在指定此清单文件的网页上缓存四个文件。
您需要注意以下几点:
CACHE MANIFEST 字符串应在第一行,且必不可少。
网站的缓存数据量不得超过 5 MB。不过,如果您要编写的是针对 Chrome 网上应用店的应用,可使用 unlimitedStorage 取消该限制。
如果清单文件或其中指定的资源无法下载,就无法进行整个缓存更新进程。在这种情况下,浏览器将继续使用原应用缓存。
我们再来看看更复杂的示例:
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 提供的网页可实现离线运行。
更新缓存
应用在离线后将保持缓存状态,除非发生以下某种情况:
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
以上就是关于“怎么实现HTML5 manifest离线缓存”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享题目:怎么实现HTML5manifest离线缓存-创新互联
标题路径:https://www.cdcxhl.com/article36/heepg.html
成都网站建设公司_创新互联,为您提供微信公众号、网站策划、外贸网站建设、网站维护、面包屑导航、网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联