HTML5 Application Cache

HTML5引入了应用程序缓存(application cache)，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

站点离线存储的容量限制是5M

优势：

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

离线浏览：用户可在不介入网络时访问使用；
速度提升：已缓存资源加载得更快；
减少对服务器的请求：浏览器将只从服务器下载更新过或更改的资源；

缺点：

服务器资源更新之后，会显示滞后，需要多刷新一次页面。

首次载入页面时，浏览器会判断是否引入了manifest，若检测到引入，则下载并按文件规则缓存资源；再次载入页面时，便会根据manifest中规定的缓存文件使用本地缓存而不是请求服务器资源；当manifest文件更新时，页面加载已经进行，但是缓存更新尚未完成，便会先使用旧manifest所缓存的文件，同时浏览器会将新的manifest文件里的缓存文件下载下来，若想看到最次你的静态资源需要刷新下页面重新加载一次；

全量加载：当manifest文件更新时，所有的资源都要全部被下载一次，并且其中一个出现异常会导致整个manifest运行异常。
作为H5的新属性，初衷时用来构造离线应用的。缓存网站资源的话原本浏览器的缓存机制已经很好了，没必要再使用manifest做缓存。实际上因为使用反响并不好，W3C正在废弃manifest。

原理：

是基于一个新建的.appcache文件的缓存机制，通过这个文件上的解析清单离线存储资源，之后当网络处于离线状态下时，浏览器会通过被离线存储的市局进行页面展示。

浏览器如何解析mainfest?

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

使用：

如果要启用应用程序缓存，要在文档的<html>标签中包含manifest属性：

引用manifest的html必须与manifest文件同源，在同一个域下。

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

对服务器进行配置：

如果是在nginx中配置，是在conf/mime.types中添加text/cache-manifest-appcache;
如果用tomcat服务器,要在conf/web.xml中添加：
<mime-mapping>
   <extension>manifest</extension>
   <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

manifest文件告知浏览器被缓存的内容以及不缓存的内容，它的建议文件扩展名是".appcache"。manifest文件可分为三部分：
1. CACHE MANIFEST：必须，在此标题下列出的文件将在首次下载后进行缓存；
2. NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存；
NETWORK下也可以使用*号来表示其他资源/文件都需要因特网连接。
1. FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面，FALLBACK中的资源必须和manifest文件同源。

CACHE MANIFEST
# 2012-02-21 v1.0.0  //以#开头的是注释行。
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/retail/ /404.html

当manifest文件加载后，浏览器会从网站的根目录下载CACHE MANIFEST下的文件。文件位置要根据文件在服务器的实际目录，确保路径正确。
FALLBACK规定如果retail下的文件无法联网或接入失败，则用404.html代替/retail/目录中的所有文件。

监控applicationCache的状态，当更新之后，自动刷新一次！

var appCache = window.applicationCache;
appCache.addEventListener('updateready', function(){
          window.location.reload();
}, false);

销毁、更新缓存：

一旦应用被缓存，它就会保持缓存直到发生下列情况：用户清空浏览器缓存；manifest文件被修改；由程序来更新应用缓存；

如果编辑了一张图片，或者修改了一个JavaScript函数，这些改变是不会被重新的缓存的。应用的缓存会在其manifest文件更改时被更新，所以更新注释中的日期和版本号是一种使浏览器重新缓存的办法。

如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存。

来源：CSDN

作者：花铛

链接：https://blog.csdn.net/wsln_123456/article/details/103862417

标签

缓存服务器

浏览器缓存

html5

软件

缓存