HTML5的离线缓存Manifest是什么

这篇文章主要介绍“HTML5的离线缓存Manifest是什么”，在日常操作中，相信很多人在HTML5的离线缓存Manifest是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5的离线缓存Manifest是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的双柏网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

什么是manifest?

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

它有三大优势：

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

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

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

如何使用？

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

1.   

2.   

3. ...   

4.   

你需要在你想要缓存的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复制内容到剪贴板

1. CACHE MANIFEST   

2. # 2012-02-21 v1.0.0   

3. /theme.css   

4. /logo.gif   

5. /main.js   

6.   

7. NETWORK:   

8. login.asp   

9.   

10. FALLBACK:   

11. /html5/ /404.html   

12.   

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

更新机制
有三种方式更新manifest缓存：
1、用户清空浏览器缓存；
2、manifest文件被修改，哪怕是注释（所以可以通过修改注释来更新文件）
3、由程序来更新

缓存状态
在程序可以通过window.applicationCache属性来查看缓存状态。

C/C++ Code复制内容到剪贴板

1. var appCache = window.applicationCache;   

2.     

3. switch (appCache.status) {   

4.     

5.   case appCache.UNCACHED: // UNCACHED == 0  

6.     

7.     return ‘UNCACHED’;   

8.     

9.     break;   

10.     

11.   case appCache.IDLE: // IDLE == 1  

12.     

13.     return ‘IDLE’;   

14.     

15.     break;   

16.     

17.   case appCache.CHECKING: // CHECKING == 2  

18.     

19.     return ‘CHECKING’;   

20.     

21.     break;   

22.     

23.   case appCache.DOWNLOADING: // DOWNLOADING == 3  

24.     

25.     return ‘DOWNLOADING’;   

26.     

27.     break;   

28.     

29.   case appCache.UPDATEREADY:  // UPDATEREADY == 4  

30.     

31.     return ‘UPDATEREADY’;   

32.     

33.     break;   

34.     

35.   case appCache.OBSOLETE: // OBSOLETE == 5  

36.     

37.     return ‘OBSOLETE’;   

38.     

39.     break;   

40.     

41.   default:   

42.     

43.     return ‘UKNOWN CACHE STATUS’;   

44.     

45.     break;   

46.     

47. };   

48.   

为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache（要求manifest文件已经改变）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时， 调用applicationCache.swapCache()，旧的cache就会被置换成新的。

C/C++ Code复制内容到剪贴板

1. var appCache = window.applicationCache;   

2.     

3. appCache.update(); // Attempt to update the user’s cache.  

4.     

5. …   

6.     

7. if (appCache.status == window.applicationCache.UPDATEREADY) {   

8.     

9.   appCache.swapCache();  // The fetch was successful, swap in the new cache.  

10.     

11. }   

12.   

注意：像这样使用 update()和swapCache()并不会将更新后的资源 呈现给用户。这仅仅是让浏览器检查manifest文件是否发生了更新，然后下载指定的更新内容，重新填充app cache。因此，要让用户看到更新后的内容，需要两次页面下载，一次是更新app cache，一次是更新页面内容。

为了让用户能看到你的站点的最新版本，设置一个监听器来监听页面加载时的updateready 事件。

C/C++ Code复制内容到剪贴板

1. // Check if a new cache is available on page load.  

2.     

3. window.addEventListener(‘load’, function(e) {   

4.     

5.   window.applicationCache.addEventListener(‘updateready’, function(e) {   

6.     

7.     if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {   

8.     

9.       // Browser downloaded a new app cache.  

10.     

11.       // Swap it in and reload the page to get the new hotness.  

12.     

13.       window.applicationCache.swapCache();   

14.         window.location.reload();   

15.     

16.     } else {   

17.     

18.       // Manifest didn’t changed. Nothing new to server.  

19.     

20.     }   

21.     

22.   }, false);   

23.     

24. }, false);   

监听事件，对不同的状态做出相应处理：

C/C++ Code复制内容到剪贴板

1. var appCache = window.applicationCache;   

2.   

3. // Fired after the first cache of the manifest.  

4.   

5. appCache.addEventListener(‘cached’, handleCacheEvent, false);   

6.     

7. // Checking for an update. Always the first event fired in the sequence.  

8.     

9. appCache.addEventListener(‘checking’, handleCacheEvent, false);   

10.     

11. // An update was found. The browser is fetching resources.  

12.     

13. appCache.addEventListener(‘downloading’, handleCacheEvent, false);   

14.     

15. // The manifest returns 404 or 410, the download failed,  

16.     

17. // or the manifest changed while the download was in progress.  

18.     

19. appCache.addEventListener(‘error’, handleCacheError, false);   

20.     

21. // Fired after the first download of the manifest.  

22.     

23. appCache.addEventListener(‘noupdate’, handleCacheEvent, false);   

24.     

25. // Fired if the manifest file returns a 404 or 410.  

26.     

27. // This results in the application cache being deleted.  

28.     

29. appCache.addEventListener(‘obsolete’, handleCacheEvent, false);   

30.     

31. // Fired for each resource listed in the manifest as it is being fetched.  

32.     

33. appCache.addEventListener(‘progress’, handleCacheEvent, false);   

34.     

35. // Fired when the manifest resources have been newly redownloaded.  

36.     

37. appCache.addEventListener(‘updateready’, handleCacheEvent, false);   

如果manifest文件或者该文件中指定的某个资源下载失败，那么整个更新都会失败。在这种情况下，浏览器会继续试用老的application cache。

注意事项：

1. 站点离线存储的容量限制是5M
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 在manifest中使用的相对路径，相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行，且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时，资源请求本身也会触发更新

到此，关于“HTML5的离线缓存Manifest是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！