Experience h5 offline cache

Summary

Application Cache is a mechanism of the browser itself. With the advent of the mobile Internet era, if we have cached the required files, we can continue to access them once the network is inaccessible. It can not only improve the user experience, but also directly access local files when there is a network, reduce network requests and save traffic.

Manifest

The manifest attribute specifies the location of the document's cached manifest.

E.g:

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/test.js"></script>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

Application caching enables applications to have three advantages:

Offline browsing - users can use the app while offline
fast - cached resources load faster
Reduce server load - browsers only download updated/changed resources from the server

The manifest attribute should be included for every page in your web application that you want to cache.

The manifest file is a simple text file that lists the resources that the browser caches for offline access.

simple syntax

<html manifest="URL">

The url can be an absolute path or a relative path.

The content of the manifest file is divided into three parts:

CACHE MANIFEST - files listed under this heading will be cached after the first download
NETWORK - The files listed under this heading require a connection to the server and will not be cached.
FALLBACK - The files listed under this heading specify fallback pages (such as 404 pages) when the page is unreachable

For example, a complete manifest content is as follows:

CACHE MANIFEST
#2018-04-16 v1.0.0

/css/main.css
/js/test.js

NETWORK:
test.html

FALLBACK:
404.html

Note: Lines starting with "#" are comment lines, but can also serve other purposes. An application's cache is updated when its manifest file changes. If you edit an image, or modify a js, css file, these changes will not be re-cached. Updating the date and version numbers in the comment line is a way to get the browser to recache the file.

release

Publish site, deployed on iis.

Add mini-type type, the type must be: text/cache-manifest

Browsing, if in Google Chrome, we can view the cached local resource files by visiting chrome://appcache-internals/

No resource files are cached at this time.

Visit our published site.

Network requests can also be viewed via f12.

If it is, you need to modify the style or js file of the page. If you want the file to be re-cached, then you must also modify the mainifest file, the modification date and the version number.

For example, the above css and js file is an empty file, then now we add a function, and then check whether the locally cached js file has changed

function getDate() {
    alert("2018-04-17")
};
getDate();

It is a convenient way to update the version number in the manifest file, and it can also be controlled by the js file.

window.applicationCache.update();

Summarize

Offline application advantages: 1. Offline browsing. 2. Fast. 3. Reduce server requests.

When updating the file, you need to pay attention to the need to update the manifest file version number.

How to update the local cache through js, you can refer to this article:

https://www.cnblogs.com/PeterSpeaking/p/5912221.html