离线Web应用Manifest

最新推荐文章于 2024-05-10 09:42:54 发布

laijieyao

最新推荐文章于 2024-05-10 09:42:54 发布

阅读量3.9k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/laijieyao/article/details/42968107

版权

18 篇文章 0 订阅

订阅专栏

HTML5新增离线功能。

假设有一个在线笔记应用，当用户的手机网络断开时，他可能正在编辑一则笔记。

使用HTML5的离线Web应用，他就可以继续离线编辑笔记，然后等到网络再次连接时将本地数据发送到服务器。

离线Web应用的运行机制是每个需要离线使用的网页都指定一个后缀名为.manifest的文本文件。

这个文本文件罗列了该网页离线使用时所需的所有的资源文件(HTML、图片、Javascript等)。支持离线Web应用的浏览器

会自动读取.manifest文件。

1、使用方法。

在HTML的开始标签中，我们指定一个.manifest文件：

<html lang="en" manifest="/offline.manifest">

注意：必须在每一个准备离线使用的页面的HTML标签中都追加manifest属性。

如果使用的事Apache服务器，你可能还需要修改下.htaccess文件，追加一行代码：

AddType text/cache-manifest .manifest

现在我们要给offline.manifest填充内容，即通知浏览器纳西而文件是用作离线存储的。

offline.manifest文件内容如下：

CACHE MANIFEST
#v1

CACHE:
basic_page_layout_ch4.html
css/main.css
img/atwiNavBg.png


NETWORK:
*

FALLBACK:
//offline.html

2、manifest文件所包含的部分

1）CACHE：部分罗列了所有离线使用所需要的文件。这些文件的路径都是相对offline.manifest而言的。使用绝对路径也可以的。

2）NETWORK：部分罗列了所有不需要被缓存的文件，你可以将看成一个”在线白名单“。此处罗罗列的文件在网络畅通的情况下都会直接跳过缓存。

如果你想网络内容在网络畅通个的情况下及时更新，可以在此处使用* 。星号呗成为在线白名单通配符。

3）FALLBACK：部分使用/字符定义了一个URL模板，他的作用是访问每个页面时都会问”缓存中有这个页面吗？“如果有则显示缓存页面，如果没有

则显示指定的offline.html文件。

关注

专栏目录