HTML5 离线应用程序

男娘i 2022-07-13 00:22 236阅读 0赞

HTML5中，新增了一个API，利用本地缓存机制，为离线的Web应用程序开发提供了可能。

为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。

1.本地缓存和浏览器缓存的区别  
本地缓存是为整个Web应用程序服务的，浏览器的网页缓存只服务于单个网页。  
任何网页都有网页缓存，但是本地缓存只是缓存那些你指定缓存的网页。  
网页缓存是不安全，不可靠的，因为不知道缓存了什么。本地缓存是可靠的，可以指定缓存的内容。

2.Web应用程序的本地缓存是通过每个页面的  
Web应用程序本地缓存通过每个页面的manifest文件来管理。这个文件列举了需要被缓存或不需要被缓存的资源文件。

manifest文件示例

CACHE MANIFEST-----本文件的作用告诉浏览器
    #version 7 ------版本号
    CACHE:-----指定需要被缓存在本地的资源文件
    other.html
    hello.js
    images/myphoto.jpg
    NETWORK:----显式指定不进行本地缓存的文件，当客户端和服务端建立连接时候才能访问
    http://lwg/NotOffline
    NotOffline.asp
    *----通配符，没有在本文件中指定的资源文件不进行本地缓存
    FALLBACK:---每行指定两个资源，第一个资源为能够在线访问时使用的资源，第二个是不能在线时备用资源
    online.js   locale.js
    CACHE:
    newhello.html
    newhello.js

1）真正测试Web应用程序的时候，需要对服务器进行配置，让服务器支持text/cache-manifest这个MIME类型。  
2）资源文件分为CACHE, NETWORK, FALLBACK三类，如果没有指定类别直接书写资源文件，浏览器将这些资源文件视为CACHE类。  
3）允许在同一个manifest文件中重复书写同一个类

3.为了让浏览器能够正常阅读该文本文件，需要在Web应用程序页面上的html标签的manifest属性中指定manifest文件的URL地址

4.浏览器和服务器的交互过程  
1)访问 [http://lwg][http_lwg] 网站，以index.html为主页，该主页使用 index.manifest 文件为manifest文件，在该文件中请求本地缓存 index.html hello.js hello1.jpg hello2.jpg这几个文件

**首次访问：**  
(1)浏览器发送请求访问网页  
(2)服务器返回 index.html 网页  
(3)浏览器解析 index.html网页，请求页面上所有资源，包括HTML文件，图像文件，CSS文件，JavaScript脚本文件，以及manifest文件  
(4)服务器返回所有资源文件  
(5)浏览器处理manifest文件，请求manifest文件中所有要求本地缓存的文件，包括index.html文件本身。即使刚才已经请求过这个文件。如果本地缓存所有文件，这是一个比较大重复过程。  
(6)服务器返回所有要求本地缓存的文件。  
(7)浏览器对本地缓存更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。

**再次打开，而且manifest没有被修改过：**  
(1)浏览器再次请求网页  
(2)浏览器发现这个页面被本地缓存，于是使用本地缓存中的index.html文件  
(3)浏览器解析index.html文件，使用所有本地缓存中资源文件  
(4)浏览器向服务器请求manifest文件  
(5)服务器返回一个304代码，通知浏览器manifest没有发生变化

**再次打开，manifest被更新过：**  
(1)浏览器请求网页  
(2)浏览器发现这个网页被本地缓存，于是使用本地缓存中的index.html  
(3)浏览器解析index.html页面，使用所有本地缓存中的资源文件  
(4)浏览器向服务器请求manifest文件  
(5)服务器返回更新过的manifest文件  
(6)浏览器处理manifest文件，发现该文件已经被更新，于是请求所有要求进行本地缓存的资源文件，包括index.html页面本身。  
(7)浏览器返回要求进行本地缓存的的资源文件  
(8)浏览器对本地缓存进行更新，存入所有新的资源文件。并且触发一个事件，通知本地缓存更新。

更新后的资源不会立刻发生变化。更新过后本地缓存中的内容还不能被使用，只有重新打开这个网页的时候才会使用更新过后的资源文件。

5.applicationCache对象

applicationCache对象代表了本地缓存，可以用来通知用户本地缓存已经被更新，也允许用户手工更新本地缓存。

当浏览器对本地缓存进行更新，装入新的资源文件，会触发applicationCache对象的updateready事件，通知本地缓存已被更新。

applicationCache.onUpdateReady=function(){ 
       //本地缓存已被更新，通知用户
       alert("本地缓存已被更新");
    }；

(1)swapCache方法  
swapCache方法用来手工执行本地缓存的更新，只能在applicationCache对象的updateReady事件被触发时调用，updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。所以这个事件的含义是本地缓存准备被更新，当这个事件被触发后，可以用swapCache手工进行缓存的更新。

假设本地缓存容量大，更新需要很多时间，需要一个提示

applicationCache.onUpdateReady=function(){ 
       //本地缓存已被更新，通知用户
       alert("正在更新本地缓存");
       applicationCache.swapCache();
       alert("本地缓存已被更新，您可以刷新页面得到本程序的最新版本");
    }；

不调用swapCache方法，本次更新在下一次打开页面时被更新。如果调用swapCache方法，缓存将会立刻被更新。  
虽然缓存立刻被更新，效果在重新打开页面时才会生效。

[http_lwg]: http://lwg