HTML5 manifest离线缓存

时间 2019-11-16

标签 html5 html manifest 离线缓存栏目 HTML5 繁體版

原文原文链接

简介

离线访问对基于网络的应用而言愈来愈重要。虽然全部浏览器都有缓存机制，但它们并不可靠，也不必定总能起到预期的做用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。php

使用缓存接口可为您的应用带来如下三个优点：css

离线浏览 - 用户可在离线时浏览您的完整网站
速度 - 缓存资源为本地资源，所以加载速度较快。
服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。

应用缓存（又称 AppCache）可以让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即便用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。html

引用清单文件

要启用某个应用的应用缓存，请在文档的 html 标记中添加 manifest 属性：
manifest 属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可以使用任何文件扩展名，但必须以正确的 MIME 类型提供（参见下文）。apache

<html manifest="/cache.manifest">
  ...
</html>

或

<html manifest="http://www.example.com/example.mf">
  ...
</html>

您应在要缓存的网络应用的每一个页面上都添加 manifest 属性。若是网页不包含 manifest 属性，浏览器就不会缓存该网页（除非清单文件中明确列出了该属性）。
这就意味着用户浏览的每一个包含 manifest 的网页都会隐式添加到应用缓存。所以，您无需在清单中列出每一个网页。编程

清单文件必须以 text/cache-manifest MIME类型提供。文件后缀名能够自定义（建议为.manifest）因此咱们须要如今服务端将.manifest后缀的文件类型声明为text/cache-manifest。
以apache为例，咱们须要在httpd.conf中加上：AddType text/cache-manifest .manifestsegmentfault

清单文件结构

简单的清单格式以下：api

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

该示例将在指定此清单文件的网页上缓存四个文件。浏览器

您须要注意如下几点：缓存

CACHE MANIFEST 字符串应在第一行，且必不可少。
网站的缓存数据量不得超过 5 MB。不过，若是您要编写的是针对 Chrome 网上应用店的应用，可以使用 unlimitedStorage 取消该限制。
若是清单文件或其中指定的资源没法下载，就没法进行整个缓存更新进程。在这种状况下，浏览器将继续使用原应用缓存。

咱们再来看看更复杂的示例：服务器

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/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 files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

以“#”开头的行是注释行，但也可用于其余用途。例如更新缓存
应用缓存只在其清单文件发生更改时才会更新。例如，若是您修改了图片资源或更改了 JavaScript 函数，这些更改不会从新缓存。您必须修改清单文件自己才能让浏览器刷新缓存文件。使用生成的版本号、文件哈希值或时间戳建立注释行，可确保用户得到您的软件的最新版。
您还能够在出现新版本后，以编程方式更新缓存，如更新缓存部分中所述。

若是页面引入了缓存清单文件，那么清单文件必须包含当前页面须要的全部文件（css，js，image...），不然不会被加载，因此除去固定须要缓存的文件，建议在文件中的NETWORK一项加上星号*,表示其他全部文件

清单可包括如下三个不一样部分：CACHE、NETWORK 和 FALLBACK。

CACHE：

这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。

NETWORK：

此部分下列出的文件是须要链接到服务器的白名单资源。不管用户是否处于离线状态，对这些资源的全部请求都会绕过缓存。可以使用通配符。

FALLBACK：

此部分是可选的，用于指定没法访问资源时的后备网页。其中第一个 URI 表明资源，第二个表明后备网页。两个 URI 必须相关，而且必须与清单文件同源。可以使用通配符。
请注意：这些部分可按任意顺序排列，且每一个部分都可在同一清单中重复出现。

如下清单定义了用户尝试离线访问网站的根时显示的“综合性”网页 (offline.html)，也代表了其余全部资源（例如远程网站上的资源）均须要互联网链接。

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

请注意：系统会自动缓存引用清单文件的 HTML 文件。所以您无需将其添加到清单中，但咱们建议您这样作。

请注意：HTTP 缓存标头以及对经过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。所以，经过 https 提供的网页可实现离线运行。

更新缓存

应用在离线后将保持缓存状态，除非发生如下某种状况：

用户清除了浏览器对您网站的数据存储。
清单文件通过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会从新缓存该资源。清单文件自己必须进行更改。
应用缓存经过编程方式进行更新。

欢迎订阅「K叔区块链」 - 专一于区块链技术学习

博客地址： http://www.jouypub.com
简书主页： https://www.jianshu.com/u/756c9c8ae984
segmentfault主页： https://segmentfault.com/blog/jouypub
腾讯云主页： https://cloud.tencent.com/developer/column/72548