转 html5离线储存,application cache,manifest使用体验
一、应用场景
我们通常使用浏览器缓存在用户磁盘上存储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:使用本地存储,不重新请求
转 html5离线储存,application cache,manifest使用体验的更多相关文章
- HTML5离线篇收藏--- cache manifest
自从翻译了<解读 HTML5:建议.技巧和技术>,就一直没有时间去看 HTML5 相关的东西.上周一次偶然的工作间隙折腾了下 Cache Manifest .当时直接拿博客当测试环境,虽然 ...
- 离线应用Application Cache详解
特点: 1.离线可访问 - 没有网络仍可访问整个应用 2.很小的服务器负载 - 缓存在本地,不需要到服务器请求 3.高速 ...
- 离线缓存 application cache
1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 例子:比如我们在手机或电脑上访问一个 ...
- HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- 使用HTML5开发离线应用 - cache manifest
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
- HTML5学习总结-08 应用缓存(Application Cache)
一 应用缓存(Application Cache) 1 应用缓存 HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: ...
- 6,html5的离线储存怎么用
6,html5的离线储存怎么用 客户端:(百科:或称为用户端,是指与服务器相对应,为客户提供本地服务的程序.除了一些只在本地运行的应用程序,一般安装在客户机上,需要与服务端配合运行) 在用户没有和因特 ...
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
- HTML5离线Web应用实战:五步创建成功
[IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...
随机推荐
- asp.net core合并压缩资源文件引发的学习之旅
0. 在asp.net core中使用BuildBundlerMinifier合并压缩资源文件 在asp.net mvc中可以使用Bundle来压缩合并css,js 不知道的见:http://www. ...
- uva1267 Network
https://vjudge.net/problem/UVA-1267 题意: 有一棵树,上面有一个放着水源的点s,给出一个数k,这个水源可以覆盖路径长度到s不超过k的叶子节点.现在需要把所有的叶子节 ...
- 在Ubuntu上安装arm-linux-gcc的问题
由于之前将Ubuntu的更新关掉了,所以导致我下载32位兼容包一直出错. 在arm-linux-gcc 安装之后,还不能编译程序的话,首先看自己的系统是多少位的,因为网上大部分的安装包都是32位的,所 ...
- C++ Primer Plus 6 第二章
// myfirst.cpp--displays a message #include <iostream> // a PREPROCESSOR directive int main() ...
- 线段树专题—ZOJ1610 Count the Colors(涂区间,直接tag标记)
Painting some colored segments on a line, some previously painted segments may be covered by some th ...
- 【codevs1001】[bzoj1050]舒适的路线
给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径上最大边和最小边的比值最小. ...
- python之路第二篇(基础篇)
入门知识: 一.关于作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 10 == 10: name = 'allen' print name 以下结论对吗? ...
- cocos2dx - 在MFC中使用cocos2dx
本节主要讲一下如何在MFC窗口中使用cocos2dx 在做比较复杂的游戏,有时需要通过一些工具来编辑生成关卡或者特效,技能等的配置文件.为了方便配置,需要可以通过修改参数直观得到显示的效果.这就需要将 ...
- spring中WebApplicationContextUtils类说明
WebApplicationContextUtils是一个抽象类,其提供了一个很便利的方法来获取spring应用的上下文即WebApplicationContext. 其中的静态方法getWebApp ...
- win10 UWP 应用设置
win10 UWP 应用设置 简单的把设置需要的,放到微软自带的LocalSettings LocalSettings.Values可以存放几乎所有数据 如果需要存放复合数据,一个设置项是由多个值组成 ...