【转】html5离线储存,application cache,manifest使用体验
html5离线应用application cache
一、应用场景
我们通常使用浏览器缓存在用户磁盘上存储web单页,在用户再次浏览的时候已节省带宽,但即便这样,依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。
离线本地存储和传统的浏览器缓存有什么不同呢?
1、浏览器缓存主要包含两类:
a.缓存协商:Last-modified,Etag
浏览器向服务器询问页面是否被修改过,如果没有修改就返回304,浏览器直接浏览本地缓存文件。否则服务器返回新内容。
b.彻底缓存:cache-control,Expires
通过Expires设置缓存失效时间,在失效之前不需要再跟服务器请求交互。
2、离线存储为整个web提供服务,浏览器缓存只缓存单个页面;
3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定;
4、离线存储可以动态通知用户进行更新。
二、如何实现
离线存储是通过manifest文件来管理的,需要服务器端的支持,不同的服务器开启支持的方式也是不同的。
CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本,更新的时候只需修改版本号 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html
CACHE指定需要缓存的文件;NETWORK指定只有通过联网才能浏览的文件,*代表除了在CACHE中的文件;FALLBACK每行分别指定在线和离线时使用的文件
要让manifest管理存储,还需要在html标签中定义manifest属性,如下:
<!DOCTYPE HTML> <html lang="en" manifest='test.manifest'> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
最后别忘了,这些应用需要服务器支持。
Apache服务器开启支持的方式是:在conf/mime.types中添加一段代码:
test/cache-manifest manifest
IIS服务器开启方式:
右键--HTTP---MIME映射下,单击文件类型---新建---扩展名输入manifest,类型中输入test/cache-manifest
三、通过JS动态控制更新
applicationCache对象提供个了一些方法和事件,管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所
有属性和事件方法。
applicationCache.onchecking = function(){ //检查manifest文件是否存在 }applicationCache.ondownloading = function(){ //检查到有manifest或者manifest文件 //已更新就执行下载操作 //即使需要缓存的文件在请求时服务器已经返回过了 }applicationCache.onnoupdate = function(){ //返回304表示没有更新,通知浏览器直接使用本地文件 }applicationCache.onprogress = function(){ //下载的时候周期性的触发,可以通过它 //获取已经下载的文件个数 }applicationCache.oncached = function(){ //下载结束后触发,表示缓存成功 }application.onupdateready = function(){ //第二次载入,如果manifest被更新 //在下载结束时候触发 //不触发onchched alert("本地缓存正在更新中。。。"); if(confirm("是否重新载入已更新文件")){ applicationCache.swapCache(); location.reload(); } }applicationCache.onobsolete = function(){ //未找到文件,返回404或者401时候触发 }applicationCache.onerror = function(){ //其他和离线存储有关的错误 }
四、浏览器与服务器的交互
曾经有面试题是这样的:"描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么?"。
1、服务端返回baidu页面资源,浏览器载入html
2、浏览器开始解析
3、发现link,发送请求载入css文件
4、浏览器渲染页面
5、发现图片,发送请求载入图片,并重新渲染
6、发送请求js文件,阻塞渲染。如果js对dom进行了操作,则会进行rerender
对于支持离线存储的页面,浏览器和服务器的交互又是如何呢?
首次载入页面:
1-6 : 同上
7:请求页面中需要缓存的页面和数据,就算在之前的步骤中已经请求过(这是个耗能的地方)
8:服务器返回所有请求文件,浏览器进行本地存储
再次载入页面:
1:发送请求
2:使用本地存储的离线文件
3:解析页面
4:请求服务端的manifest文件,判断是否有改变,返回304则表示没有改变进入步骤5,否则进入步骤6(jaykon:这里是不是错了?304时会进入6才对)
5:进入首次载入页面的7-8(jaykon:这里注意,就算此次请求manifest文件更新了,也只是在页面宣染完成后重新下载里面路径的文件,这些新文件要在下一次访问时才会体现出来,比如再次刷新时。)
6:使用本地存储,不重新请求
转自http://jaykong.blog.163.com/blog/static/889541201272733456323/
转载于:https://www.cnblogs.com/shiqudou/p/4081346.html
【转】html5离线储存,application cache,manifest使用体验相关推荐
- html5调用手机中的application,HTML5中的Application Cache概念
HTML5中的Application Cache概念 我们知道缓存技术对于提高我们的应用程序性能有着非常重要的作用,主流的编程语言基本上都有相应的缓存技术比如 Applic览或讲琐了过自系一读页围这就 ...
- html5离线储存不足,html5的离线存储问题
HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用 ...
- w3c html5 客户端缓存数据格式,Html5应用程序缓存(Cache manifest)
一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...
- Application Cache manifest 的处理 (Webkit)
<html manifest="xxx"> 缓存构成 url+.manifest+manifest 或者 url (没有manifest) webkit解析ht ...
- HTML5 应用程序缓存 离线浏览【Application Cache】轻松地创建 web 应用的离线版本。
HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML ...
- 使用HTML5开发离线应用 - cache manifest
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- html离线教程,HTML5离线存储整理
前端html部分 //canvas.html 浏览器离线存储 配置文件 CACHE MANIFEST #v1.0.5 #需要缓存的文件 CACHE: /photos/canvas.png #不需要缓存 ...
- html5 application cache 空间限制,HTML5离线存储之Application Cache
关于html5的离线存储,大致可分为: localStorage, sessionStorage indexedDB web sql application cache 可以在chrome的debug ...
- 为提高访问速度建立本地文件服务器,html5 Application Cache——加快简历二次访问速度...
上篇博客(在github上写个人简历--最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...
最新文章
- oracle函数胡书写,Oracle中序列表sequence的使用.docx
- 第十三届计算机语言学大会,第十三届全国语音学学术会议(PCC 2018) 会议通知第3号...
- 孩子从小要学编程吗?
- python3 修饰器_【python3】修饰器简单理解
- mysql中show属于_mysql show的常见用法
- DNN的Portal在站点(服务器)之间的迁移
- 安全企业 Stormshield 披露数据泄露事件 源代码被盗
- Flutter之Widget构建过程详解
- atitit 数据库mysq启动不起来解决方案.docx
- 深度深度网络设计中各种归一化方法总结
- 极验验证码(6.0.9)破解(一) 之 抓包分析
- 将elf文件转换为bin文件
- 介绍一个使用go写的TUI性能监测工具gotop
- Apache Rewrite 详解 RewriteBase
- matlab里面box on啥意思,image – Matlab图片中的Box on和axis坐标
- 联通沃云开启80端口
- 软件定制开发怎么收费
- Intel汇编-无符号整数除法
- rust 飞天指令_腐蚀RUST代码大全 腐蚀RUST指令代码一览
- 通达信公式-均线向上
热门文章
- 非常流行的版本管理工具Tower for Mac
- ReiBoot Pro for Mac(iOS系统修复软件)
- FE File Explorer Pro for mac(文件管理器)3.1.1
- 如何在 Mac 上将 WebP 图像批量转换为 JPG?
- 使用draw.io更改形状编辑图表的方法
- 使用Movavi Photo Editor如何向视频中添加转场
- android studio开启multiDexEnabled后依然出现超出方法数的问题
- 南京IT企业环境之最深心得体会
- Hyper-V提供创建三种类型的虚拟网络
- SpringBoot作mongodb批量更新