一、作用

离线浏览 - 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。优化加载速度，节约服务器资源。

二、适用场景

正如 manifest 英译的名字：离线应用程序缓存，这项功能是设计给会有离线场景的应用来使用，例如：需要离线使用的手机APP/H5，亦或是PC端的纯静态页面。

三、问题

1.服务器资源更新后显示滞后需要多刷新一次页面

  1. 首次在载入页面时，浏览器会判断是否引入了 manifest，若检测到引入，则下载并按文件规则缓存资源。
  2. 再次载入页面时，便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。
  3. 当 manifest 文件更新时，页面加载已经进行，但是缓存更新尚未完成，便会先使用旧 manifest 所缓存的文件，同时浏览器会将新的 manifest 文件里的缓存文件下载下来，若想看到最新的静态资源需要刷新下页面重新加载一次。

2.全量加载

当 manifest 文件更新时，所有的资源都要全部被下载一次，并且其中一个出现异常会导致整个 manifest 运行异常。

3.W3C标准及浏览器支持

作为 H5 的新属性，初衷是用来构造离线应用的，缓存网站资源的话原本浏览器的缓存机制（304）已经很好了，没必要再使用 manifest 做缓存；实际上因为使用反响并不好，W3C正在废弃 manifest。

四、使用方法

首先在标签 <html> 中指定 manifest 配置文件。

<html manifest="manifest.appcache">

配置文件 manifest.appcache。

CACHE MANIFEST

# 井号备注，这边可以放版本更新时间，修改备注算更新 manifest 文件

CACHE:

# 首次下载 CACHE 后列出来的文件后缓存到本地。

/favicon.ico

/main.css

NETWORK:

# NETWORK 下的文件不可被缓存，必须要与服务器连接。

login.php

FALLBACK:

# 一行放两个路径，第一个是访问资源，第二个是替补；当无法访问前一个资源时，用后一个资源代替之。

/cat/ /404.html

注意

manifest 会把当前页面缓存下来，所以若想更新当前页，只能先更新 manifest 文件。

五、总结

manifest 适用于需要离线运行的应用（定时器，计算器，阅读器等工具）；而需要经常发布频繁更新的网站，这种离线缓存机制并不适合。

H5应用程序缓存 - Cache manifest的更多相关文章

  1. H5应用程序缓存浅谈及实际测试

    应用程序缓存能做什么? 可以在脱离网络的条件下离线访问. 减少读取服务器文件,减轻服务器的访问压力. 优化网站打开速度. 如何启用应用缓存? 第一步:给服务器添加新的MIME:扩展名:.appcach ...

  2. HTML5 缓存: cache manifest

    ---恢复内容开始--- 1:MIME TYPE:text/cache-manifest 服务器配置MIME类型2:需要由你创建的:NAME.manifest 创建manifest文件3:给 < ...

  3. MVC-Cache-2.应用程序缓存(Cache:1.输出缓存[2].应用程序缓存)

    2.应用数据缓存-Cache 1.引入CacheHelper.cs CacheHelper.cs文件源码在下面; 2.介绍用法: //键 string ips = "键"; //值 ...

  4. H5 应用程序缓存(离线缓存)

    离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该 ...

  5. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  6. HTML 5 应用程序缓存manifest

    什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...

  7. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  8. 应用程序缓存－－manifest

    应用程序缓存(Application Cache)为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改 ...

  9. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

随机推荐

  1. 危险系数 set容器

    题目描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我们来定义一个危险系数DF( ...

  2. Python正则表达式中的re.S的作用

    在Python的正则表达式中,有一个参数为re.S.它表示“.”(不包含外侧双引号,下同)的作用扩展到整个字符串,包括“\n”.看如下代码: import re a = '''asdfhellopas ...

  3. :-1: error: [debug/moc_gotocelldialog.cpp] Error 2

    环境:Qt5.3 问题描述: 我将一个已经做好可以运行的小程序拷贝了一下,放在另一个目录下打开,却无法运行,提示上面的错误,而且原程序也无法运行了.不知道为什么,还没有答案...

  4. saveFile()方法

    saveFile的原理就是将流写入到需要写入的文件,通过可以用“FileOutputStream”创建文件实例,之后过“OutputStreamWriter”流的形式进行存储,举例:public vo ...

  5. CentOS下安装网卡驱动

    前言最近,一台机器从FreeBSD换为CentOS,一路安装顺利.完事之后发现,网卡没有启用,dmesg | grep eth 命令确定网卡没有驱动导致的.于是开始了一路艰辛的安装过程. 安装过程1. ...

  6. jQuery 插件设置cookie

    对cookies的操作在当访问一个网站就无时无刻的都伴随着我们,记录着我们的一举一动,并将不危害用户隐私的信息,将以保存,这样用户就不用去从新再次操作重复的步骤,这样大大方便了客户,也增加了客户对网站 ...

  7. selenium:chromedriver与chrome版本的对应关系

    转自:http://blog.csdn.NET/huilan_same/article/details/51896672 再使用selenium打开chrome浏览器的时候,需要用chromedriv ...

  8. Spring Cloud都做了哪些事

    Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均衡.断路器.数据监控等,都可以用 ...

  9. hdu 1421:搬寝室（动态规划 DP + 排序）

    搬寝室 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  10. 【NLP】course

    http://52opencourse.com/235/%E6%96%AF%E5%9D%A6%E7%A6%8F%E5%A4%A7%E5%AD%A6%E8%87%AA%E7%84%B6%E8%AF%AD ...