HTML5 offline application solution to create a zero-request, no-traffic website_html5 tutorial skills

Foreword

Today's Web applications are already very complex. With current development, they will become more and more complex. However, they have a fatal flaw, which is that they cannot be disconnected from the Internet. Therefore, a new API has been added to HTML,

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

Copy the code

The code is as follows:

The local cache serves the entire web application
The browser cache only serves a single web page

Any webpage has a webpage cache
The local cache only caches those pages that you specify to cache

Web page caching is unreliable and unsafe because we don’t know which pages and resources are cached in the website
Local caching can control what content is cached

manifest file

The local cache of web applications is managed through the manifest file of each page. The 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 are listed in the form of a list. .

The manifest can be specified individually for each page or for the entire application. For example, our settings for hello.htm:

Copy code

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 CACHE MANIFEST to tell the browser the role of the text, that is, to make specific settings for the resource files in the local cache.
When you actually run an offline web application at the same time, you need to configure the server so that the server supports the text/cache-manifest mime type.

When specifying file source files, resource files can be divided into three categories, CACHE, NETWORK, and FALLBACK

Copy code

The code is as follows:

Specify resource files that need to be cached locally in the CACHE category. When specifying resource files that need to be cached locally for a certain page, you do not need to specify the page itself in the CACHE category,
because if a page With a manifest file, the browser will automatically cache the page locally

The NETWORK category is resource files that are explicitly specified not to be cached. These files can only be accessed by establishing a server-side link. In this example, the wildcard * is used to indicate that those that are not recorded will not be cached

Each line in the FALLBACK category specifies two resource files. The first resource file is the resource file used when it can be accessed online, and the second is the local cache file used when it cannot be accessed online

The interaction process between the browser and the server

When working with offline web applications, it is necessary to understand the interaction process between the browser and the server:

Copy code

The code is as follows:

For example, http://LuLingniu, with index.htm as the homepage, the homepage uses index.manifest,
caches index.htm in the file, hello.js, hello.jpg, the process for the first visit is as follows:
The browser requests the url
The server returns the 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 it has been requested, it will request it again
. The server returns the file that needs to be cached.
The browser updates the local cache and saves it. Resource files and trigger an event to notify local cache updates

Open the URL again
Request url
The browser finds that the page is cached, so it uses the local cache file
to parse the file
The browser requests the manifest file from the server
and the server returns 304, Notify that the manifest file has not changed (it will be different if it changes)

applicationCache object

This object represents the local cache, which can be used to notify the user that the local cache has been updated, and also allows manual updating of the local cache.

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

The swapCache method is used to manually perform local cache 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.