AD

通过应用程序缓存实现HTML5的离线浏览

对Web开发者和设计者来说,离线浏览已经越来越重要了。能让用户离线浏览一直是站点设计的目标,但却很难实现。当我们进入到HTML5的时代,这种情形却发生了改变。你可以利用应用程序缓存(ApplicationCache)接口实现这一目标了。

使用应用程序缓存,你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的。这时候你的站点工作起来就像是用户在线一样,并且他们不会感觉到和真正在线使用有任何差异。

那么,哪一部分文件是浏览器要保存的呢?这一切都定义在缓存清单文件(the cache manifest file)中。

缓存清单

缓存清单文件位于你的网站内,定义了哪些文件将被浏览器缓存保留。缓存定制有一个appcache 的拓展包,要使用这个包,你需要在html 标签中指定。

<!DOCTYPE HTML>

<html manifest=”offline.appcache”>

这段代码必须出现在每一个页面中。如果页面中没有这段代码,浏览器就不会缓存当前页面。这意味着什么呢?如果你没有在定制文件中包含当前页面,它将会被浏览器显示地保存。

缓存清单难点

还有些要注意的地方。要想使得Web服务器正确应用缓存清单,需要增加一个关于文本/缓存清单( text/cache-manifest)的新的资源媒体类型(a new mime type),否则就会出问题。要在IIS7中增加这样一个资源媒体类型,可以选择你的站点并且点击MIME Types

通过应用程序缓存实现HTML5的离线浏览

选择ADD并且输入新的资源媒体类型。

通过应用程序缓存实现HTML5的离线浏览

这需要在浏览器缓存文件之前进行。

缓存清单的结构

缓存清单分为三个部分:

¨ 缓存——定义了哪些资源是浏览器可以缓存的

¨ 网络——定义了哪些资源是需要用户在线才能使用的

¨ 备用——定义了不能被缓存的资源的备用

这个文件至少应该包含的是开始的一行CACHE MANIFEST。这是唯一必须的部分。现在缓存的大小被限制为5MB,这是能存储很多网站内容的。下面是一个完整的缓存清单文件。

CACHE MANIFEST

# Created on 8 October 2011

CACHE:

site.css

site.js

NETWORK:

login.aspx

currency.aspx

# offline.jpg will replace all images in the images folder

# offline.html will replace all html pages if they cannot be found

FALLBACK:

site/images images/offline.jpg

*.html offline.html

缓存清单文件并不难理解。以#开头的行是注释,将会被浏览器忽略。每一节分别告诉浏览器什么可以被缓存保留什么不可以,当资源找不到时需要做什么。这些节可以以任意顺序出现。

在往下走之前,有一点需要留意。一旦一个资源下载失败,整个缓存过程都会失败。一旦这样的情况发生,浏览器就会使用过去缓存保留的文件。

一定要记住这一点。

更新应用缓存

缓存资源能提升性能,但它可能不是实时的。这种情形是有可能出现的,因为一旦网站上的资源发生了更新,应用缓存却没有发生变更,除非以下情况发生:

¨ 缓存清单文件发生了改变

¨ 用户清空了临时网络文件

¨ 应用缓存通过编程更新了

为缓存清单保留版本号是个好主意,这样当你的网站发生改变时,旧的缓存资源就会被清除,新的资源被下载并被缓存保留。

应用程序缓存以及Javascript

在缓存过程中,应用程序缓存涉及到很多事件。关于缓存,我确实想不到更多场景了,除了人工更新这些缓存,或者为缓存显示写一个demo。下面就是这些事件:

¨ 实时检查——用户代理会检查更新,或者在第一次浏览时下载清单

¨ 没有更新——缓存清单文件不发生更新

¨ 在下载时——用户代理发现了更新,或者在第一次浏览时会下载清单

¨ 在进行中——用户代理在下载清单中的资源

¨ 缓存完成——下载完成,资源都被缓存

¨ 准备好更新——资源已经被下载,可以通过调用swapCache更新资源

¨ 资源过时——清单中的资源要么是404页面要么是410页面,则应用程序缓存被删除。

¨ 资源错误——可能有多种原因。比如清单中的资源为404页面要么是410页面。或者清单文件在资源更新时发生了改变。

创建事件句柄是很简单的。

var appCache = window.applicationCache;

function logEvent(e) {

console.log(e);

}

function logError(e) {

console.log(“error ” + e);

};

appCache.addEventListener(‘cached’, logEvent, false);

appCache.addEventListener(‘checking’, logEvent, false);

appCache.addEventListener(‘downloading’, logEvent, false);

appCache.addEventListener(‘error’, logError, false);

appCache.addEventListener(‘noupdate’, logEvent, false);

appCache.addEventListener(‘obsolete’, logEvent, false);

appCache.addEventListener(‘progress’, logEvent, false);

appCache.addEventListener(‘updateready’, logEvent, false);

如果你想要在缓存清空时为用户更新页面,你可以在“准备好更新”事件中添加一些额外的代码来进行处理。

appCache.addEventListener(‘updateready’, function (e) {

appCache.swapCache();

window.location.reload();

}, false);

你可以在这里看到完整的API参考。

作者简介:Malcolm Sherida是Microsoft在ASP.NET方面的awarded MVP,精通ASP和Telerik,经常在澳大利亚和新西兰的会议以及用户组中做报告。作为一个长期使用ASP.NET的人,他关注Web技术超过10年了。他喜欢使用ASP.NET MVC工作,并喜欢使用jQuery和Javascript。他也为SitePoint和其他一些网站写一些关于ASP.NET的技术文章。

标签: 网页设计
分类: 产品
时间: 2014-04-08

相关文章

  1. 神奇的HTML5离线存储(应用程序缓存)

    前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...
  2. tomcat服务器下,html5下应用程序缓存(缓存js或css或图片)

    首先老套的记一下优势: HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源 ...
  3. 再议HTML5离线浏览

    作者简介:Malcolm Sherida是Microsoft在ASP.NET方面的awarded MVP,精通ASP和Telerik,经常在澳大利亚和新西兰的会议以及用户组中做报告.作为一个长期使用ASP.NET的人,他 ...
  4. Android的webview支持HTML5的离线应用功能详细配置

    HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用这是个非常有用的功能,但如何使Webivew支持HTML5离线应用功能呢,需要的朋友可以参考下 HTML5的离线应用功能可以使得WebApp即 ...
  5. Php output buffering缓存及程序缓存深入解析

    在php中有时为了控制程序的输出显示顺序,提供了output buffering缓存(php自身缓存机制).若Ob缓存开启,需要输出的就先存在ob缓存里,再到程序缓存里.若没有开启,则直接进入程序缓存,程序执行完毕,按照 ...
  6. UIWebView 离线浏览

    UIWebView 离线浏览 网站 : http://code4app.com/ios/UIWebView-离线浏览/51204e716803fa2949000001 实现 UIWebView 的离线浏览(缓存)功能. ...
  7. 借助空中Opera3.0浏览器,手机将能离线浏览网页

    本报讯(记者马佳)由手机门户网站空中网和Opera共同推出的免费手机浏览器--"空中Opera3.0"昨天发布.由于使用了新浏览器后,手机上网浏览速度比之前的版本提升了50%以上,因此用户的GPRS费 ...
  8. 让 JavaScript 拯救 HTML5 的离线存储

    2009-05-12 11:31:02 来源:不详 作者:佚名 在 Internet 连接无处不在的今天,我们忽然有了另外一个需求,离线 Web.Gmail, Google Reader, Zoho 这些优秀的 Web ...
  9. HTML5 离线功能介绍

    HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线存储和工作线程等功能 ...
  10. 10个最常见的 HTML5 面试题及答案

    这是选择了10个HTML5面试问题并给出了答案.这是Web 开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了.一起来看看吧. 1.新的 HTML5 文档类型和字符集是? HTML5 文档 ...
  11. HTML5 API摘要

    什么是语义化? "语义化是指用合理HTML标记以及其特有的属性去格式化文档内容. 语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA.文字浏览器以及残障人士将从中受益.对于搜索引擎或者爬 ...
  12. HTML5 APIs程序员指南

    Rich Clark是一位HTML5专家,他非常了解HTML5规范中的APIs,这篇文章中,他将介绍这些APIs的用途以及最新进展情况. 有关HTML5中的语法元素相信大家已经看到过不少介绍了,但是关于HTML5的API ...
  13. html5离线储存,application cache,manifest使用体验

    最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过 ...
  14. HTML5编程之旅 第7站 离线存储

    HTML5离线存储 初探 本文主要探讨如下内容: 一.离线存储的作用:二.离线存储的实现:三.window.applicationCache :四.示范应用. 一.离线存储的作用 1.减少网络流量,避免对同一资源的多次请 ...
  15. 如何在ASP.NET中生成HTML5离线Web应用

    传统的Web应用程序有一个很大的症结是当用户的网络连接不好时,应用会加载失败,为了 解决这一问题,HTML5中引入了Web的离线工作的功能.离线功能使得Web应用程序类似于本机应用程序,当断开网络连接时可以继续浏览未浏览 ...
  16. android WebView加载html5介绍

    viewport属性放在HTML的meta中接下来看详细代码,感兴趣的你可以参考下本文 Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Androi ...
  17. 2012年,开发人员对HTML5都有哪些期待?

    2012年开发人员对HTML5都有哪些新的期望?HTML5是一个发展中的标准,在2011年里,HTML5的发展取得了许多突破性的进展,但是它还有许多方面需要进一步的提升. HTML5开发的两大主要参与者Sencha和ap ...
  18. HTML5性能分析面面观

    从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单. 第一,从用户可读性上说,原先一大堆东西,像初学者第一次看到这些东西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些. 第二,文档编码的 ...
  19. 华丽丽的HTML5新特性

    Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣.作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技术人员.设计者.互联网爱好者们都在热议HTML5究竟能带来什么.那么就一起来窥探一下这 ...