HTML5 offline cache Manifest, html5 offline manifest
Web apps are no better than PCs, and there are performance and traffic considerations. Offline applications are becoming more and more important. Although browsers have cache mechanisms, they are often unreliable. What's more, html files cannot be cached in common cases, after the network is disconnected, everything goes over.
What is manifest?
In short, manifest allows your application to be accessible without a network.
It has three major advantages:
1. offline browsing and normal access without a network;
2. faster loading speed, and faster cache access locally;
3. Reduce the service request pressure. After the file is cached, you only need to request the file to be updated.
How to use it?
<!DOCTYPE HTML>You need to include the manifest attribute on every page of the web app you want to cache. If a page does not have the manifest attribute, it will not be cached (unless the page is explicitly specified in the manifest file ). This means that as long as the page accessed by the user contains the manifest attribute, it will be added to the application cache. In this way, you do not need to specify the pages to be cached in the manifest file.
The Manifest attribute can specify an absolute URL or a relative path. However, an absolute URL must be of the same source as the web app.A manifest file can be any extension file typeBut must have the correct mime-type, such as adding
"AddType text/cache-manifest. appcache ".
Manifest File
A manifest file is a simple text file that informs the browser of cached content (and non-cached content ).
The manifest file can be divided into three parts:
A complete manifest file:
CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html
Cache manifest is required. # It is followed by a comment. below is the file to be cached, which requires a relative path. NETWORK is the file to be loaded every time a request is sent.
You can use asterisks to indicate that all other resources/files require Internet connection:
NETWORK:*
FALLBACK is used to replace all files in the/html5/directory with "404.html" if you cannot establish an Internet connection.
Update mechanism
There are three ways to update the manifest cache:
1. Clear the browser cache;
2. The manifest file is modified, even if it is a comment (so you can update the file by modifying the comment)
3. Update by program
Cache status
In the program, you can view the cache status through the window. applicationCache attribute.
var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return ‘UNCACHED’; break; case appCache.IDLE: // IDLE == 1 return ‘IDLE’; break; case appCache.CHECKING: // CHECKING == 2 return ‘CHECKING’; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return ‘DOWNLOADING’; break; case appCache.UPDATEREADY: // UPDATEREADY == 4 return ‘UPDATEREADY’; break; case appCache.OBSOLETE: // OBSOLETE == 5 return ‘OBSOLETE’; break; default: return ‘UKNOWN CACHE STATUS’; break; };
To update the cache programmatically, you must first call applicationCache. update (). This will attempt to update the user's cache (the manifest file must be changed ). Finally, when applicationCache. status is in the UPDATEREADY status, call applicationCache. swapCache () to replace the old cache with the new one.
var appCache = window.applicationCache; appCache.update(); // Attempt to update the user’s cache. … if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // The fetch was successful, swap in the new cache. }
Note:Using update () and swapCache () in this way will not present the updated resources to users. This only allows the browser to check whether the manifest file has been updated, download the specified update content, and re-fill the app cache. Therefore, to let the user see the updated content, two page downloads are required, one is to update the app cache and the other is to update the page content.
To enable users to see the latest version of your website, set a listener to listen to the updateready event during page loading.
// Check if a new cache is available on page load. window.addEventListener(‘load’, function(e) { window.applicationCache.addEventListener(‘updateready’, function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Browser downloaded a new app cache. // Swap it in and reload the page to get the new hotness. window.applicationCache.swapCache(); window.location.reload(); } else { // Manifest didn’t changed. Nothing new to server. } }, false); }, false);
Listen to events and handle different statuses accordingly:
var appCache = window.applicationCache;
// Fired after the first cache of the manifest.appCache.addEventListener(‘cached’, handleCacheEvent, false); // Checking for an update. Always the first event fired in the sequence. appCache.addEventListener(‘checking’, handleCacheEvent, false); // An update was found. The browser is fetching resources. appCache.addEventListener(‘downloading’, handleCacheEvent, false); // The manifest returns 404 or 410, the download failed, // or the manifest changed while the download was in progress. appCache.addEventListener(‘error’, handleCacheError, false); // Fired after the first download of the manifest. appCache.addEventListener(‘noupdate’, handleCacheEvent, false); // Fired if the manifest file returns a 404 or 410. // This results in the application cache being deleted. appCache.addEventListener(‘obsolete’, handleCacheEvent, false); // Fired for each resource listed in the manifest as it is being fetched. appCache.addEventListener(‘progress’, handleCacheEvent, false); // Fired when the manifest resources have been newly redownloaded. appCache.addEventListener(‘updateready’, handleCacheEvent, false);
If the downloading of the manifest file or a specified resource in the file fails, the entire update will fail. In this case, the browser will continue to use the old application cache.
Note:
1. The capacity limit for offline site storage is 5 MB.
2. If the manifest file or an internal file cannot be downloaded normally, the entire update process will be deemed as failed, and the browser will continue to use the old cache.
3. the html that references manifest must be the same as the manifest file.
4. The relative path used in manifest. The relative reference object is the manifest file.
5. the cache manifest string should be in the first line and must be
6. the system automatically caches the HTML file that references the list file.
7. The CACHE in the manifest file has no relationship with the location sequence of NETWORK and FALLBACK. If it is an implicit declaration, it must be at the beginning.
8. The resources in FALLBACK must be the same as the manifest file.
9. When a resource is cached, the browser directly requests this absolute path to access the resources in the cache.
10. Even if the manifest attribute is not set for other pages on the site, the requested resources are also accessed from the cache.
11. When the manifest file changes, the resource request itself also triggers an update.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
