Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to create a zero-request and no-traffic website in HTML5 offline applications. Many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.

Preface

Today, the Web application is very complex, with the current development, it will become more and more complex, but it has a fatal disadvantage that it can not be separated from the internet link, so a new API has been added to HTML.

It uses a local storage mechanism to solve this problem, paving the way for offline web applications.

Locally cached in browser cache

The code is as follows:

Local caching serves the entire web application

Browser caching is only for a single web page service

Any web page has a web page cache

The local cache caches only those pages that you specify to cache.

Web caching is unreliable and insecure, because we don't know which pages and resources are cached in the site.

Local caching can control what is cached

Manifest file

The local cache of web applications is managed by the manifest file of each page. Manifest is a simple text that lists 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 a manifest for each page or for the entire application, for example, our setting for 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 CACHE MANIFEST to tell the browser the role of the text, that is, to set up the resource file in the local cache.

At the same time, when you actually run an offline web application, you need to configure the server to support the mime type text/cache-manifest.

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

The code is as follows:

Specify the resource files that need to be cached locally in the CACHE category, and when you specify the resource files that need 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 category explicitly specifies the resource files that are not cached, which can only be accessed by establishing a server-side link. In this example, the wildcard character * is used to indicate that those that are not recorded are not cached.

Two resource files are specified in each line in the FALLBACK category, the first is the resource file that can be accessed online, and the second is the local cache file that is used when it is not accessible online

Process of interaction between browser and server

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

The code is as follows:

For example, a http://LuLingniu with index.htm as its home page, which 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 the index.htm home page

The browser parses the index.htm web page and requests all resource files on the page

The server returns the resource file

Browsers process manifest files and request files that need to be cached in manifest, and will request again even if they have been requested

The server returns files that need to be cached

The browser updates the local cache, saves the resource file, and triggers an event to notify the local cache update

Open the URL again

Request url

The browser finds that the page is cached, so it uses the local cache file

Parsing a file

A browser requests a manifest file like a server

The server returns 304informing manifest that the file has not changed (if it changes, it will be different)

ApplicationCache object

This object represents the local cache and can be used to notify the user that the local cache has been updated and to allow the local cache to be updated manually.

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 the local cache has been modified, and then prompting the user to refresh the page manually.

SwapCache

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

After reading the above, do you have any further understanding of how to build a zero-request and no-traffic website in HTML5 offline applications? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.