HTML5离线缓存Manifest是什么


Posted in HTML / CSS onMarch 09, 2016

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

什么是manifest?

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

它有三大优势

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

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

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

如何使用?

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html manifest="demo.appcache">  
  3. ...   
  4. </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复制内容到剪贴板
  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的相关内容介绍,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/hutuzhu/p/4871666.html

HTML / CSS 相关文章推荐
css3高级选择器使用方法
Dec 02 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 #HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 #HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 #HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 #HTML / CSS
HTML5如何实现元素拖拽
Mar 11 #HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 #HTML / CSS
You might like
福利彩票幸运号码自动生成器
2006/10/09 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python模块导入的细节详解
2018/12/10 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
干部四风问题整改措施思想汇报
2014/10/13 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python