HTML Application Cache offline applications

HTML Application Cache (referred HAC) is a set of interfaces for application cache resources by this socket, allows offline access to web pages, or in the case of slower speeds can quickly open the page.
After using HAC, the browser will first look in the cache to the site at the time of the request, if hit, hit the resource will be loaded, and if not, the request to the server, and then loaded.

HAC with traditional browser cache (kind 304) is different, HAC is the entire collection as a resource cached , the cache is key url entry page, rather than a single file cache.
HAC website a resource is required to inform the browser via the cache manifest (manifest), declared in resources will be added in the list of HAC page browser.
Methods manifest declared as follows:

Entrance index.html page

<!doctype html>
<html manifest="/app.manifest">
    <header>
    <script src="/app.js"></script>
    </header>
</html>

/app.manifest file

CACHE MANIFEST
/index.html
/app.js

After the browser to index.html and app.js added as a set of resources to the HAC.

In the second browser opens the page and they will find the cache in HAC and loaded.
But the browser will try to request /app.manifest file, if the request is successful, it will take both old and new versions of the manifest to the comparison, if you find the file contents change, the new version will be in accordance with the file listed in the manifest re-request over resources, and updates to the HAC years. Then if there is a file access error, it will lead HAC stop updating. But the default chrome will limit the cache size of 5MB, if the application is chrome, and want more buffer space, then the need to declare unlimitedStorage.
In the browser you can also manually run applicationCache.update () to trigger the check. Then applicationCache.status to judge whether to update the HAC.
applicationCache.status status of the following:

appCache.UNCACHED = 0; // 网页未缓存
appCache.IDLE = 1; // 闲置
appCache.CHECKING = 2; // 检查中
appCache.DOWNLOADING = 3; // 下载中
appCache.UPDATEREADY = 4; // 更新已准备完毕
appCache.OBSOLETE = 5; // 更新失败

// js 内主动更新的流程
var appCache = window.applicationCache;
 
window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        window.applicationCache.swapCache();
        if (confirm('A new version of this site is available. Load it?')) {
                window.location.reload();
        }
    }
});
  
appCache.update(); // Attempt to update the user's cache.

This article is reproduced in: HTML offline use the Application Cache

Guess you like