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动画技术
Jan 01 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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
消息持续发送的完整例子
2006/10/09 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
js实现二级联动简单实例
2020/01/11 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python模块之paramiko实例代码
2018/01/31 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
小学毕业感言500字
2014/02/28 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014年老干部工作总结
2014/11/21 职场文书
个性发展自我评价2015
2015/03/09 职场文书
电影建党伟业观后感
2015/06/01 职场文书
golang 实现Location跳转方式
2021/05/02 Golang