Create a mobile Web App for offline use

Recently, the company held a technology competition, I worked with colleagues to create a mobile Web App called 10K hours, can help you through 10,000 hours of effort to become an expert in a field. Just a short time ago translated a book "HTML5 Mobile Development Cookbook", the Chinese translation here. It is mentioned that many mobile Web development best practices, just to use the 10K hours this application. One of the things I find very useful, but a headache, is AppCache: It allows users to use the Web App when they visit a Web page, next time they can't access the network, but when the page resources are cached, it's very difficult to update them. Here are the details and tips for using the app cache:

What is AppCache

Here is an explanation from the consortium:

In order to enable the users to continue interacting with WEB applications and documents even when their network connection are Unavailable-for instance, because they is traveling outside of their ISP ' s coverage area-authors can provide a manif EST which lists the files that is needed for the WEB application to work offline and which causes the user's browser to K Eep a copy of the files for use offline.

In a nutshell, developers can access static resources of the site in part or in full, in the event of a network problem.

Maybe some friends will wonder AppCache and browser auto-cache and Localstorage, here I briefly say: Under the default settings, the browser will automatically cache the static file according to the request header, but when the file is requested, the HTTP Request, and once the file is cached by AppCache, the HTTP request is not sent unless the cache update is manually triggered, and Localstorage is a cache, but it caches the data, and AppCache caches the file.

How to use AppCache

There are generally three steps to introduce AppCache:

1. Declaring the manifest file

Manifest can tell the browser the cache behavior of the website, here is an example of a complete manifest file:

2. CACHE MANIFEST
4. # Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)
8. CACHE:
10. index.html
12. stylesheet.css
14. images/logo.png
16. scripts/main.js
20. NETWORK:
22. myApp/api
24. http://api.twitter.com
28. FALLBACK:
30. images/large/ images/offline.jpg

CACHE MANIFESTIndicates that the file is used for AppCache configuration and must be placed on the first line

# Time: Wed May 22 2013 17:07:07 GMT+0800 (CST)is a timestamp that triggers the update of the cached file, which is discussed in detail later.

CACHESpecifies the files that need to be cached. These files are cached in the AppCache, which are then loaded from the AppCache.

NETWORKSpecifies that the file does not need to be cached. These files are not cached in AppCache and are generally used for some dynamic pages or data.

Note: Some browsers will add an upper limit to the cache capacity, for example, the Chrome browser uses a common cache pool, and if the upper limit is exceeded, previously cached files may be erased.

FALLBACKSpecifies alternate files that are not available when the network is unavailable, are not read from AppCache when the network is unavailable, and are read from AppCache only when the network is unavailable. The example specifies that when images/large/ any of the files in the file cannot be accessed, the files are read from the AppCache images/offline.jpg .

We generally use the .appcache suffix as a manifest file, this is WHATWG's recommendation, and it also gets more browser support.

2. Introduce the manifest file to the page

The introduction of the manifest file requires that the manifest attribute be added to the HTML tag, with a value of manifest file address, for example:

1. manifest="example.appcache">
2. ...

Note: You need to add the manifest property to each page that uses AppCache, unless the page is in the cache list, and the page with the manifest property is automatically cached and no more cache lists are added.

3. Modify the server-side Mime-type

In order for the server side to properly handle the manifest file, it needs to be added to the Mine-type text/cache-manifest . For example, in the Apache server, you can add the following lines to the configuration file:

1. AddType text/cache-manifest .appcache

Update cache

After completing the configuration of the manifest file, you will find that your page loading speed is exploding, can be counted as seconds, but you will also be sad to find that any changes to the file will not be reflected on the page, then when we have the file changes should be how to do?

Modify the manifest file

There are two scenarios that can cause cache updates:

1. The user clears the cached data.
2. Manifest file modification.

So we have to update the cache, in fact there is only one way, that is to modify the manifest file. This time we can see in the last example that the annotated timestamp ( # Time: Wed May 22 2013 17:07:07 GMT+0800 (CST) ) function, whenever any of the cached files modified, we should modify the manifest file timestamp, let the browser know that there is a file change, should update the cache.

When the browser detects a change to the manifest file, it initiates a request to update all cached files, but it is not immediately updated to the page and requires the user to refresh the page again to see the new content. That is, when we have a file modification, it takes a user to refresh two times to see the new content, which is a strange experience for the user. At this point we can use some of the interfaces provided by AppCache to solve this problem.

AppCache interface

The AppCache provides the following event interfaces:

• checking: The client is checking for updates to the manifest file or is triggered when attempting to download the manifest file. Note: This event is always triggered first.
• noupdate: The client examines the manifest file and fires when the manifest file is not updated.
• downloading: The client discovers that the manifest file needs to be updated and starts updating, or triggers when the cache file listed in manifest is started to download.
• progress: triggered when the client downloads a large cache file in the manifest column.
• cached: The files in the manifest are downloaded and triggered later by the cache.
• updateready: When the new cache file is downloaded, you can use Swapcache () to apply the new file.

The most important of these is the event, which updateready we can use to bind this event and automatically refresh when the cache is updated to apply these updates, for example:

2. // Check if a new cache is available on page load.
4. window.addEventListener(‘load‘, function(e) {
8. Window.. Addeventlistener ( ' updateready ' , function (e{ /span>
10. if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
12. // Browser downloaded a new app cache.
14. // Swap it in and reload the page to get the new hotness.
16. window.applicationCache.swapCache();
18. if (confirm(‘A new version of this site is available. Load it?‘)) {
20. window.location.reload();
22. }
24. } else {
26. // Manifest didn‘t changed. Nothing new to server.
28. }
30. }, false);
34. }, false);

AppCache's Debug

When we debug locally, how do we know if AppCache works and what files are cached? Chrome's developer tools provide this information, open the developer tools, and see which files are cached in the resource. Application cache, as shown in:

However, you cannot delete the cache here, nor can you see the cache for other sites. If you want to see all of the site's AppCache information, and delete one of them, you can go to chrome://appcache-internals/, this administration page will list all the AppCache information in the browser, including manifest address, cache size , update time, creation time, etc.??

Create a mobile Web App for offline use