H5应用程序缓存 - Cache manifest
一、作用
离线浏览 - 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。优化加载速度，节约服务器资源。
二、适用场景
正如 manifest 英译的名字：离线应用程序缓存，这项功能是设计给会有离线场景的应用来使用，例如：需要离线使用的手机APP/H5，亦或是PC端的纯静态页面。
三、问题
1.服务器资源更新后显示滞后需要多刷新一次页面
- 首次在载入页面时，浏览器会判断是否引入了 manifest，若检测到引入，则下载并按文件规则缓存资源。
- 再次载入页面时，便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。
- 当 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的更多相关文章
- H5应用程序缓存浅谈及实际测试
应用程序缓存能做什么? 可以在脱离网络的条件下离线访问. 减少读取服务器文件,减轻服务器的访问压力. 优化网站打开速度. 如何启用应用缓存? 第一步:给服务器添加新的MIME:扩展名:.appcach ...
- HTML5 缓存: cache manifest
---恢复内容开始--- 1:MIME TYPE:text/cache-manifest 服务器配置MIME类型2:需要由你创建的:NAME.manifest 创建manifest文件3:给 < ...
- MVC-Cache-2.应用程序缓存(Cache:1.输出缓存[2].应用程序缓存)
2.应用数据缓存-Cache 1.引入CacheHelper.cs CacheHelper.cs文件源码在下面; 2.介绍用法: //键 string ips = "键"; //值 ...
- H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
- HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- HTML 5 应用程序缓存manifest
什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏 ...
- HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- 应用程序缓存－－manifest
应用程序缓存(Application Cache)为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改 ...
- HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
随机推荐
- Python正则表达式中的re.S的作用
在Python的正则表达式中,有一个参数为re.S.它表示“.”(不包含外侧双引号,下同)的作用扩展到整个字符串,包括“\n”.看如下代码: import re a = '''asdfhellopas ...
- 如何只利用NMAKE+CL+LINK写WIN32程序
关键是1.包含<Windows.h>及其他的相关头文件2.在LINK指令中最起码要加上KERNEL32.LIB USER32.LIB GDI32.LIB(不需要制定其路径,因为NMAKE, ...
- hdu1078（记忆化搜索）
题意:给出n*n的格子,每个各自里面有些食物,问一只老鼠每次走最多k步所能吃到的最多的食物 这道题目,值得我记住它,re了n次,以前写搜索没有注意的一个小地方,导致re这么多次的 ac代码: #inc ...
- 一款基于jQuery的热点新闻Tab选项卡插件
今天要分享的jQuery焦点图插件非常适合展示热点新闻,之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错.它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分 ...
- 计算机网络——OSI、TCP/IP协议族详解
一.OSI七层协议体系结构域TCP/IP四层体系结构对比 ISO/OSI模型,即开放式通信系统互联参考模型(Open System Interconnection Reference Model),是 ...
- qt 多点触摸
http://www.ptrackapp.com/apclassys-notes/embedded-linux-multitouch/ Embedded Linux Multitouch with Q ...
- web服务器优化的一些思路
作为一个新手(并不是菜鸟,而是像我们这样的学生),维护一个网站往往是一个很头疼的问题,尤其是动态网站,更尤其是用java写的网站. 当网站的吞吐量很小的时候你会发现服务器根本不需要维护,因为几乎没有延 ...
- Desugar Scala(15) -- unapply和unapplySeq方法
欢迎关注我的新博客地址:http://cuipengfei.me/ 实在想不到什么动词可以当做脱衣服来讲了,所以从现在开始这系列博文就叫做Desugar Scala了.除非哪天才思泉涌,又想到了新词: ...
- TensorFlow基础笔记(4) Tensor Transformation
https://segmentfault.com/a/1190000008793389 抽取 tf.slice(input_, begin, size, name=None):按照指定的下标范围抽取连 ...
- 004杰信-关于formSubmit('factorycreate.action','_self')路径的疑惑
本文材料来源于传智播客,在此说明. 整个项目结构: