如何在ASP.NET中生成HTML5离线Web应用

简介:

传统的Web应用程序有一个很大的症结是当用户的网络连接不好时,应用会加载失败,为了 解决这一问题,HTML5中引入了Web的离线工作的功能。离线功能使得Web应用程序类似于本机应用程序,当断开网络连接时可以继续浏览未浏览完成的内 容,离线功能的另一个好处是可以永久缓存静态的内容,而没有缓存过期的限制,这样很大程度上加速了网页的加载速度。

 

离线应用的创建

不同于传统的缓存机制,HTML5定义了一套独立的缓存机制,有一个单独的文件来记录要缓存的文件列表,这就意味着用户可以自己决定哪些文件需要缓 存。离线应用看起来是个非常酷的特性,并且在ASP.NET应用程序中创建一个离线Web应用也是非常简单的,构建离线web应用大概可分两个步骤:

 

(1) 创建一个离线清单文件

HTML5离线缓存是基于这个缓存清单来确定缓存文件的,如下的图片显示这个文件的格式:

image

 

可以看到这个文件是以CACHE MANIFEST开头的,#后面的内容是注释,表明当前文件的版本号,值得注意的是当这个文件更新的时候,应用程序会重新加载缓存的文件,所以当缓存的文 件有更新的时候,一个让程序重新加载缓存文件的标准方法是修改这个清单中的版本号,这样应用程序就知道需要重新加载缓存的文件。上面的清单的版本号是 0.2,如果清单中的某个文件有更新,则只需要把0.2修改为0.3即可。

如上清单中的路径都是相对路径,所有的相对路径都是基于这个清单文件所在的路径的。我们也可以使用绝对路径来确定要缓存的文件的。

 

(2) 在ASP.NET应用程序中把清单信息通知给浏览器

HTML5规范规定这个清单文件必须以text/cache-manifest格式发送到客户端,但是现在没有标准的后缀来识别这一类型文件。在ASP.NET中,可以通过一种变通的方式来达到这一目的。

1)把清单文件保存为单独文件,可以加任何后缀名,假设保存为manifest.mf。

2)新建一个ASP.NET handler,Manifest.ashx

代码如下:

 


 
 
  1. <%@ WebHandler Language="C#" Class="Manifest" %> 

 


 
 
  1. using System; 
  2. using System.Web; 
  3.  
  4.  
  5. public class Manifest : IHttpHandler { 
  6.  
  7.     public void ProcessRequest (HttpContext context) { 
  8.     context.Response.ContentType = "text/cache-manifest"
  9.     context.Response.WriteFile(context.Server.MapPath("manifest.mf")); 
  10.     } 
  11.      
  12.     public bool IsReusable { 
  13.         get  
  14.         { 
  15.             return false
  16.         }    
  17.     } 
  18.  

 

然后在首页页面中把这个handler标识为清单文件:

 


 
 
  1. <html manifest="Manifest.ashx""> 

  

如下是添加了缓存清单的aspx页面:

image

以上两个步骤就完成了离线应用程序的构建,当程序第一次加载时,会加载这个缓存清单,并且根据清单中文件列表缓存文件,当浏览器再次加载时就不会去 服务器中加载缓存过的文件,可以想象,如果我们把一些静态的网页添加为缓存文件,那么用户只需要第一次下载这些缓存的文件,以后就可以向本地应用一样,无 需再连接网络。

 

需要注意的点

虽然离线应用是一个非常酷的应用,但是在使用的过程中也会出现一些困扰,当我们更改页面的内容时,会发现修改的内容并没有起作用,原因可能是我们没 有升级缓存清单的版本,另外即使缓存清单更改完成后,浏览器也并不是立即会更新缓存的内容,浏览器下载和缓存内容完全是在后台自动进行的,所以在实际的开 发过程中,因为有这些困扰,所以最好是在开发过程中禁用这种离线缓存的功能,等项目发布的时候再添加。我们无法控制浏览器的缓存过程,但是离线应用提供了 一些接口,我们可以调用这些API来让浏览器更新缓存的内容,ApplicationCache.update() 是用来更新缓存的内容,ApplicationCache.swapCache() 是加载最新版的Web应用。

 

离线应用在浏览器中的表现

以下是离线应用在各个浏览器中的表现形式,当用浏览器打开应用了离线功能的页面,浏览器的表现也是不一样的,FireFox中会提示是否容许保存内容到本地,效果如下:

image

当点击Allow,浏览器就会自动下载要缓存的内容,并保存到本地,当再次打开页面时,浏览器首先会加载本地存储的内容。

在Chrome和safari浏览器下,浏览器会自动缓存内容而不会有任何的提示,但在Chrome中你可以查看缓存的内容:

image

同时也可以看到当前缓存的状态,如上的图片显示当前的状态是UNCACHED,意思是还没有把要缓存的内容缓存。具体的状态值可以参考HTML5离线应用规范

 

总结

以上就是介绍如何在ASP.NET中应用HTML5离线功能,在其它的平台中的设置也是类似的,不同点在于如何把缓存文件以text/cache- manifest格式发送到客户端。HTML5离线应用是HTML5规范中的一个非常重要的特性,用户可以随时随地打开浏览Web应用,而不需要关心网络 是否已经连接,这极大地提高了Web应用在用户中的体验度,也极大地提高应用程序的加载速度。



本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/541414,如需转载请自行联系原作者

相关文章
|
28天前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
2月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
39 6
|
28天前
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码,支持 C# 和 Visual Basic。Razor 语法简洁易学,类似于 ASP 和 PHP。例如,在网页中加入 `@DateTime.Now` 可以实时显示当前时间。
|
1月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
39 5
|
2月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
2月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
2月前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
2月前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
41 0