Html5应用程序缓存(Cache manifest)

所属分类: 网页制作 / html5 阅读数: 505
收藏 0 赞 0 分享

一、作用

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

二、适用场景

正如 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 适用于需要离线运行的应用(定时器,计算器,阅读器等工具);而需要经常发布频繁更新的网站,这种离线缓存机制并不适合。

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

更多精彩内容其他人还在看

突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜质,无一例外,IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5中加入了全新的结构型元素,例如页眉header,页脚footer,导航nav,内容article,章节section等除了这种整个页面的结构型元素,html5也加入了块级别的语义元素,感兴趣的朋友可以了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在HTML5增强的元素中,最值得关注的就是表单元素;在HTML5中,表单已经做了重大的修整,一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件,看到此处是不是感觉特别惊讶啊,WebGL有一个很好的中文教程,就是下面使用参考中的第一个链接,所以这里不再班门弄斧,后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

前面我们看到了使用原生的WebGL API开发是多么的累,只因如此大量的WebGL框架被开发出来,这些框架不同程度的封装了创建3D场景的各种要素你可以快速创建需要的3D场景,感兴趣的朋友可以了解下,或许本文对你有所帮助
收藏 0 赞 0 分享

HTML中fieldset标签概述及使用方法

之前HTML没有好好学,导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读,感兴趣的朋友可以了解下,或许对你有所帮助
收藏 0 赞 0 分享

HTML5中微数据概述及在搜索引擎中的使用举例

HTML5微数据规范是标记内容的一种方式,用于描述特定的信息类型,例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称
收藏 0 赞 0 分享

html5新增的属性和废除的属性简要概述

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性比如表单相关的属性/链接相关属性是新增的而HTML4中一些属性就被废除掉了,感兴趣的你可以了解下,或许对你学习html5有所帮助
收藏 0 赞 0 分享

html5的新增的标签和废除的标签简要概述

HTML5中在新增加和废除很多标签的同时,也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等,感兴趣的朋友可以了解下,希望本文的知识点对你有所帮助
收藏 0 赞 0 分享

html5配合css3实现带提示文字的输入框(摆脱js)

webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你
收藏 0 赞 0 分享
查看更多