HTML5 offline applications-solutions for creating zero-request and no-traffic websites

Comments: Today, Web applications are already very complex and will become more and more complex in the future. However, he has a fatal weakness that cannot be separated from internet connections, therefore, an API is added to HTML, which uses a local storage mechanism to solve this problem and pave the way for offline web applications.

Preface

Today, Web applications are already very complex and will become more and more complex in the future. However, he has a fatal weakness that cannot be separated from internet connections. Therefore, an API is added to HTML,

It uses a local storage mechanism to solve this problem and pave the way for offline web applications.
Local cache in browser cache

The Code is as follows:
The local cache serves the entire web application.
Browser cache only applies to a single web page service </p> <p> Any web page has a Web page Cache
The local cache only caches the pages you specified to be cached. </p> <p> the webpage cache is unreliable and insecure because we do not know which pages and resources are cached on the website.
Local cache can control the content to be cached

Manifest File

The local cache of web applications is managed by manifest files on each page. manifest is a simple text, lists the names and paths of files to be cached that do not need to be cached.

You can define manifestor for each page. For example, we set hello.htm:

The Code is as follows:
CACHE MANIFEST
CACHE:
Other.html
Hellow. js
Images/myphoto.jpg
NETWORK:
Http: // LuLinniu/NotOffline
NotOffline. asp
*
FALLBACK:
Online. js locale. js
CACHE:
Newhellow.html
Newhellow. js

In the manifest file, the first line must be the cache manifest to inform the browser of the text, that is, to set the resource files in the local CACHE.
When running an offline web application, you must configure the server to support the mime type text/cache-manifest.

When specifying file source files, you can divide resource files into three types: CACHE, NETWORK, and FALLBACK.

The Code is as follows: </p> <p> in the CACHE category, specify the resource files to be cached locally and specify the resource files to be cached locally for a page, you do not need to specify this page in the CACHE category,
Because if a page has a manifest file, the browser automatically caches the page locally </p> <p> the NETWORK type is explicitly specified as a resource file that is not cached, these files can be accessed only when a server link is established. In this example, the wildcard * is used to indicate that no record is cached. </p> <p> two resource files are specified in each row in the FALLBACK category, the first resource file is the resource file used for online access, and the second is the local cache file used for online access.

Interaction process between browser and Server

When using offline web applications for work, it is necessary to understand the interaction process between the browser and the server:

The Code is as follows:
For example, if an http: // lulingniu takes index.htm as the home page, the home page uses index. manifest,
The process for first access is as follows:
Browser request url
Server Returns to index.htm Homepage
Access the index.htm page of the browser and request all resource files on the page.
The server returns the resource file.
The browser processes the manifest file and requests the file to be cached in the manifest, even if the request has passed
The server returns the files 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 discovers that the page is cached, So it uses the local cache file
Parsing files
A browser requests a manifest file like a server
The server returns 304, notifying the manifest file that it has not changed (if it is changed, it will be different)

ApplicationCache object

This object represents the local cache, which can be used to notify the user that the local cache has been updated, or to manually update the local cache.

When the browser updates the local cache and loads the new resource file, the updateready event of the applicationCache object is triggered, notifying the local cache that it has been modified, and then prompting the user to manually refresh the page.
SwapCache

The swapCache method is used to manually update the local cache. It can only be called when the updateReady event of the applicationCache object is triggered,

This method can be used to manually cache updates when resource files change.