查看: 104|回复: 0

[前端资源] 扣丁学堂HTML5开发manifest离线缓存示例详解

发表于 2018-8-14 14:19:45
  今天扣丁学堂HTML5培训老师给大家介绍一下关于HTML5开发manifest离线缓存示例详解,目前来说离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。HTML5使用ApplicationCache接口解决了由离线带来的部分难题,下面我们一起来看一下吧。



​  使用缓存接口可为您的应用带来以下三个优势:
  离线浏览-用户可在离线时浏览您的完整网站
  速度-缓存资源为本地资源,因此加载速度较快。
  服务器负载更少-浏览器只会从发生了更改的服务器下载资源。
  应用缓存(又称AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。
  引用清单文件
  要启用某个应用的应用缓存,请在文档的html标记中添加manifest属性:
  manifest属性可指向绝对网址或相对路径,但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名,但必须以正确的MIME类型提供(参见下文)。
  
  或
  
  您应在要缓存的网络应用的每个页面上都添加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
  #2018-08-14: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
  #2018-08-14: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提供的网页可实现离线运行。
  更新缓存
  应用在离线后将保持缓存状态,除非发生以下某种情况:
  用户清除了浏览器对您网站的数据存储。清单文件经过修改。请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改,应用缓存通过编程方式进行更新。
  以上就是扣丁学堂HTML5开发manifest离线缓存示例详解的全部内容,希望对大家的学习有所帮助,也希望大家多多支持扣丁学堂。



回复

使用道具 举报