一、作用

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

二、适用场景

正如 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 配置文件。

  1. <html manifest="manifest.appcache">

配置文件 manifest.appcache

  1. CACHE MANIFEST
  2. # 井号备注,这边可以放版本更新时间,修改备注算更新 manifest 文件
  3. CACHE:
  4. # 首次下载 CACHE 后列出来的文件后缓存到本地。
  5. /favicon.ico
  6. /main.css
  7. NETWORK:
  8. # NETWORK 下的文件不可被缓存,必须要与服务器连接。
  9. login.php
  10. FALLBACK:
  11. # 一行放两个路径,第一个是访问资源,第二个是替补;当无法访问前一个资源时,用后一个资源代替之。
  12. /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. CPU被夺走的三种状态 执行时间久了 IO操作让cpu等待 被优先级高的抢占

    CPU被夺走的三种状态   执行时间久了    IO操作让cpu等待  被优先级高的抢占

  2. Linux curl 模拟form表单提交信息和文件

    Linux curl 模拟form表单提交信息和文件   curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大 ...

  3. thinkphp 集成 twig模版引擎

    下载地址:https://github.com/fucongcong/ThinkPHPLevel/archive/master.zip 控制器格式为: <?php namespace Home\ ...

  4. jquery可拖动表格调整列格子的宽度大小(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于struts2框架文件的上传与下载

    在开发一些社交网站时,需要有允许用户上传自己本地文件的功能,则需要文件的上传下载代码. 首先考虑的是文件的储存位置,这里不考虑存在数据库,因为通过数据库查询获取十分消耗资源与时间,故需将数据存储在服务 ...

  6. 如何用ChemDraw选择结构

    在使用ChemDraw软件过程中,我们往往会需要对结构进行翻滚.连结.旋转.分解.组合等操作.但是对于新手用户来说不是每种操作大家都会使用的. 针对这种情况我们会有一系列的教程来为大家讲解.下面我们就 ...

  7. MathType二次偏导怎么表示

    求导以及求偏导运算在数学中是很重要的一个部分,尤其是在高等数学中,基本都由函数的导数与偏导组成,很多公式定理也是关于这方面的,如果少了这一部分,数学将会黯然失色.因此在文档中涉及到这些内容时,必然会少 ...

  8. Administrator privileges required for OLE Remote Procedure Call debugging: this feature will not work..

    VC++ 6.0单步调试(F10)出现警告框: 解决方法: 右键VC++ 6.0程序图标

  9. C#中DllImport用法汇总

    最近使用DllImport,从网上google后发现,大部分内容都是相同,又从MSDN中搜集下,现将内容汇总,与大家分享. 大家在实际工作学习C#的时候,可能会问:为什么我们要为一些已经存在的功能(比 ...

  10. 编程之美 set 16 拈游戏分析(1)

    题目 N 个石头排成一行, 每块石头有固定的位置和编号, 两个玩家依次取石头, 每个玩家可以取其中的任一块石头, 或者相邻的两个石头. 石头在游戏过程中不能移位, 最后将剩下的石头依次取光的玩家获胜 ...