欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 离线应用之打造零哀求、无流量网站的办理要领

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

媒介

本日Web应用措施已经很伟大了,以此刻的成长,会将越来越伟大,但他有一个致命弱点,不能离开internet链接,因此在HTML中新增了一API,

它行使一个当地存储机制很好地办理了这个题目,为离线web应用铺平了阶梯。
当地缓存于赏识器缓存


代码如下:
当地缓存是为整个web应用措施处事
赏识器缓存只对单个网页处事</p> <p>任何网页都具有网页缓存
当地缓存只缓存那些你指定缓存的页面</p> <p>网页缓存不行靠、不安详,由于我们不知道网站中到底缓存了哪些页面、哪些资源
当地缓存可以节制对哪些内容举办缓存

manifest文件

web应用措施当地缓存是通过每个页面的manifest文件来打点的,manifest是一简朴文本,在该文件中以清单的情势罗列了必要被缓存的不必要被缓存的文件的名字、路径。

可觉得每个页面单独指定manifest也可觉得整个应用措施指定,例我们为hello.htm的配置:


代码如下:
CACHE MANIFEST
CACHE:
other.Html
hellow.js
images/myphoto.jpg
NETWORK:
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.Html
newhellow.js

在manifest文件中,第一行必需是CACHE MANIFEST,以把文本的浸染汇报赏识器,即对当地缓存中的资源文件举办详细配置。
同时真正运行离线web应用措施时,必要对处事器举办设置,让处事器支持text/cache-manifest这个mime范例。

在指定文件源文件时可以把资源文件分为三类,CACHE、NETWORK、FALLBACK


代码如下:</p> <p>在CACHE种别中指定必要被缓存在当地的资源文件,为某个页面指定必要当地缓存的资源文件时,不必要把这个页面自己指定在CACHE种别中,
由于假如一个页面具有manifest文件,赏识器会自动对该页面举办当地缓存</p> <p>NETWORK种别为显式指定不举办缓存的资源文件,这些文件只有成立处事器端链接才气会见,本例行使通配符*暗示没有举办记录的都不缓存</p> <p>FALLBACK种别中的每行中指定两个资源文件,第一个资源文件为可以或许在线会见时行使的资源文件,第二个为不能在线会见时行使的当地缓存文件

赏识器与处事器交互进程

当行使离线web应用措施举办事变时,有须要相识赏识器与处事器之间的交互进程:


代码如下:
好比一个http://LuLingniu,以index.htm为主页,该主页行使index.manifest,
在文件中缓存index.htm,hello.js,hello.jpg,初次会见时流程如下:
赏识器哀求url
处事器返回index.htm首页
赏识器理会index.htm网页,哀求页面上全部资源文件
处事器返回资源文件
赏识器处理赏罚manifest文件,哀求manifest中必要缓存的文件,纵然哀求过亦会再哀求
处事器返回必要缓存的文件
赏识器对当地缓存举办更新,存入资源文件,并触发一个变乱关照当地缓存更新</p> <p>再次打开该URL
哀求url
赏识器发明页面被缓存,于是行使当地缓存文件
理会文件
赏识器像处事器哀求manifest文件
处事器返回304,关照manifest文件没有变革(如果改变将会有所差异)

applicationCache工具

该工具代表了当地缓存,可以用它来关照用户当地缓存已经被更新,也应承手动更新当地缓存。

前面当赏识器对当地缓存做了更新装入新资源文件时,会触发applicationCache工具的updateready变乱,关照当地缓存已被修改,然后提醒用户手动革新页面。
swapCache

swapCache要领用来手动执行当地缓存的更新,它只能在applicationCache工具的updateReady变乱触发时挪用,

即当资源文件产生改变时,可行使此要领手工缓存更新。

本文地址:http://itbyc.com/web/html5/13624.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1