一、基本概念

离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览。

二、使用方法

1. MIME type 声明

首先,因为manifest文件必须是一个MIME type为text/cache-manifest类型的存在。文件后缀名可以自定义(建议为.appcache)所以我们需要现在服务端将.appcache后缀的文件类型声明为text/cache-manifest。以apache为例,我们需要在httpd.conf中加上:

AddType text/cache-manifest .appcache

2. 在HTML文件中引入manifest文件

<!-- clock.html -->
<!DOCTYPE html>
<html manifest="clock.appcache">

其中manifest文件的后缀名必须为.appcache,并且和引入该manifest的页面同源

3. manifest文件语法

CACHE MANIFEST
# 上面这行是必须的

# 这是一行注释
# 在这个文件中的任何地方都可以添加
# 它们全部都会被忽略
  # 在注释之前可以有空格
  # 但必须是在单行前

# 空行也会被忽略

# 这些列在最开始的文件都是需要被缓存的
# 或者是那些列在"CACHE:"里的, "CACHE"头必须写在这些文件之前,如同
# 下面写好的那样
images/sound-icon.png
images/background.png
# 注意,每个文件必须单独一行

# 在线白名单中出现的这个文件,它不会被缓存,并且,
# 对该文件的引用,将绕过缓存,总是会
# 从网络中获取目标(或在用户离线时,尝试从网路上获取)
NETWORK:
comm.cgi

# 这是另一块要缓存的文件,这次只有一个css文件
CACHE:
style/default.css

我们也可以书写成这样:

CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*
  • CACHE MANIFEST:这个是必须的,并且一定要写在manifest文件开头
  • CACHE:缓存清单列表,此处列出的为需要进行离线缓存的资源文件
  • NETWORK: 白名单列表,需要与服务端进行交互获取的资源文件,此处必须列出除缓存清单列表以外所有的资源地址(可以使用通配符*星号代替),否则没有列出的资源文件将加载失败

引入manifest的页面,即使没有被列入缓存清单中,仍然会被用户代理缓存。并且无法通过白名单列表去除。

(缓存清单的文件列表可以使用绝对路径或绝对URL地址)

开启离线缓存后,我们可以在chrome中打开f12来看看资源加载有啥区别

可以看出,使用离线缓存后的资源,资源请求的状态码都变为200,并且在size栏中都被标明为(form cache),加载速度也是显而易见的。

4. 缓存如何更新?

资源被离线缓存后,无论我们在后端如何更改资源文件,客户端都不会拉取到修改过的文件。

原来,只有当manifest文件被更新后(修改文件任何地方,包括注释等),客户端才会更新离线缓存文件,并且每次都会更新全部的缓存文件,包括没有被修改的资源文件,但一般这些文件都会走304的缓存策略。

另外,在服务端修改manifest文件后,客户端第一次访问页面需要再刷新一次才能获取最新的资源。因为对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的。发现manifest改变,所有浏览器的实现都是紧随这做静默更新资源,以保证下次pv,应用到更新。(这一点很蛋疼,但还是有解决办法,请继续往下看)。

5. 离线缓存对象和事件处理

在javascript中我们可以通过window.applicationCache来访问缓存对象,对象中包含了一个status属性以及若干的待监听的事件处理器。

其中status属性代表的是当前离线应用的状态,它可能的值为:

  • UNCACHED (0):未启用离线应用
  • IDLE (1):已开启离线应用,但本地缓存的资源是最新的,并且未标记为废弃资源
  • CHECKING (2):当前更新缓存的状态为“检查中”
  • DOWNLOADING (3):当前更新缓存的状态为“下载资源中”
  • UPDATEREADY (4):当前更新缓存的状态为“更新完毕”
  • OBSOLETE (5):已开启离线应用,但缓存资源都已标记为废弃

离线缓存事件:

  1. checking:在第一次下载manifest文件时,或者检查是否需要更新时触发
  2. noupdate:manifest文件未修改,不需要下载新的缓存文件时触发
  3. downloading:准备更新缓存之前,或者第一次下载资源之前触发
  4. progress:下载资源时触发,每下载一个资源都会触发一次
  5. cached:页面首次启用离线缓存,并且离线缓存下载完毕时触发
  6. updateready:资源更新完毕时触发
  7. obsolete:加载manifest文件时遇到401或404错误时触发
  8. errorEvent加载manifest文件时遇到401或404错误时触发

