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

This article mainly introduces the relevant knowledge of "how to create a zero-request no-flow website by HTML5". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to create a zero-request no-flow website in HTML5" can help you solve the problem.

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

Copy the code

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:

Copy the 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 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

Copy the code

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:

Copy the code

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.

This is the end of the content about "how to build a zero-request no-traffic website by HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.