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 条评论
登录 后参与评论

相关文章

来自专栏Android机器圈

Java虚拟机和Dalvik虚拟机的区别java虚拟机和Dalvik虚拟机的区别

java虚拟机和Dalvik虚拟机的区别 该文章是本人转载的,觉得写的不错,和大家分享一下 Google于2007年底正式发布了Android SDK, 作为 ...

3779
来自专栏北京马哥教育

Linux系统命令和使用技巧8则

我们在平时使用 Linux 系统时,无论在终端下还是在图形桌面下,都有一些快捷的命令和操作的技巧,本文就向新手简单介绍常用的几种: 1、处理特殊的文件名 假设L...

4208
来自专栏小樱的经验随笔

mount命令详解及常见问题汇总

一 、mount命令(用来挂载硬盘或镜像等) 用法:mount [-t vfstype] [-o options] device dir 1、-t vfstyp...

8835
来自专栏散尽浮华

nginx的web缓存服务环境部署记录

web缓存位于内容源Web服务器和客户端之间,当用户访问一个URL时,Web缓存服务器会去后端Web源服务器取回要输出的内容,然后,当下一个请求到来时,如果访问...

4717
来自专栏Android机动车

Android开发环境搭建

因此,我们这篇文章将从JDK和AndroidStudio两个方面来讲解Android开发环境的搭建。

1844
来自专栏我的技术笔记

在Ubuntu 14.04上安装GitLab(Trusty Tahr)

GitLab是一个基于Ruby on Rails的免费git存储库管理应用程序。假如您想托管自己的git存储库,这是一个很好的替代方案,因为在编写私有代码或则闭...

2081
来自专栏大闲人柴毛毛

Linux文件的默认权限与查找命令详解

今天被csdn坑了!昨晚写了一夜的博客,保存到线上草稿了!可是今天打开博客,草稿箱里也找不到,发布的文章中也找不到!作为一家专门研讨技术的网站,居然还会在技术上...

45016
来自专栏菜鸟程序员

Android 调试桥

1943
来自专栏Java工程师日常干货

理解数据库连接池底层原理之手写实现前言对数据库连接池的一点思考写一个迷你版数据库连接池

数据库连接池的基本思想是:为数据库连接建立一个“缓冲池”,预先在池中放入一定数量的数据库连接管道,需要时,从池子中取出管道进行使用,操作完毕后,在将管道放入池子...

581
来自专栏散尽浮华

nginx反向代理+缓存开启+url重写+负载均衡(带健康探测)的部署记录

在日常运维工作中,运维人员会时常使用到nginx的反向代理,负载均衡以及缓存等功能来优化web服务性能。 废话不多说,下面对测试环境下的nginx反向代理+缓存...

8439

扫码关注云+社区

领取腾讯云代金券