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

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

Brief introduction

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:

Offline browsing-users can browse your complete website when offline

Speed-the cache resource is local, so it loads faster.

Less server load-browsers only download resources from servers that have changed.

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

...

Or

...

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 (.manifest is recommended), so we now need the server to declare the file type of the .manifest suffix as text/cache-manifest. Taking apache as an example, we need to add: AddType text/cache-manifest. Manifest to the httpd.conf

Manifest file structure

The simple list format is as follows:

CACHE MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/main.js

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:

CACHE MANIFEST# 2010-06-18:v2# Explicitly cached 'master entries'.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Resources that require the user to be online.NETWORK:login.php/myapi http://api.twitter.com# static.html will be served if main.py is inaccessible# offline.jpg will be served in place of all images in images/large/# offline.html will be served in place of all other .html filesFALLBACK:/main.py / static.htmlimages/large/ images/offline.jpg*.html / offline.html

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 a cache manifest file is introduced into the page, then the manifest file must contain all the files (css,js,image...) needed by the current page, 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 are not accessible. 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.

CACHE MANIFEST# 2010-06-18:v3# Explicitly cached entriesindex.htmlcss/style.css# offline.html will be displayed if the user is offlineFALLBACK:/ / offline.html# All other resources (e.g. Sites) require the user to be online.NETWORK:*# Additional resources to cacheCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png

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

The application remains cached after it is offline, unless one of the following occurs:

The user cleared the browser's data storage for your site.

The manifest file has been modified. Please note: updating a file listed in the list does not mean that the browser will re-cache the resource. The manifest file itself must be changed.

The application cache is updated programmatically.

At this point, the study on "how to implement offline caching through manifest in html5" 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.