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

This article mainly introduces "how to use the offline cache of html5". In the daily operation, I believe many people have doubts about how to use the offline cache of html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use the offline cache of html5". Next, please follow the editor to study!

Offline access is becoming more and more important for web-based applications. Although all browsers have caching mechanisms, they are not reliable and may not always work as expected. HTML5 uses the ApplicationCache interface to solve some of the problems caused by offline.

Using the caching interface can bring the following three advantages to your application:

Application caching, also known as AppCache, allows developers to specify which files the browser should cache for offline users to access. Even if the user presses the refresh button offline, your application will load and run normally.

Reference manifest file

To enable application caching for an application, add the manifest attribute to the html tag of the document:

The manifest attribute can point to an absolute URL or a relative path, but the absolute URL must be of the same origin as the corresponding network application. The manifest file can use any file extension, but it must be provided with the correct MIME type (see below).

You should add the manifest attribute on each page of the network application that you want to cache. If a web page does not contain a manifest attribute, the browser will not cache the web page (unless the attribute is explicitly listed in the manifest file).

This means that every web page that the user visits that contains manifest is implicitly added to the application cache. Therefore, you do not need to list each web page in the list.

The manifest file must be provided as a text/cache-manifest MIME type. The file suffix name can be customized (recommended. Manifest) so we now need the server to declare the file type of the suffix as text/cache-manifest.

Taking apache as an example, we need to add the following to httpd.conf:

Manifest file structure

The simple list format is as follows:

The example will cache four files on the web page that specifies this manifest file.

You need to pay attention to the following:

The CACHE MANIFEST string should be on the first line and is required.

The amount of cached data on the website must not exceed 5 MB. However, if you are writing an application for the Chrome online app store, you can use unlimitedStorage to remove this restriction.

If the manifest file or the resources specified in it cannot be downloaded, the entire cache update process cannot be performed. In this case, the browser will continue to use the original application cache.

Let's take a look at a more complex example:

Lines that begin with "#" are comment lines, but can also be used for other purposes. Such as updating the cache

The application cache is updated only when its manifest file changes. For example, if you modify the picture resource or change the JavaScript function, those changes are not re-cached. You must modify the manifest file itself to allow the browser to refresh the cache file. Create comment lines with the generated version number, file hash, or timestamp to ensure that users get the latest version of your software.

You can also update the cache programmatically after a new version appears, as described in the update cache section.

If the page introduces a cache manifest file, then the manifest file must contain all the files required by the current page (css,js,image... ), otherwise it will not be loaded, so to remove the files that need to be cached permanently, it is recommended to add an asterisk * to the NETWORK entry in the file to indicate all the remaining files

The list can include three different sections: CACHE, NETWORK, and FALLBACK.

CACHE:

This is the default part of the entry. The files listed under this header (or those immediately after CACHE MANIFEST) are explicitly cached after they are downloaded for the first time.

NETWORK:

The files listed below in this section are whitelist resources that need to connect to the server. All requests for these resources bypass the cache regardless of whether the user is offline or not. Wildcards can be used.

FALLBACK:

This section is optional and is used to specify a backup web page when resources cannot be accessed. The first URI represents the resource and the second represents the backup web page. The two URI must be related and must be of the same origin as the manifest file. Wildcards can be used.

Please note that these sections can be arranged in any order, and each section can be repeated in the same list.

The following listing defines the "comprehensive" page (offline.html) that appears when users try to access the root of the site offline, and indicates that all other resources, such as those on remote sites, require an Internet connection.

Please note that the HTML file that references the manifest file is automatically cached. So you don't need to add it to the list, but we recommend that you do.

Please note that the HTTP cache header and the cache limits set on web pages provided through SSL will be replaced with cache manifests. Therefore, the web pages provided by https can be run offline.

Update cach

At this point, the study on "how to use html5's offline cache" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.