HTML5新特性之离线缓存技术-php中文网
HTML5此前的网页，都是无连接，必需联网才能拜访，这其实也是web的特点，这其实关于PC是时代问题并不大，但到了移动互联网时代，
设备终端位置不再牢固，依靠无线信号，网络的可靠性变得落低，比方坐在火车上，过了一个隧道（15分钟），便没法拜访网站，十分不便。
而离线web利用同意我们在脱机时与网站停止交互。
二、什么是离线Web应程序？为什么要开发离线的Web利用程序？
离线web利用程序是指：当客户端当地与web利用程序的效劳器没有创立连接时，也能正常在客户端当地使用该web利用程序停止有关操纵。
Web利用程序已经变的越来越复杂，许多领域都在利用Web利用程序。但是，它有一个致命的缺陷：假如会员没有和Internet创立连接，他就
不克不及利用这个web利用程序了。因此H5新增了一个API，它使用一个当地缓存机制很好的解决了这个问题，使离线利用程序的开发成为了大概。
要想使web利用程序在离线状态的时候也能正常工作，就必需把所有构成web利用程序的资源文件，如HTML文件、CSS文件、JavaScript足本
文件等放在当地缓存中，当效劳器没有和Internet创立连接时，也可以利用当地缓存中的资源文件正常运转web利用程序。
三、什么是当地缓存，当地缓存与阅读器网页缓存的不同。
Web利用程序的当地缓存与阅读器的网页缓存有很多方面都存在着明显的不同。
1.当地缓存为整个web利用程序效劳的，而阅读器的网页缓存只效劳于单个网页。任何网页都具有网页缓存。而当地缓存至缓存那些指定的缓存
的页面。
2.网页缓存不平安不成靠，由于我们不知道在网站中到底缓存了哪些网页，乃至缓存了网页上的哪些资源。而当地缓存可靠，我们可以操纵对
哪些内容停止缓存，
不合错误哪些内容停止缓存，开发人员还可以利用编程的手段来操纵缓存的更新，利用缓存对象的各种属性、状态和事件来开发出愈加强大的离线
利用程序。
3.（有些）阅读器会主动留存本人的缓存文件以加快网站加载速度。但是要实现阅读器缓存必需要知足一个前提，那就是网络必需要保持连接
。假如网络没有连接，
即便阅读器启用了对一个站点的缓存，仍然没法翻开这个站点。只会收到一条错误信息。而使用离线web利用，我们可以主动告诉阅读器应当
从网站效劳器中猎取或缓存哪些文件，并且在网络离线状态下仍然能够拜访这个网站。
四、怎样实现HTML5利用程序缓存？什么是manifest文件，在文件中拟定什么内容需要停止当地缓存，哪些内容不需要？
实现HTML5利用程序缓存非常简便，只需三步，并且不需要任何API。只需要告诉阅读器需要离线缓存的文件，并对效劳器和网页做一些
简便的设定即可实现。
4-1、创立一个 cache.manifest 文件，并确保文件具有准确的内容。
4-2、在效劳器上设定内容类型。
4-3、所有的HTML文件都指向 cache.manifest。
详细实现：
4-1:第一我们创立一个名为cache.manifest的文件，Windows平台下用记事本即可（也可用其他的IDE）。文件内容如下：
留意事项：
1、第一行必需是”CACHE DMANIFEST”文字，以把本文件的作用告知阅读器，即对当地缓存中的资源文件停止详细设定。
2、在manifest文件中，可以加上注释来停止一些必要说明或说明。注释行以”#”文字开头。
3、在CACHE之后的部分为列出我们需要缓存的文件。
4、在FALLBACK之后的部分每一行中指定两个资源文件，第一个资源文件为能够在线拜访时使用的资源文件，第二个资源文件为
不克不及在线拜访时使用的备用资源文件。
5、在NETWORK之后可以指定在线白名单，即列出我们不但愿离线储备的文件，由于平常它们的内容需要互联网拜访才成心义。
别的，在此部分我们可以使用快速方式：通配符*。这将告诉阅读器，利用效劳器中猎取没有在显示部分中提到的任何文件或URL。
4-2：效劳器上设定内容类型。
真正运转或测试离线web利用程序的时候，需要对效劳器停止配置，让效劳器支撑text/cache-manifest这个MIME类型（在h5中规定
manifest文件的MIME类型是text/cache-manifest）。例如对Apache效劳器停止配置的时候，需要寻到
｛apache_home｝/conf/mime.type这个文件(.htaccess)，并在文件最后增加如下所示代码：
text/cache-manifest .manifest 。在微软的IIS效劳器中的步骤如下所示：
(1).右键选中默许网站或需要增加类型的网站，弹出属性对话框
(2).选中”http头”标签
(3).在MIME映射下，单击文件类型按钮
(4).在翻开的MIME类型对话框中单击创建按钮
(5).在关联扩展名文本中输入”manifest”，在内容类型文本框中输入”text/cache-manifest”,然后点击肯定按钮。
4-3:设定HTML文件的指向。
<html manifest=”/cache.manifest” >
完成这一步后，就完成了web离线缓存的所有步骤。由于阅读的文件内容都没有更换且储备在当地，因此此刻网页的翻开速度会更快
（即便是在线状态也如此）。
留意事项：
1、网站的每一个html页面都必需设定html元素的manifest属性。Must to do；
2、在你的整个网站利用中，只能有一个cache.manifest文件（倡议放在网站根名目下）；
3、部分阅读器（如IE8-）不支撑HTML5离线缓存；
4、“#” 开头的注释行可知足其他用处。利用的缓存会在其 manifest 文件更换时被更新。假如您编纂了一幅图片，或者修改了一个 JavaScript 函数，
这些改动都不会被从新缓存。更新注释行中的日期和版本号是一种使阅读重视新缓存文件的方法。
五、把握停止当地缓存的applicationCache对象及其属性和事件：
（1）缓存的更新：
当一个web利用从缓存中载入的时候，所有与之相关的文件也是直接从缓存中猎取。在线状态下，阅读器会异步地检查清单文件可否有更新。
假如有更新，新的清单文件乃至清单中的列举的所有文件都会下载下来从新留存到程序缓存中。但要留意阅读器只是检查清单文件，而不会
检查缓存的文件可否有更新，假如修改一个缓存的js文件，并且要想让该文件生效，就必需去更新下清单文件。由于利用程序依靠的文件列
表其实并没有转变，因此最简便的方式就是更新版本。
代码如下：
CHCHE MANIFEST CACHE: #version<span style="color:#cc0000;">2</span> (更换这个数字以便让阅读重视新下载) myapp.html myapp.css myapp.js
一样“卸载“，就要在效劳器端删除清单文件，使得恳求该文件的时候返回404，同时，修改html文件以便他们与该清单列表”断开链接“。
留意：
①、阅读器检查清单文件乃至更新缓存的操纵是异步的，大概是在从缓存中载入利用此前，也有大概是同时停止。因此关于简便的web利用
而言，在更新清单文件之后，会员必需载入利用两次才能包管最新的版本生效：第一次是从缓存中载入老版本随后更新缓存；第二次才是从
缓存中载入最新的版本。
②、阅读器在更新缓存历程中会触发一系列事件，可以通过注册处置程序来跟踪这个历程同时供给反应会员。
代码如下：
applicationCache.onupdateready= function(){
var reload = confirm(“A new version of this application is available\n and will be used the next time you reload.\n”);
if(reload) location.reload();
}该事件注册在ApplicationCache对象上的，该对象是window的applicationCache属性的值。支撑利用程序缓存的阅读器会定义该属性。
（2）处置利用缓存相关事件：
//下面所有的事件处置程序都使用此函数来显示状态新闻
//由于都是通过调取status函数来显示状态，因此所有处置程序都返回false来阻挠阅读器显示其默许状态新闻
function status(msg){
doucment.getElementById(“statusline”).innerHTML= msg;
console.log(msg); //同时在操纵台输出此新闻，便于调试
}
//每当利用程序载入的时候，都会检查该清单文件
//也总会第一触发“checking”事件
window.applicationCache.onchecking = function(){
status(“checking for a new version.”);
return false;
}
//假如没有改动，同时利用程序也已经缓存了
//”noupdate”事件被触发，整个历程完毕
window.applicationCache.onnoupdate = function(){
}
//假如还未缓存利用程序，或者清单文件有改动
//那么阅读器会下载并缓存清单中的所有资源
//触发”downloading”事件，同时意味着下载历程开端
window.applicationCache.ondownloading = function(){
status(“Downloading new version”);
window.progresscount = 0;
return false;
}
//鄙人载历程中会中断性触发“progress“事件
//平常是在每个文件下载完毕的时候
window.applicationCache.onprogress = function(e){
varprogress = “”;
if(e && e.lengthComputable)
progress = “ ”+Math.round(100*e.loaded/e.total)+”%”
else
progress = “(“+(++progresscount)+”)”
return false;
}
//当下载完成并且首次将利用程序下载到缓存中时，阅读器会触发“cached“事件
window.applicationCache.oncached = function(e){
status(“Thisapplication is now cached locally”);
return false;
}
//当下载完成并将缓存中的利用程序更新后，阅读器会触发”updaterady”事件
//要留意的是：触发此事件的时候，会员任然可以看到老版本的利用程序
window.applicationCache.onupdateready = function(e){
status(“Anew version has been downloaded. Reload to run it”);
return false;
}
//假如阅读器处于离线状态，检查清单列表失败，则会触发“error“事件
//当一个未缓存的利用程序援用一个不存在的清单文件，也会触发此事件
window.applicationCache.onerror = function(e){
status(“Couldn’tload manifest or cache application”);
return false;
}
//假如一个缓存的利用程序援用一个不存在的清单文件，会触发“obsolete“
//同时将利用从缓存中移除之后不会从缓存而是通过网络加载资源
window.applicationCache.onobsolete = function(e){
status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);
return false;
}每次载入一个设定了manifest属性的html文件，阅读器都会触发”checking”事件。并通过网络载入该清单文件。不外之后，会随着
不一样的状况触发不一样的事件。
事件列表：
(1).没有可用更新
假如利用程序已经缓存并且清单文件没有动，则阅读器会触发noupdate事件
(2).有可用更新
假如利用程序已经缓存并且清单元件有改动，则阅读器会触发downloading事件并开端下载和缓存清单文件中列举的所有资源。
随着下载历程的停止阅读器还会触发”progress”事件，鄙人载完成后，会触发”updateready”事件。
(3).首次载入新的利用程序
假如还未缓存利用程序，如上所述downloading，progress事件都会触发。但是，当下载完成后，阅读器会触发”cached”事件
而不是updateready事件
(4).阅读器处于离线状态
假如阅读器处于离线状态，它没法检查清单文件，同时它会触发“error”事件。
假如一个未缓存的利用程序援用了不存的清单文件，阅读器也会触发该事件
(5).清单文件不存在
假如阅读器处置在线状态，利用程序也已经缓存起来，但是清单文件不存在，阅读器会触发obsolete事件，并将该利用程序
从缓存中移除。
缓存状态:
缓存的状态可以通过window.applicationCache.status获得，其状态主要包罗如下6种：
const unsigned short UNCACHED=0;//未缓存(利用程序没有设定manifest属性：未缓存) const unsigned short IDLE=1;//余暇状态(清单文件已经检查完毕，并且已经缓存了最新的利用程序) const unsigned short CHECKING=2;//检查中(阅读器正在检查清单文件) const unsigned short DOWNLOADING=3;//下载中(阅读器正鄙人载并缓存清单中列举的所有文件) const unsigned short UPDATEREADY=4;//更新预备中(已经下载和缓存了最新版的利用程序) const unsigned short OBSOLETE =5;//过期状态(清单文件不存在，缓存将被清除) readonly attribute unsigned short status;
六、ApplicationCache对象还定义了两个办法update()和swapCache()：
(1).update
显式调取了更新缓存算法以检测可否有最新版本的的利用程序。这致使阅读器检测统一个清单文件（并触发雷同的事件），
这和第一次载入利用程序时的结果是一样的。
(2).swapCache
它告诉阅读器可以弃用老缓存，所有的恳求都从新缓存中猎取。留意，这并不会从新载入利用程序：所有已经载入的html文件
、图片、足本等资源都不会改动。但是，之后的恳求将从最新的缓存中猎取。这会致使“版本错乱”的问题，因此一样不引荐使用
，除非利用程序设计得很好，确保这样的方式没有问题。只要ApplicationCache.UPDATEREADY和
ApplicationCache.ABSOLETE 时调取 swapCache()才成心义（当状态OBSOLETE时，调取它可以马上弃用废弃的缓存，
让之后所有的恳求都通过网络猎取）。假如状态属性是其他数值的时候调取swapCache()办法，它就会抛出非常。
七、怎样推断在线还是离线状态？
离线web利用指的是将本人“安置”在利用程序缓存中的程序，使得哪怕在阅读器处于离线状态时仍然可拜访它。为了在离线状态可用，
Web利用需要可以告知别人本人是离线还是在线，同时当网络连接的状态发生改动时候也能“感知”到。通过navigator.onLine属性，
navigator.onLine是HTML5定义用来检测设备是在线还是离线。对应的值为false或true。但是不一样阅读器展现并不一致。
IE 6+和Safari 5+能够准确的检测到网络已断开，并将navigator.onLine设为flase。
Firefox 3+和Opera 10.6+也支撑navigator.onLine。但需要手动讲阅读器设定为脱机模式才能让阅读器正常工作。
Chrome 11及以上版本始终将navigator.onLine设为true。(不外作者的Chrome 21已经能正常使用了)
HTML5定义了online&offline事件用于监听网络状态转变。
window.addEventListener('online', callback); // 离线到上线
window.addEventListener('offline', callback); // 上线到离线
当前除了IE（IE只支撑navigator.onLine属性）外，其他最新阅读器都支撑这个事件。
八、离线Web利用实战。
通过一个简便的记事本程序——PermaNote，来说明怎样使用。程序将会员的文本留存到localStorage中，并且在网络连接可用的时候，
将其上传到效劳器，PermaNote只同意会员编纂单个笔记。
PermaNote利用包括3个文件，一个利用清单文件、一个html页面文件，一个实现逻辑的js文件。
Demo: http://xuanfengge.com/demo/201506/appcache/permanote.html
①.premanote.appcache部分：
CACHE MANIFEST # PermaNote v8 permanote.html permanote.js NETWORK: note
②.permanote.html部分：
<!DOCTYPEHTML>
<html manifest= permanote.appcache”>
<head>
<title>PermaNote Editor</title>
<script src=” permanote.js”></script>
<style type=”text/css”>
#editor {width:100%;height:250px}
#statusline{width:100%}
</style>
</head>
<body>
<p id=”toobar”>
<button id=”savebutton”onclick = “save()”>save</button>
<button onclick = “sync()”>SyncNote</button>
<button onclick = “applicationCache.update()”>UpdateApplication</button>
<textarea id=”editor”></textarea>
<p id=”statusline”></p>
</p>
</body>
</html>③.permanote.js部分
status()函数用于显示状态栏新闻，save()函数将笔记本留存到效劳器，sync()用于确保当地与效劳器文本的同步。
利用程序的时间处置程序说明：
(1).onload
尝试和效劳器同步，一旦有新版本的笔记并且完成同步后，就启用编纂器窗口。
save()和sync()函数发出HTTP恳求，并在XMLHttpRequest对象上注册一个onload时间处置程序来猎取上传或者
下载完成的提示。
(2).onbeforeunload
在未上传前，把当前版本的笔记数据留存到效劳器上。
(3).oninput
每当textarea输入框内容发生转变时，都将其内容留存到localStorage中，并启动一个计时器。当会员休止编纂超越5秒
，将主动把数据留存到效劳器。
(4).onoffline
当阅读器进入离线状态时，在状态栏显示离线新闻。
(5).ononline
当阅读器回到在线状态时，同步效劳器，检查可否有新版本的数据，并且留存当前版本的数据。
(6).onupdateready
假如新版本的利用已缓存，则在状态栏展现新闻告知会员。
(7).onnoupdate
假如利用程序缓存没有发生转变，则同时会员仍在运转当前版本。
以上就是HTML5新特性之离线缓存技术-百分百源码网的具体内容，更多请关注百分百源码网其它相关文章！
