《十三》HTML5应用程序缓存Application Cache

最新推荐文章于 2021-12-01 21:36:28 发布

花铛

最新推荐文章于 2021-12-01 21:36:28 发布

阅读量238

点赞数

分类专栏： HTML5 文章标签： HTML5

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

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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下也可以使用*号来表示其他资源/文件都需要因特网连接。
3. 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的状态，当更新之后，自动刷新一次！

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

销毁、更新缓存：

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

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

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

花铛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《十三》HTML5应用程序缓存Application Cache

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问。
复制链接

扫一扫

专栏目录