浏览器缓存机制(二)——application cache

来源：互联网发布：淘宝网上充话费编辑：程序博客网时间：2024/06/07 03:53

一.appcache

HTML5 引入了应用程序缓存，简称appcache，是专门为开发离线web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件(manifest file)，可以将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

二.描述文件(manifest file)

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

如需启用应用程序缓存，请在文档的标签中包含 manifest 属性,每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

描述文件的扩展名：以前推荐manifest，现在推荐 appcache

<!DOCTYPE HTML><html manifest="demo.appcache">...</html>

manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存（必选）
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存(可选，可以使用“*”来指示所有其他资源/文件都需要因特网连接)
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）(可选)

CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html

三.applicationCache对象

浏览器通过window.applicationCache对象来及其相应属性、接口、事件供用户构建离线应用。

这个对象有一个status属性，属性的值时常量，表示应用缓存的当前状态。

0：无缓存，即没有与页面相关的应用缓存。
1：闲置，即应用缓存未得到更新。
2：检查中，即正在下载描述文件并检查更新。
3：下载中，即应用缓存正在下载描述文件中指定的资源。
4：更新完成，即应用缓存已经更新了资源，而且所有资源已经下载完毕，可以通过swapCache()来使用了。
5：废弃，即应用缓存的描述文件已经不存在了，因此页面无法在访问应用缓存。

应用缓存还有很多相关的事件，表示其状态的改变。

checking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
error:在检查更新或者下载资源期间发生错误时触发
cached:当离线资源存储完成之后触发这个事件
downloading:当浏览器开始下载离线资源的时候会触发这个事件
progress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
updateready:当浏览器对离线资源更新完成之后会触发这个事件
noupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

四.如何更新离线缓存

1.本地手动删除，各浏览器实现方式不同。以chrome为例，输入chrome://appcache-internals/，可以查看本地的离线缓存，也可以进行删除

2.更新.manifest文件，浏览器检测到.manifest变更后，会主动更新本地缓存。（需要注意的是，假如没有更新.manifest，即使你对缓存清单里的文件进行了修改，浏览器依旧会顽强地从本地缓存里面读取修改之前的文件）
以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

3.通过update()方法手动更新。

applicationCache.update()：启动应用缓存下载进程，由于浏览器通常会主动检查.manifest文件确认缓存是否需要更新，所以大部分情况下这个方法是没必要的。但对于一些可能在浏览器里待上长达一个星期左右的应用，比如电子邮箱，这个方法就会排上用场，比如每隔1天检查下本地缓存的一些文件在服务器上是否已经更新。
applicationCache.swapCache()：如果浏览器已经更新了新的离线缓存，则切到最新的缓存去。对于已经加载解析的资源，如CSS、图片等，并不会导致其重新加载、解析一遍。唯一的变化就是，后续对缓存资源的请求，获取到的都是本地的最新缓存。需要注意的是，swapCache方法需要在updateready事件触发后调用。

五.注意点

1.如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。

2.对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。

3.浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

4.在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

五.demo

<!DOCTYPE html><html lang="en" manifest="cache.manifest"><head>    <meta charset="UTF-8" >    <title>chatRoom</title>    <link rel="stylesheet" href="css/index.css">    <link rel="stylesheet" href="css/shell.css">    <link rel="stylesheet" href="css/chatRoom.css">    <link rel="stylesheet" href="css/head.css">    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <script src="js/jq/jquery-3.1.1.js"></script>    <script src="js/socketio/socket.io.js"></script>    <script src="js/page.js"></script>    <script src="js/page.shell.js"></script>    <script src="js/page.shell.chatRoom.js"></script>    <script src="js/page.model.js"></script>    <script src="js/page.data.js"></script>    <script>        $(function(){            page.initModule($("#page"));            console.log(window.applicationCache.status);        })    </script></head>

CACHE MANIFEST# 2017-2-22 version 0.0.6css/chatRoom.csscss/head.csscss/index.csscss/shell.cssjs/page.data.jsjs/page.model.jsjs/page.shell.jsjs/page.shell.chatRoom.jsjs/page.jsimages/b.pngNETWORK:    *

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。见下图
这里除了3是我输出的以外，其他都是浏览器自动打印的。
这里写图片描述

我再一次重新刷新页面，浏览器发现我的manifest文件并没有变化，所以：
这里写图片描述

这时我把描述文件的版本号该为0.0.7，在重新刷新，浏览器就会发现我的描述文件变化了，就会进行检查更新：
这里写图片描述

参考：
http://www.w3school.com.cn/html5/html_5_app_cache.asp

https://segmentfault.com/a/1190000000732617

0 0