HTML5 application caching

What is application caching technology? Application Cache

HTML5 introduces application caching technology, which means that web applications can be cached and used without a network. Used under certain circumstances, you can easily create offline applications by creating a cache manifest file.

The three advantages brought by Application Cache are:

① Offline browsing

② Improve page loading speed

③ Reduce server pressure

And all major browsers support Application Cache, even if it does not support it, it will not have any impact on the program

What is Cache Manifest

First of all, manifest is a file with the suffix name minifest , define the files that need to be cached in the file. Browsers that support the manifest file will save the files locally according to the rules of the manifest file, so that the page can be accessed without a network link.

When we configure the app cache correctly for the first time, when we access the application again, the browser will first check whether there are changes in the manifest file. If there are changes, the corresponding changes will be updated. At the same time, change the app cache in the browser. If there is no change, the resources of the app cache will be returned directly. The basic process is like this.

Features of Manifest

Offline browsing: Users can browse website content offline.

Faster speed: Because the data is stored locally, the speed will be faster.

Reduce the load on the server: The browser will only download resources that have changed on the server.

How to use

html has added a manifest attribute, which can be used to specify the manifest file of the current page.

Create a manifest file with the same name as html. For example, if the page is index.html, you can create an index.manifest file, and then add the following attributes to the html tag of index.html:

Manifest file

Let’s talk about the details of the manifest in detail. A typical manifest file code structure is as follows:

CACHE MANIFEST#version 1.3CACHE: test.cssNETWORK:*

The basic format of the manifest file is three sections: CACHE, NETWORK, and FALLBACK, of which NETWORK and FALLBACK are optional.

The first line of CACHE MANIFEST is in a fixed format and must be written in front.

Comments starting with # are usually written with a version number on the second line, which is used to change the role of the manifest when the cached file is updated. It can be a version number, timestamp or md5 code, etc. wait.

CACHE: (required)

Identifies which files need to be cached, which can be a relative path or an absolute path.

a.csshttp://yanhaijing.com/a.css

NETWORK: (Optional)

This part is to bypass the cache and read it directly For files, you can use the wildcard character *.

The following code "login.asp" will never be cached and is not available offline:

NETWORK:login.asp

can be used Asterisk to indicate that all other resources/files require an Internet connection:

NETWORK:*
FALLBACK: (Optional)

Specifies a fallback page when the resource is unavailable When accessed, the browser will use this page. Each record in this section lists two URIs—the first represents the resource and the second represents the fallback page. Both URIs must use relative paths and have the same origin as the manifest file. Wildcard characters can be used.

In the following example, if the Internet connection cannot be established, all files in the /html5/ directory will be replaced with "404.html".

FALLBACK:/html5/ /404.html

In the following example, use "404.html" to replace all files.

FALLBACK:*.html /404.html

How to update the cache

There are three ways: You can update the cache:

Update the manifest file

Through javascript operation

Clear the browser cache

Add or delete files to the manifest, you can update the cache, If we change js without adding or deleting, the version number in the comment in the previous example can be used to update the manifest file.

HTML5 introduced the js method to operate offline cache. The following js can manually update the local cache.

window.applicationCache.update();

If the user clears the browser cache (manually or using some other tool), the file will be downloaded again.

Note

Browsers may have different capacity limits for cached data (some browsers set limits for each site) 5MB).

If the manifest file or a file listed internally cannot be downloaded normally, the entire update process will fail and the browser will continue to use the old cache.

The html that references the manifest must have the same origin as the manifest file and be in the same domain.

The resources in FALLBACK must have the same source as the manifest file.

When a resource is cached, the browser directly requests the absolute path and also accesses the resource in the cache. ###

Even if the manifest attribute is not set for other pages in the site, the requested resource will be accessed from the cache if it is in the cache.

When the manifest file changes, the resource request itself will also trigger an update.

Example - Complete Manifest file

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Tips: Lines starting with "#" are comment lines, but can serve other purposes. The application's cache is updated when its manifest file changes. If you edit an image, or modify a JavaScript function, these changes will not be re-cached. Updating the date and version number in the comment line is a way to cause the browser to re-cache the file.

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> <p>需要从外部引入JS文件才能显示。</p> </body> </html>

submit Reset Code

Automatic operation

HTML5 application caching

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]