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 clip-path 用法介绍详解
Mar 01 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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
smarty中常用方法实例总结
2015/08/07 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python学习小技巧之列表项的排序
2017/05/20 Python
详解Python 正则表达式模块
2018/11/05 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
学生操行评语大全
2014/04/24 职场文书
受伤赔偿协议书
2014/09/24 职场文书
质量负责人岗位职责
2015/02/15 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
《假如》教学反思
2016/02/17 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android