How to generate HTML5 offline Web applications in ASP. NET

A major crux of a traditional web application is that when the user's network connection is poor, the application loading fails. To solve this problem, HTML5 introduces the Web offline work function. The offline function makes Web applications look similar to local applications. When the network connection is disconnected, you can continue browsing unfinished content. Another advantage of the offline function is that static content can be cached permanently, there is no cache expiration limit, which greatly accelerates the loading speed of webpages.

Offline Application Creation

Unlike the traditional caching mechanism, HTML5 defines an independent caching mechanism, which has a separate file to record the list of files to be cached, this means that you can decide which files need to be cached on your own. Offline applications seem to be a cool feature, and creating an offline web application in an ASP. NET application is also very simple. There are two steps to build an offline web application:

(1) Create an offline inventory file

HTML5 offline cache determines the cached File Based on the cache list. The following figure shows the format of the file:

It can be seen that this file starts with cache manifest. # The following content is a comment, indicating the version number of the current file. It is worth noting that when this file is updated, the application reloads the cached files. Therefore, when the cached files are updated, a standard method for the program to reload the cached files is to modify the version number in the list, in this way, the application knows that the cached files need to be reloaded. The version number of the above list is 0.2. If a file in the list is updated, you only need to change 0.2 to 0.3.

The paths in the above list are relative paths, and all relative paths are based on the paths of the list files. We can also use absolute paths to determine the files to be cached.

(2) notify the browser of the configuration information in the ASP. NET application.

The HTML5 specification specifies that this configuration file must be sent to the client in text/cache-manifest format, but there is no standard suffix to identify this type of file. In ASP. NET, a flexible method can be used to achieve this goal.

1) Save the inventory file as a separate file. You can add any suffix name, for example, save it as manifest. MF.

2) create an ASP. NET handler, manifest. ashx

The Code is as follows:

<%@ WebHandler Language="C#" Class="Manifest" %>
using System;
using System.Web;
public class Manifest : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/cache-manifest";
context.Response.WriteFile(context.Server.MapPath("manifest.mf"));
}
public bool IsReusable {
get {
return false;
}
}
}

On the home page, mark the handler as a configuration file:

The following is the ASPX page with a cache list added:

The above two steps complete the construction of the Offline Application. When the program is loaded for the first time, the cache list will be loaded and the files will be cached according to the file list in the list, when the browser loads the file again, it will not load the cached file on the server. As you can imagine, if we add some static webpages as cache files, then you only need to download these cached files for the first time, and then you can apply the files to your local application without connecting to the network.
Notes
Although offline applications are a very cool application, some problems may occur during use. When we change the page content, we will find that the modified content does not work, the reason may be that we did not upgrade the cache List version. In addition, even after the cache list is changed, the browser does not update the cached content immediately, browser Download and cache content are automatically performed in the background. Therefore, in actual development, it is best to disable this offline cache feature during development because of these troubles, before the project is released. We cannot control the browser cache process, but the Offline Application provides some interfaces. We can call these APIs to allow the browser to update the cached content, applicationcache. update () is used to update the cache content, applicationcache. swapcache () is used to load the latest web application.
Performance of offline applications in browsers
The following is the form of offline applications in various browsers. When you open a page with the app's offline function in a browser, the browser also performs differently. In Firefox, you will be prompted whether to allow the content to be saved locally, the effect is as follows:

When you click Allow, the browser automatically downloads the content to be cached and saves it to the local device. When you open the page again, the browser first loads the content stored locally.
In Chrome and Safari, the browser automatically caches the content without any prompts, but in chrome, you can view the cached content:

You can also see the current cache status. The above picture shows that the current status is Uncached, meaning that the content to be cached has not been cached. For details about the status values, refer to the HTML5 Offline Application specifications.
Summary
The preceding section describes how to apply the HTML5 offline function in ASP. NET. the settings on other platforms are similar. The difference lies in how to send cached files to the client in text/cache-manifest format. HTML5 offline applications are a very important feature in the HTML5 specification. Users can open web applications anytime and anywhere without worrying about whether the network is connected, this greatly improves the user experience of web applications and the loading speed of applications.

The article also published to the grape city control team blog:
Http://www.cnblogs.com/powertoolsteam/archive/2011/04/02/2003834.html
My personal blog:
Http://www.dang-jian.com/6b68e288-71e6-4d7c-89cd-e47e6059ab24.aspx