HTML5离线存储——manifest简介

离线存储的作用

1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要

2、用户访问本地的缓存文件,通常意味着更快的访问速度

3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大降低了对服务器的访问压力

Manifest是什么

manifest文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容),支持manifest的浏览器,会将按照manifest文件的规则,将文件保存在本地,从而在没有网络链接的情况下,也能访问页面。

浏览器支持情况

从图中可以看出主流浏览器均支持应用程序缓存, 除了IE

如何用

如需启用应用程序缓存,在文档的 <html> 标签中包含 manifest 属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

Manifest文件

manifest的典型结构:

CACHE MANIFEST
# 注释:需要缓存的文件,无论在线与否,均从缓存里读取
CACHE:
chched.js
cached.css

# 注释:不缓存的文件,无论缓存中存在与否,均从新获取
NETWORK:
uncached.js
uncached.css

# 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面
FALLBACK:
index.html 404.html

1、 CACHE MANIFEST 写在manifest文件开头

2、#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更改manifest的作用,可以是版本号,时间戳或者md5码等等。

3、CACHE是必须的,作用是标识出哪些文件需要缓存,可以是相对路径也可以是绝对路径

4、NETWORK可选,这一部分是要直接读取的文件,可以使用通配符 * 。

5、FALLBACK可选,指定了一个后备页面,当资源无法访问时,浏览器会使用该页面。

更新缓存

  • 在线的情况下,浏览器发现html头部有manifest属性,会请求manifest文件,如果是第一次访问应用,浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过应用并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下,浏览器就直接使用离线存储的资源。

注意事项

1、如果服务器对离线的资源进行了更新,那么必须更新manifest文件之后这些资源才能被浏览器重新下载,如果只是更新了资源而没有更新manifest文件的话,浏览器并不会重新下载资源,也就是说还是使用原来离线存储的资源。

2、对于manifest文件进行缓存的时候需要十分小心,因为可能出现一种情况就是你对manifest文件进行了更新,但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期,这个情况下浏览器还是使用原来的manifest文件,所以对于manifest文件最好不要设置缓存。

3、浏览器在下载manifest文件中的资源的时候,它会一次性下载所有资源,如果某个资源由于某种原因下载失败,那么这次的所有更新就算是失败的,浏览器还是会使用原来的资源。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

PhalGo-介绍

PhalGo-介绍 phalgo是一个Go语言的一体化开发框架,主要用于API开发应为使用ECHO框架作为http服务web程序一样可以使用,牛顿曾经说过"如果...

3406
来自专栏https://www.cnblogs.com/L

【ElasticSearch篇】--ElasticSearch从初识到安装和应用

ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口,在企业中全文搜索时,特...

1082
来自专栏FreeBuf

Burp XXE Scanner 插件开发(附下载)

Burp没有自带检测XXE漏洞功能,也没有插件。于是自己开始动手撸一个XXE Scanner插件出来。

854
来自专栏AI星球

Struts2基础(1)

1.进入Struts2的官网下载Struts2安装包:http://struts.apache.org

741
来自专栏分布式系统进阶

linux-4.14.11 添加自定义的系统调用

1092
来自专栏三丰SanFeng

Linux进程间通信(一) - 管道

管道(pipe) 普通的Linux shell都允许重定向,而重定向使用的就是管道。 例如:ps | grep vsftpd .管道是单向的、先进先出的、无结构...

2027
来自专栏coder修行路

Python爬虫番外篇之关于登录

常见的登录方式有以下两种: 查看登录页面,csrf,cookie;授权;cookie 直接发送post请求,获取cookie 上面只是简单的描述,下面是详细的针...

21310
来自专栏Laoqi's Linux运维专列

Nginx访问日志+日志切割+静态文件不记录和过期时间设置

3355
来自专栏小白安全

如何DIY一个简单的反弹Shell脚本

① 服务器与本地实现通讯 首先我们编写在服务器端需要运行的程序,这个程序主要的功能就是接收传入的数据然后对传入的数据进行处理,再然后就是把处理完的结果...

2636
来自专栏张善友的专栏

Dotnet 2.0配置系统

今天使用VS2005开发一个Windows服务,发现dotnet2.0的配置系统相对于1.x的功能变化很大。记录下来同各位共享。 .NET Framework ...

1876

扫码关注云+社区