After several days of research on the offline cache of hmtl5, I checked a lot of online materials and read the books. The following is my understanding and I hope to help new users.
1. What is cache manifest?
As a web developer, the word cache is rarely heard or seen. Yes, as mentioned above, it is a cache mechanism. It can use a. manifest file to configure files that need to be cached or must be cached online. The focus is on this. manifest file. You can Google it, and I will help you sort out what you may want to know:
The server must support MIME type: text/cache-manifest
Name. manifest
2. Create the test. manifest File
Cache manifest
# Version 5.0
# Directly cached files
Cache:
# Both absolute and relative paths are acceptable.
JS/initial. js
JS/keyevent. js
JS/uianimate. js
JS/jquery. Min. js
Loading.gif
# The file to be accessed online * is a wildcard, indicating that all files not in the cache need to be accessed online.
Network:
*
# Alternative solution: online access pages, offline access pages
Fallback
Online.html off.html
Related Events
<SCRIPT> // manually update window. applicationcache. update (); applicationcache. onchecking = function () {// check whether the manifest file exists} applicationcache. ondownloading = function () {// check whether a manifest or manifest file exists. // download the file after update. // even if the file to be cached has already been returned by the server during the request} applicationcache. onnoupdate = function (e) {// returns 304, indicating that no update is available. notifies the browser to directly use the local file} applicationcache. onprogress = function () {// triggered periodically during download. You can use it to // obtain the number of downloaded files} applicationcache. oncached = function () {// Triggered after the upload ends, indicating that the cache is successful} applicationcache. onupdateready = function () {// second load, if the manifest is updated // triggered at the end of the download // onchedalert is not triggered ("the local cache is being updated... "); If (confirm (" whether to reload updated files ") {applicationcache. swapcache (); // get the cache list of the latest version, download the resource, and update the cache to the latest location. reload () ;}/// List 5 manually update the cache // If (window. applicationcache. status = Window. applicationcache. updateready) {window. applicationcache. update ();} applicationcache. onobsolete = function () {// file not found, triggered when 404 or 401 is returned} applicationcache. onerror = function () {// other errors related to offline storage} </SCRIPT>
Iii. Okay, I 've mentioned some useful and useless. Now I want to talk about the Application Scenario of mobile development. When developing the hybrid mode, the application needs to request remote resources. You need to log in and cache the resources. next time
You do not need to request the server code for the next access. when updating the code, you can apply the relevant API methods or allow the application to write the API value between two pages.
Loading.html is short for loading a simple IFRAME page, which can also be used for user login.
<!DOCTYPE html>
The zhongjian.html intermediate page starts the application IFRAME and requests this page to download the resource. After the download is complete, the loading page can be redirected to the index.html page.
<HTML id = "html" manifest = 'test. manifest '>On the index.html homepage, because the intermediate page and the offline cache have been performed, the latest code is used to determine whether the manifestfile is used to update the remote page.
<HTML id = "html" manifest = 'test. manifest '>Summary:
When the code is cached for the first time, it must be the latest, but some updates will detect the updated resources. However, you must refresh the browser to obtain the latest code. The page in the middle is to enter the homepage.
Is to ensure that the obtained resources are up-to-date. PS: this technology is actually very depressing. It is always an inexplicable error when updating the version. If you have any friends who have used this technology, please come and talk about it, if you do not understand the situation, leave a message to me ~~~
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
