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绘制百度的小度熊
Oct 29 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 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
利用PHP创建动态图像
2006/10/09 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php自动获取关键字的方法
2015/01/06 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
javascript模拟命名空间
2015/04/17 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
Python写入CSV文件的方法
2015/07/08 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python os用法总结
2018/06/08 Python
Python 画出来六维图
2019/07/26 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python发送邮件实现基础解析
2020/08/14 Python
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
综治工作心得体会
2014/09/11 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
党支部审查意见
2015/06/02 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书