Html5离线应用程序

Posted 2020-07-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html5离线应用程序相关的知识，希望对你有一定的参考价值。

最近，整理了一下关于 H5离线应用缓存的知识，今天在家休息，和大家分享一下，希望对大的学习和工作，能有所帮助。

html5的离线web应用允许我们在脱机时与网站进行交互。这在提高网站的访问速度和制作一款web离线应用上（如HTML5游戏）有一定的用处。

一、什么是离线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。只需要告诉浏览器需要离线缓存的文件，并对服务器和网页做一些简单的设置即可实现。

•创建一个 cache.manifest 文件，并确保文件具有正确的内容
•在服务器上设置内容类型
•所有的HTML文件都指向 cache.manifest
首先：创建manifest文件

Web应用程序的本地缓存是通过每个页面的manifest文件来管理的，manifest文件是一个简单的文本文件，在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径，你可以为每一个页面单独指定一个manifest文件，也可以对整个web应用程序制定一个总的manifest文件。下面用一个示例对manifest文件做一个详细的介绍：（该文件为hello.html网页的manifest文件）

在manifest文件中，

第一行必须是”CACHE DMANIFEST”文字，以把本文件的作用告知给浏览器，即对本地缓存中的资源文件进行具体设置。

2. 在manifest文件中，可以加上注释来进行一些必要的说明或解释。注释行以”#”文字开头。

在manifest文件中可以加上一个版本号，以表示这个manifest文件的版本。版本号可以是任何形式，譬如上面的”version201011211108”，更新manifest文件的时候一般也会对这个版本号进行更新。(只有当 cache.manifest 文件发生变化时，浏览器才会去更新应用缓存。如果你要更改缓存资源，你必须同时修改此文件中的内容，以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动，但大家都认同的最佳实践则是修正版本号)

4.指定资源文件，文件路径可以是相对路径，也可以是绝对路径，指定时，每个资源文件为一行。在指定资源文件的时候，可以把资源文件分为三类，分别是CACHE、NETWORK、FALLBACK.

1)在CACHE类别中指定需要被缓存的本地资源文件。为某个页面指定需要本地缓存的资源文件时，不需要把这个页面本身指定在CACHE类别中，因为如果一个页面具有manifest文件，浏览器会自动对这个页面进行本地缓存。

2)NETWORK类别为显示指定不进行本地缓存的资源文件，这些文件只有当客户端与服务器建立连接的时候才能访问。本示例该类别中的”*”为通配符，表示没有在本manifest文件中指定的资源文件都不进行本地缓存

3)FALLBACK类别中的每一行中指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件。

以上这三个类别，每个类别都是可选的，但是如果文件开头没有指定类别而直接书写资源文件的时候，浏览器把这些资源文件视为CACHE类别，直到看见文件中第一个被书写出来的类别为止。允许在同一个manifest文件中重复书写同一类别。

其次：在服务器上设置内容类型

真正运行或测试离线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”,然后点击确定按钮。

最后，将HML页面那个指向manifest文件

我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步：<html manifest="/cache.manifest">完成这一步后，就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地，因此现在网页的打开速度会更快（即使是在线状态也如此）。
需要注意的问题：

•网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做；
•在你的整个网站应用中，只能有一个cache.manifest文件（建议放在网站根目录下）；
•部分浏览器（如IE8-）不支持HTML5离线缓存；

四、掌握进行本地缓存的applicationCache对象及其属性和事件

缓存的更新

当一个web应用从缓存中载入的时候，所有与之相关的文件也是直接从缓存中获取。在线状态下，浏览器会异步地检查清单文件是否有更新。如果有更新，新的清单文件以及清单中的列举的所有文件都会下载下来重新保存到程序缓存中。但是，要注意是，浏览器只是检查清单文件，而不会检查缓存的文件是否有更新：只检查清单文件manifest文件。

如果修改一个缓存的js文件，并且要想让该文件生效，就必须去更新下清单文件。由于应用程序依赖的文件列表其实并没有变化，因此最简单的方式就是更新版本s

CHCHE MANIFEST

CACHE:

#MyApp version 1 (更改这个数字以便让浏览器重新下载)

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属性的值。支持应用程序缓存的浏览器会定义该属性。

//每当应用程序载入的时候，都会检查该清单文件

//也总会首先触发“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 manifest”);

window.progresscount = 0;

return false;

}

//在下载过程中会间断性触发“progress“事件

//通常是在每个文件下载完毕的时候

window.applicationCache.onprogress = function(e){}

//当下载完成并且首次将应用程序下载到缓存中时，浏览器会触发“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;

}

applicationCache.status的6个可能的属性值

n ApplicationCache.UNCACHED(0)

应用程序没有设置manifest属性：未缓存

n ApplicationCache.IDLE(1)

清单文件已经检查完毕，并且已经缓存了最新的应用程序

n ApplicationCache.CHECKING(2)

浏览器正在检查清单文件

n ApplicationCache.DOWNLOADING(3)

浏览器正在下载并缓存清单中列举的所有文件

n ApplicationCache.UPDATEREADY(4)

已经下载和缓存了最新版的应用程序

n ApplicationCache.OBSOLETE(5)

清单文件不存在，缓存将被清除

五、ApplicationCache对象还定义了两个方法update()和swapCache()

n update

显式调用了更新缓存算法以检测是否有最新版本的的应用程序。这导致浏览器检测同一个清单文件（并触发相同的事件），这和第一次载入应用程序时的效果是一样的。

n 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属性）外，其他最新浏览器都支持这个事件。

以上是关于Html5离线应用程序的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 离线缓存

删除 HTML5 离线 AppCache

HTML5 应用程序缓存

HTML5-应用程序缓存（Application Cache）

HTML5 离线缓存