H5应用缓存-Manifest的具体介绍

来源：动视网责编：小采时间：2020-11-27 15:10:00

H5应用缓存-Manifest的具体介绍

H5应用缓存-Manifest的具体介绍:导读Manifest 是 H5提供的一种应用http://www.gxlcms.com/code/6719.html target=_blank

推荐度：

点击下载本文 文档为doc格式

导读H5应用缓存-Manifest的具体介绍:导读Manifest 是 H5提供的一种应用http://www.gxlcms.com/code/6719.html target=_blank

导读

Manifest 是 H5提供的一种应用http://www.gxlcms.com/code/6719.html" target="_blank">缓存机制, 基于它web应用可以实现离线访问(offline cache). 为此, 浏览器还提供了应用缓存的api--applicationCache. 虽然manifest的技术已被web标准废弃, 但这不影响我们尝试去了解它. 也正是因为manifest的应用缓存机制如此诱人, 饿了么和 office 365邮箱等都还在使用着它!

描述

对manifest熟悉的同学可以跳过此节.

鉴于manifest应用缓存的技术, 我们可以做到:

离线访问: 即使服务器挂了, 或者没有网络, 用户依然可以正常浏览网页内容.

访问更快: 数据存在于本地, 省去了浏览器发起http请求的时间, 因此访问更快, 移动端效果更为明显.

降低负载: 浏览器只在manifest文件改动时才去服务器下载需要缓存的资源, 大大降低了服务器负载.

manifest缓存的过程如下(来自网络):

支持性

主流浏览器都支持manifest应用缓存技术. 如下表格:

H5标准中, Offline Web applications 部分有如下描述:

This feature is in the process of being removed from the Web platform. 
(This is a long process that takes many years.) 
Using any of the offline Web application features at this time is highly discouraged. Use service workers instead. [SW]

因此后续我将在其他文章中继续介绍 service workers, 本篇继续关注manifest.

如何开启应用缓存

manifest使用缓存清单进行管理, 缓存清单需要与html标签进行关联. 如下:

<html manifest="test.appcache">
 ...
</html>

在html标签中指定manifest文件, 便表示该网页使用manifest进行离线缓存. 该网页内需要缓存的文件列表需要在 test.appcache 文本文件中指定.

manifest缓存清单

就像写作文一样, manifest采用经典的三段式. 分别为: CACHE, NETWORK 和 FALLBACK. 如下, 先看一个栗子

H5应用缓存-Manifest的具体介绍

H5应用缓存-Manifest的具体介绍:导读Manifest 是 H5提供的一种应用http://www.gxlcms.com/code/6719.html target=_blank

推荐度：

点击下载本文 文档为doc格式

标签：缓存介绍应用

热门焦点

H5应用缓存-Manifest的具体介绍

H5应用缓存-Manifest的具体介绍

H5应用缓存-Manifest的具体介绍

最新推荐

猜你喜欢

热门推荐