Comment: Today's web applications are already very complex, and with the current development, they will become more and more complex, but it has a fatal flaw and cannot be separated from the Internet link. Therefore, an API is added to HTML. It uses a local storage mechanism to solve this problem well and pave the way for offline web applications.
Preface
Today, web applications are already very complex, and with the current development, they will become more and more complex, but they have a fatal flaw and cannot be separated from Internet links. Therefore, an API is added to HTML.
It solves this problem well with a local storage mechanism, paving the way for offline web applications.
Local cache in browser cache
Local cache is used to serve the entire web application
Browser cache only serves a single web page</p><p>Any web page has a web page cache
Local cache only caches the pages you specified to cache</p><p>Web page cache is unreliable and unsafe because we don't know which pages and resources are cached in the website.
Local cache controls what content is cached
manifest file
The local cache of web applications is managed through the manifest file of each page. manifest is a simple text in which the names and paths of files that need to be cached and do not need to be cached in the form of a manifest.
You can specify manifest for each page or for the entire application. For example, we set it for hello.htm:
CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
NETWORK:
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.html
newhellow.js
In the manifest file, the first line must be CACHE MANIFEST to tell the browser the function of text, that is, to set the resource files in the local cache.
When actually running offline web applications, the server needs to be configured to enable the server to support the mime type text/cache-manifest.
When specifying the source file, resource files can be divided into three categories: CACHE, NETWORK, and FALLBACK
Because if a page has a manifest file, the browser will automatically cache the page locally</p><p>NETWORK category is an explicit resource file that is not cached. These files can only be accessed by establishing a server-side link. In this example, wildcard characters * indicate that those that are not recorded are not cached</p><p>Two resource files are specified in each line in the FALLBACK category. The first resource file is a resource file that can be used when accessed online, and the second is a local cache file that cannot be used when accessed online.
Browser and server interaction process
When working with offline web applications, it is necessary to understand the interaction between the browser and the server:
For example, if index.htm is used as the home page, the home page uses index.manifest.
Cache index.htm, hello.js, hello.jpg in the file. The process for the first access is as follows:
Browser request url
The server returns to index.htm homepage
The browser parses the index.htm web page and requests all resource files on the page.
The server returns the resource file
The browser processes the manifest file and requests the file that needs to be cached in the manifest. Even if the request has been made, it will request again.
The server returns the file that needs to be cached
The browser updates the local cache, stores the resource file, and triggers an event to notify the local cache to update</p><p>Open the URL again
Request url
The browser finds that the page is cached, so it uses the local cache file
Parsing files
Browser like server requests manifest file
The server returns 304, notifying that the manifest file has not changed (if it changes, it will be different)
applicationCache object
This object represents a local cache, which can be used to notify the user that the local cache has been updated and also allows manual update of the local cache.
Previously, when the browser updates the local cache and loads a new resource file, the updateready event of the applicationCache object will be triggered, notifying the local cache that has been modified, and then prompting the user to refresh the page manually.
swapCache
The swapCache method is used to manually perform local cached updates. It can only be called when the updateReady event of the applicationCache object is triggered.
That is, when the resource file changes, you can use this method to manually cache the update.