HTML5 offline storage, application Cache,manifest use experience

Recently added a forum module in the APP, in order to complete quickly, decided to make the entire forum module WEB app,web APP The most deadly is the user experience problem, page jump and too many requests, greatly affected the loading speed and user experience, this time I think of HTML5 offline storage.

After a simple understanding, I think this can be, but soon I found that HTML5 offline storage is not suitable for this project. The reasons are as follows: 1. Once the page has been assigned a manifest, the page must be stored. If there is a dynamic page, do not want to cache the contents of the page, just want to cache the page refers to the css,js,img, but sorry, there is no way to do it. I think it is because the browser and server established interaction logic that must be designed to do so, otherwise I would not understand the designers. 2, page.html?id=1 and page.html?id=2 are stored as two HTML different pages, think of when the user browsed 1000 different posts, the browser downloaded stored 1000 meaningless pages. 3, the first time to access Page.html?id=1, after the successful cache. Again access page.html?id=2, will not read the cache, because the parameter is changed, is considered to be different, not a second request, so the request page.html?id=2 will still reload manifest the specified file. 4, and I in order to quickly complete, in and out of the hierarchy have made a page jump, inevitably pass a lot of parameters, and each post is not the same ID, so in this case the offline cache is basically meaningless, because a large number of requests belong to the first visit. 5, again, according to the information on the Internet, the offline storage will be downloaded once the corresponding data, meaning that,On the first visit, pages loaded with offline storage technology consumed more time than pages that did not use the technology and consumed more traffic. Therefore, manifest is extremely unsuitable for use with dynamic parameter page jumps, preferably a page, and then a full Ajax request. Additional information: http://www.cnblogs.com/svage/archive/2011/11/24/2261365.html HTML5 offline application application Cache

First, the application scenario

We typically use the browser cache to store Web pages on a user's disk, saving bandwidth when the user browses again, but even then, the web cannot be accessed without the Internet. In order for the Web application to be accessed offline. The HTML5 provides offline storage functionality through the application cache API. The premise is that the Web page you need to visit has been visited at least once online.

What is the difference between offline local storage and traditional browser caching?

1, the browser cache mainly contains two categories:

A. Cache negotiation: Last-modified,etag

The browser asks the server if the page has been modified, and if it returns 304 without modification, the browser browses to the local cache file directly. Otherwise the server returns new content.

B. Thorough caching: Cache-control,expires

The cache expiration time is set through expires and no interaction with the server request is required until it expires.

2, offline storage for the entire Web service, browser cache cache only a single page;

3, Offline storage can specify the files that need to be cached and which files can only be browsed online, browser cache cannot be specified;

4, offline storage can dynamically notify users to update.

Second, how to achieve

Offline storage is managed through manifest files, requires server-side support, and different server-enabled ways are different.

The CACHE manifest//must start with this
Version 1.0//best definition Edition, only need to modify the version number when updating
CACHE:
    M.png
    Test.js
    Test.css
NETWORK:
    *
FALLBACK
    Online.html offline.html

The cache specifies the files that need to be cached, the network specifies files that are only browsed through the network, * represents files in addition to the cache; fallback each line specifies the files to be used online and offline, respectively

To have manifest manage the store, you also need to define the manifest attribute in the HTML tag, as follows:

DOCTYPE html>
<</span>html lang= "en" manifest= ' test.manifest ' >
<</span>head>
    <</span>meta charset= "UTF-8" >
    <</span>title></</span>title>
</</span>head>
<</span>body>
    
</</span>body>
</</span>html>

Finally, don't forget that these applications require server support.

The Apache server turns on support by adding a piece of code to Conf/mime.types:

Test/cache-manifest Manifest

How IIS servers are opened:

Right---http---MIME mapping, click File type---New---extension enter manifest, type Test/cache-manifest

Third, through the JS dynamic control update

The Applicationcache object provides a number of methods and events to manage the interactive process of offline storage. By entering Window.applicationcache in the firefox8.0 console, you can see the object's

There are properties and event methods.

applicationcache.onchecking = function () {
   Check if the manifest file exists
}

applicationcache.ondownloading = function () {
   Check to have manifest or manifest files
   Updated to perform download operation
   Even if the file that needs to be cached is requested, the server has returned
}

Applicationcache.onnoupdate = function () {
   Returns 304 indicates no update, notifies the browser to use local files directly
}

applicationcache.onprogress = function () {
   When downloading the periodic trigger, you can pass it
   Get the number of files that have been downloaded
}

applicationcache.oncached = function () {
   Triggered at the end of the download, indicating a successful cache
}

Application.onupdateready = function () {
   Second load, if manifest is updated
   Triggered at the end of the download
   Do not trigger onchched
   Alert ("The local cache is being updated ... ");
   if (Confirm ("Reload the updated file")) {
       Applicationcache.swapcache ();
       Location.reload ();
   }
}

Applicationcache.onobsolete = function () {
   File not found, triggered when 404 or 401 is returned
}

Applicationcache.onerror = function () {
   Other errors related to offline storage
}

Iv. Browser interaction with the server

There was an interview question: "Description entered in the browser's address bar: What happened after http://www.baidu.com?" "。

1, the Server Return Baidu page resources, browser loading HTML

2. Browser Start parsing

3. Find link, send request to load CSS file

4. Browser Rendering page

5. Find images, send requests to load pictures, and re-render

6, send the request JS file, blocking rendering. If JS is manipulating the DOM, it will be rerender

What about browser and server interaction for pages that support offline storage?

First load page:

1-6: Ibid.

7: Pages and data that need to be cached in the request page, even if requested in previous steps (this is a power-hungry place)

8: Server returns all request files, browser for local storage

Load the page again:

1: Send Request

2: Use locally stored Offline files

3: Parse page

4: Request the service side of the manifest file, determine if there is a change, return 304 means that no change into step 5, otherwise go to step 6(Jaykon: Is this wrong?). 304 will enter 6)

5: Enter the first loading page of the 7-8(Jaykon: Note that even if this request manifest file update, but also only after the page to re-download the files inside the path, these new files will be reflected in the next visit, such as when the refresh. )

6: Use local storage, do not re-request

HTML5 offline storage, application Cache,manifest use experience