Home >Web Front-end >H5 Tutorial >HTML5 offline caching

HTML5 offline caching

黄舟Original: 2017-02-16 14:39:351427browse

Html5 introduces application caching, which means that web applications can be cached and accessed when there is no network connection.

1.1 What is Cache Manifest

First of all, manifest is a file with the suffix minifest or appcache, which defines those files that need to be cached. Files, browsers that support the manifest file will save the file locally according to the rules of the manifest file, so that the page can be accessed without a network link.

When we configure appcache 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 appcache in the browser. If there is no change, the appcache resources will be returned directly. The basic process is like this.

1.2 Advantages of application caching:

(1) Offline browsing: users can use their applications when they are offline

(2) Faster: cached resources load faster

(3) Reduce server load: The browser only needs to download changed or updated resources from the server.

2. How to use

There is a web application with three files index.html, a.js, and b.css. Now it is necessary to cache the js and css files

1. Add <html manifest="test.manifest">

2.test.manifestThe manifest format is as follows

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

3. The mime-type of the manifest file must be text/cache-manifesttype
manifest file. The basic format is three sections: CACHE, NETWORK, and FALLBACK, of which NETWORK and FALLBACK are acceptable. options.

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.

CACHE:
a.css
http://www.php.cn/

NETWORK: (Optional)

This part is the file to be read directly, bypassing the cache, you can use the wildcard *.

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

NETWORK:
login.asp

An asterisk can be used to indicate that all other resources/files require an Internet connection : NETWORK:*

FALLBACK: (Optional)

specifies a fallback page that the browser will use when the resource cannot be accessed 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 to update the cache:

Update manifest file
Operation through javascript
Clear browser cache

Add or delete files to the manifest, you can update the cache, if we change the 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 method of js operating 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 a limit of 5MB per site).
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.
For each index.html?id=1 or index.html?id=2, the index.html page will be cached separately. You can use the chrome browserResources/Application Cache Observation
If you want to update the cache content, just modify the manifest file, such as changing the version number v1.0.1

##offline If the storage resource is updated, you can monitor it through the following code, but the first load will still be the original version

window.applicationCache.addEventListener('updateready',function(e){
    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
         window.applicationCache.swapCache();

        if(confirm("loding new?")){
            window.location.reload()
        }
    }
},false);

Html5 引入了应用程序缓存，这意味着web应用可以进行缓存，并且可以在没有网络连接的时候进行访问。

1.1 什么是Cache Manifest

首先manifest是一个后缀名为minifest或者appcache，的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。

当我们第一次正确配置appcache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的appcache，如果没有变动，就会直接把appcache的资源返回，基本流程是这样的。

1.2 应用缓存的优势：

（1）离线浏览：用户可以在应用离线时使用它们

（2）速度更快：已缓存资源，加载得更快

（3）减少服务器负载：浏览器只需从服务器删下载更改过或更新过的资源就可以了。

二、如何使用

有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来

1.在index.html里加上<html manifest="test.manifest">

2.test.manifest清单格式如下

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

3.manifest文件的mime-type必须是 text/cache-manifest类型
manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。

而第一行CACHE MANIFEST为固定格式，必须写在前面。

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。

CACHE:（必须）

标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。

CACHE:
a.css
http://www.php.cn/

NETWORK:（可选）

这一部分是要绕过缓存直接读取的文件，可以使用通配符＊。

下面的代码 “login.asp” 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK:*

FALLBACK:（可选）

指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

下面的例子中，如果无法建立因特网连接，则用 “404.html” 替代 /html5/ 目录中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中，则用 “404.html” 替代所有文件。

FALLBACK:*.html /404.html

如何更新缓存

如下三种方式，可以更新缓存：

更新manifest文件
通过javascript操作
清除浏览器缓存

给manifest添加或删除文件，都可更新缓存，如果我们更改了js，而没有新增或删除，前面例子中注释中的版本号，可以很好的用来更新manifest文件。

html5中引入了js操作离线缓存的方法，下面的js可以手动更新本地缓存。

window.applicationCache.update();

如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。

注意事项

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
引用manifest的html必须与manifest文件同源，在同一个域下。
FALLBACK中的资源必须和manifest文件同源。
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
当manifest文件发生改变时，资源请求本身也会触发更新。
对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器Resources/Application Cache观察
如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1

离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本

window.applicationCache.addEventListener('updateready',function(e){
    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
         window.applicationCache.swapCache();

        if(confirm("loding new?")){
            window.location.reload()
        }
    }
},false);

以上就是html5的离线缓存的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：html5 cross-domain communication postMessageNext article：html5 cross-domain communication postMessage

See more