HTML5 离线web应用

最新推荐文章于 2024-05-11 09:47:35 发布

五花毛

最新推荐文章于 2024-05-11 09:47:35 发布

阅读量715

点赞数

文章标签： HTML5 离线web 缓存

本文链接：https://blog.csdn.net/Hanhanyoona/article/details/80985494

版权

离线web应用是基于web技术构建的应用，即可在线运行，也可脱机运行，HYML5的离线应用API：Application Cache。浏览器支持情况：IE10+、Chrome、Firefox、Safari、Opera。

浏览器支持情况检测：

if(window.applicationCache){//浏览器支持

}else{//浏览器不支持}

在构建离线应用的时候我们需要定义缓存清单文件（manifest文件）作用是设置页面相关文件的缓存情况。页面相关文件是指如独立的css文件，图片文件，js文件等等，通过manifest文件的定义可以设置哪些是可以缓存的，哪些是不可以缓存的，哪些有事可以在脱机情况下替换的。

manifest文件常见后缀名：.appcache（推荐）、.manifest。内容：分区块的，每行定义一个资源文件名。注释：#开头的行。

常见的区块：CACHE MANIFEST ：其下的文件列表，在第一次下载后，将会被缓存。

NETWORK：其下的文件列表，不会被缓存，总是需要链接服务器。

FALLBACK：其下的文件列表，在不能访问时，将使用定义的替代文件。

manifest文件示例：CACHE MANIFEST

#2018-07-10 v1.0.0

layout.css

main.js

logo.gif // 以上的意思是：以layout.css、main.js、logo.gif文件要被缓存

NETWORK：

FALLBACK：

html/ offline.html //如果当前路径的html下的文件不能访问的话全部用offline.html 替换

注意：NETWORK和FALLBACK后边要跟冒号：

applicationCache 对象的status属性 applicationCache.stat

用于标志缓存状态的status属性，可能的属性值：

applicationCache.update():用来请求浏览器更新缓存。注意：1.当manifest文件修改时，才会下载必要的新资源。2.如果没有缓存或者缓存已经过期，则会抛出错误。

构建离线应用的一般步骤：

1.为<html>元素定义manifest属性值。（它的属性值是manifest文件是路径）

2.定义manifest文件。

3.定义相关的JavaScript代码。（使用applicationCache对象进行相关操作）

关注