w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)

一、作用

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

二、适用场景

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

三、问题

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

首次在载入页面时，浏览器会判断是否引入了 manifest，若检测到引入，则下载并按文件规则缓存资源。

再次载入页面时，便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。

当 manifest 文件更新时，页面加载已经进行，但是缓存更新尚未完成，便会先使用旧 manifest 所缓存的文件，同时浏览器会将新的 manifest 文件里的缓存文件下载下来，若想看到最新的静态资源需要刷新下页面重新加载一次。

2.全量加载

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

3.W3C标准及浏览器支持

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

四、使用方法

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

配置文件 manifest.appcache。

CACHE MANIFEST

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

CACHE:

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

/favicon.ico

/main.css

NETWORK:

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

FALLBACK:

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

/cat/ /404.html

注意

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

五、总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)相关推荐

通过应用程序缓存实现HTML5的离线浏览
对Web开发者和设计者来说,离线浏览已经越来越重要了.能让用户离线浏览一直是站点设计的目标,但却很难实现.当我们进入到HTML5的时代,这种情形却发生了改变.你可以利用应用程序缓存(Applicati ...
083_html5应用程序缓存
1. 使用html5, 通过创建cache manifest文件, 可以轻松地创建web应用的离线版本. 2. 什么是应用程序缓存(Application Cache)? 2.1. html5引入了应 ...
HTML5 - 应用程序缓存(Application Cache)
为什么要使用Application Cache技术? 在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务器,造成速度变慢,对于PC用户,网络相对比较稳定,载入速度也不会差太多.但 ...
html5 客户端数据缓存机制,深入理解HTML5离线缓存机制
TML5提供了一种离线应用缓存机制,使得网页应用可以离线使用,这种机制在移动端浏览器上支持度非常广,所有版本的android和ios浏览器都能很好的支持.我们可以放心的使用该特性来加速移动端页面的访问 ...
HTML5 应用程序缓存
2019独角兽企业重金招聘Python工程师标准>>> 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存( ...
神奇的HTML5离线存储（应用程序缓存）
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
HTML5 API详解(11)：Cache 应用程序缓存，这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...
HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序
1.视频直播客户端技术之Native APP 原生 APP 终端音视频引擎的结构框图如下,基本包括了音频引擎.视频引擎和网络传输,合称实时语音视频终端引擎.这里还包含底层的音视频采集和渲染,还有网络的 ...

w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)

w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)相关推荐

最新文章

热门文章