HTML5离线缓存Manifest是什么

2020-04-21 22:50:55易采站长站整理

web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over。

什么是manifest?

简单来说manifest能让你的应用在无网的情况下也能访问。

它有三大优势

1、离线浏览,无网情况下也能正常访问;

2、更快的加载速度,缓存在本地访问速度自然更快;

3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。

如何使用?

XML/HTML Code复制内容到剪贴板

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

你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性,它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性,它都将会被加入application cache中。这样,就不用在manifest文件中指定需要缓存哪些页面了。

Manifest属性可以指定一个绝对URL或是一个相对路径,但是,一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型,但必须有正确的mime-type,比如在Apache中添加

“AddType text/cache-manifest .appcache”。

Manifest文件

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件可分为三个部分:

CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存
NETWORK – 在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

一个完整的manifest文件:

XML/HTML Code复制内容到剪贴板

CACHE MANIFEST   
# 2012-02-21 v1.0.0   
/theme.css   
/logo.gif   
/main.js   
  
NETWORK:   
login.asp   
  
FALLBACK:   
/html5/ /404.html   
  

CACHE MANIFEST是必须的,#后面是注释,下面是需要cache的文件,需要相对路径,NETWORK是需要每次请求加载的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接:
NETWORK:
*
FALLBACK是如果无法建立因特网连接,则用 "404.html" 替代 /html5/ 目录中的所有文件。

更新机制
有三种方式更新manifest缓存: