Solutions for creating a zero-request and no-traffic website using HTML5 offline applications _ html5 tutorial tips-

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. 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

Any webpage has a webpage Cache
The local cache only caches the pages you specified.

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:

Specify the resource files to be cached locally in the CACHE category. When you specify the resource files to be cached locally for a page, you do not need to specify the page itself in the CACHE category,
Because if a page has a manifest file, the browser automatically caches the page locally.

The NETWORK type is explicitly specifying resource files that are not cached. These files can be accessed only after a server link is established. In this example, the wildcard * is used to indicate that none of the files are cached.

Specify two resource files 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 of updates.

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.