Html5应用程序缓存(Cache manifest)


Posted in HTML / CSS onJune 04, 2018

一、作用

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

二、适用场景

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

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

HTML / CSS 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
Html5之title吸顶功能
Jun 04 #HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 #HTML / CSS
HTML5中的websocket实现直播功能
May 21 #HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 #HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 #HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 #HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 #HTML / CSS
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
详解Python装饰器由浅入深
2016/12/09 Python
Python中is和==的区别详解
2018/11/15 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python 线程的五个状态
2020/09/22 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
房地产广告词大全
2014/03/19 职场文书
大学校务公开实施方案
2014/03/31 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
学校2014年度工作总结
2014/12/06 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android