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制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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/12/13 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
理论讲解python多进程并发编程
2018/02/09 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
tensorflow 查看梯度方式
2020/02/04 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
联谊会主持词
2014/03/26 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python