如何在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,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
45 3
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
39 3
|
9天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
17 5
|
18天前
|
缓存 安全 网络安全
HTTP/2与HTTPS在Web加速中的应用
HTTP/2与HTTPS在Web加速中的应用
|
21天前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
28 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
43 2
|
1月前
|
测试技术 持续交付 PHP
PHP在Web开发中的应用与最佳实践###
【10月更文挑战第25天】 本文将深入探讨PHP在现代Web开发中的应用及其优势,并分享一些最佳实践来帮助开发者更有效地使用PHP。无论是初学者还是有经验的开发者,都能从中受益。 ###
59 1
|
1月前
|
负载均衡 监控 算法
论负载均衡技术在Web系统中的应用
【11月更文挑战第4天】在当今高并发的互联网环境中,负载均衡技术已经成为提升Web系统性能不可或缺的一环。通过有效地将请求分发到多个服务器上,负载均衡不仅能够提高系统的响应速度和处理能力,还能增强系统的可扩展性和稳定性。本文将结合我参与的一个实际软件项目,从项目概述、负载均衡算法原理以及实际应用三个方面,深入探讨负载均衡技术在Web系统中的应用。
54 2
|
1月前
|
API 持续交付 PHP
PHP在现代Web开发中的应用与未来展望####
【10月更文挑战第25天】 本文深入探讨了PHP作为服务器端脚本语言在现代Web开发中的关键作用,分析了其持续流行的原因,并展望了PHP在未来技术趋势中的发展方向。通过实例解析和对比分析,揭示了PHP如何适应快速变化的技术环境,保持其在动态网站构建中的核心地位。 ####