这样,我们就可以通过updateready事件来让离线缓存更新后自动刷新页面了,虽然还是比较挫:

applicationCache.addEventListener(‘updateready’, function(){
       location.href=”test.html”;
}, false);

6. 离线缓存的下线

要将离线缓存下线,我们只需要将服务端的manifest文件删除即可,同时也要将HTML中的  manifest="manifest.appcache" 删除(不删也可以,会在console控制台报错,但不会影响页面访问),删除后用户再第一次访问还是原来的缓存页面,还需要再刷新一次。。。蛋疼吧。

posted @ 2015-06-22 16:59 白牙青森 阅读(3087) 评论(3) 推荐(4)
摘要: 一、META/LINK相关:1、百度禁止转码通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告,非常之恶心。不过我们可以通过这个meta标签来禁止它:相关链接:SiteApp 转码声明2、添加到主屏后的标题(IOS)3、启用 WebApp 全屏模式(IOS)当网站添加到主屏幕... 阅读全文
posted @ 2015-05-19 17:48 白牙青森 阅读(2956) 评论(4) 推荐(12)
摘要: 浏览器前进与回退操作在传统的浏览器中我们只能通过调用window.history对象的forward()、back()或go(number|url)方法来进行页面的前进、回退或跳转到某一页面。而Ajax技术出现出现后我们常常用来实现页面无刷新的局部渲染效果,但却无法对无刷新的页面进行前进和后退的操作... 阅读全文
posted @ 2015-04-16 16:12 白牙青森 阅读(487) 评论(0) 推荐(0)
摘要: 转自:http://www.cnblogs.com/2050/p/3877280.html在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不... 阅读全文
posted @ 2015-04-12 10:51 白牙青森 阅读(509) 评论(0) 推荐(0)
摘要: 在前端开发中,我们经常需要对某些事件进行监听。这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作。而js中事件监听方法总共有三种,分别如下所示:element.addEventListener(type, listener[, useCapture]); // IE6~8不支持el... 阅读全文
posted @ 2015-03-25 16:40 白牙青森 阅读(329) 评论(0) 推荐(0)
摘要: Angular服务是一个由服务工厂创建的单例对象。这些服务工厂是由service provider 依次创建的。而service providers是构造函数。它们必须包含一个$get属性用于在实例化的时候返回服务工厂。当你请求一个服务,$injector负责找到正确的service provide... 阅读全文
posted @ 2015-03-24 20:33 白牙青森 阅读(944) 评论(0) 推荐(0)
摘要: 什么是shadow dom?首先我们先来看看它长什么样子。在HTML5中,我们只用写如下简单的两行代码,就可以通过标签来创建一个浏览器自带的视频播放器控件。 而在各个浏览器中,它都有各不相同的外观展现,例如chrome中它长下面这样:但为什么我们在dom中无法看到他们内部的结构?噢,实际上浏览... 阅读全文
posted @ 2015-03-16 18:34 白牙青森 阅读(4798) 评论(2) 推荐(4)
摘要: 什么是Web Component?Web Components 包含了多种不同的技术。你可以把Web Components当做是用一系列的Web技术创建的、可重用的用户界面组件的统称。Web Components使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件。但截至本文时间,Web Co... 阅读全文
posted @ 2015-03-13 00:30 白牙青森 阅读(1749) 评论(1) 推荐(0)
摘要: javascript中,值非null的对象在if()中都会被判断为true:if([]) {// true}if({}) {// true}if(null) {// false}if("") {// false}if(0) {// false} 阅读全文
posted @ 2015-02-12 15:20 白牙青森 阅读(2333) 评论(0) 推荐(0)
摘要: window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。注意:如果想得到连贯的逐帧动画,函数中必须重新调用requestAnimationFrame()。如果你... 阅读全文
posted @ 2015-02-08 11:55 白牙青森 阅读(860) 评论(0) 推荐(0)
点击右上角即可分享
微信分享提示