A big problem with traditional Web applications is that when the user's network connection is not good, the application will fail to load. To solve this problem, HTML5 introduces the function of Web offline work. The offline function makes Web applications similar to native applications. When the network connection is disconnected, you can continue to browse the content that has not been browsed. Another advantage of the offline function is that you can permanently cache static content without the limitation of cache expiration, which greatly speeds up the loading speed of Web pages.
Creation of offline applications
Different from the traditional caching mechanism, HTML5 defines an independent caching mechanism, with a separate file to record the list of files to be cached, which means that users can decide which files to cache. Offline applications seem to be a very cool feature, and in ASP NET application is also very simple to create an offline web application. Building an offline web application can be roughly divided into two steps:
(1) Create an offline manifest file
HTML5 offline cache is based on this cache list to determine the cache file. The following image shows the file format:
It can be seen that the file starts with CACHE MANIFEST, and the comment after # indicates the version number of the current file. It is worth noting that when the file is updated, the application will reload the cached file, so when the cached file is updated, a standard method for the program to reload the cached file is to modify the version number in the list, In this way, the application knows that it needs to reload the cached file. The version number of the above list is 0.2. If a file in the list is updated, just change 0.2 to 0.3.
The paths in the above listing are relative paths, and all relative paths are based on the path where the listing file is located. We can also use the absolute path to determine the file to cache.
(2) In ASP NET application program to notify the browser of the list information
The HTML5 specification stipulates that this manifest file must be sent to the client in the text/cache manifest format, but now there is no standard suffix to identify this type of file. In ASP NET, you can achieve this goal through an alternative way.
1) Save the list file as a separate file with any suffix. Suppose you save it as manifest.mf.
2) Create an ASP NET handler，Manifest.ashx
The codes are 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 ;
- }
- }
-
- }
Then identify the handler as the list file on the home page:
- < html manifest = "Manifest.ashx" " >
The following is the aspx page with the 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 again, the cached files will not be loaded in the server. Imagine that if we add some static web pages as cache files, Then users only need to download these cached files for the first time, and then they can be like local applications without connecting to the network.
Points needing attention
Although offline application is a very cool application, there are also some problems in the process of using it. When we change the content of the page, we will find that the modified content does not work. The reason may be that we have not upgraded the version of the cache list. In addition, even after the cache list is changed, the browser will not update the cached content immediately, The browser downloads and caches content automatically in the background, so in the actual development process, because of these problems, it is best to disable this offline caching function in the development process, and add it when the project is released. We can't control the cache process of the browser, but offline applications provide some interfaces. We can call these APIs to let the browser update the cache content. ApplicationCache. update() is used to update the cache content, and ApplicationCache. swapCache() is used to load the latest version of the Web application.
Performance of offline applications in browsers
The following are the manifestations of offline applications in various browsers. When a browser opens a page with offline functions, the browser's performance is also different. FireFox will prompt whether to allow the content to be saved locally. The effect is as follows:
When you click Allow, the browser will automatically download the content to be cached and save it locally. When the page is opened again, the browser will first load the content stored locally.
In Chrome and Safari, the browser will automatically cache the content without any prompt, but you can view the cached content in Chrome:
At the same time, you can also see the current cache status. The image above shows that the current status is UNCACHED, which means that the content to be cached has not been cached. Specific status values can be referred to HTML5 offline application specification 。
summary
This is how to use ASP NET uses the HTML5 offline function, and the settings in other platforms are similar. The difference is how to send the cache file to the client in the text/cache - manifest format. HTML5 offline application is a very important feature of the HTML5 specification. Users can open and browse Web applications anytime and anywhere without caring whether the network is connected, which greatly improves the experience of Web applications among users and the loading speed of applications.
This article is from“ Grapevine Control Blog ”Blog, please keep this source http://powertoolsteam.blog.51cto.com/2369428/541414
