HTML5 离线应用程序

最新推荐文章于 2025-05-26 23:08:15 发布

刘小妞

最新推荐文章于 2025-05-26 23:08:15 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML(5) 文章标签： html5 api 离线应用程序

本文链接：https://blog.youkuaiyun.com/liuwengai/article/details/53695849

HTML(5) 专栏收录该内容

26 篇文章

订阅专栏

本文介绍HTML5中本地缓存的应用，通过manifest文件管理资源文件，实现Web应用离线可用。涵盖本地缓存与浏览器缓存的区别、manifest文件配置、浏览器与服务器交互流程及applicationCache对象使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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地址

<html manifest="hello.manifest">
</html>

4.浏览器和服务器的交互过程
1)访问 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方法，缓存将会立刻被更新。
虽然缓存立刻被更新，效果在重新打开页面时才会生效。