Manifest 离线缓存

最新推荐文章于 2023-11-16 10:15:58 发布

yingjieweb

最新推荐文章于 2023-11-16 10:15:58 发布

阅读量657

点赞数

分类专栏：本地数据存储

本文链接：https://blog.csdn.net/Marker__/article/details/103437073

版权

本地数据存储专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、认识 HTML5 离线应用

大部分网页必须要连网才能访问，但是有些时候，比如在飞机上或地下隧道，没有网络信号就无法访问网站，这对于 web 用户的体验是很不好的，因此 HTML5 引入了离线缓存的功能。

HTML5 离线存储（Offline Storage）的核心功能是：在用户没有与因特网链接时，依然可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据。HTML5 的 ApplicationCache API 提供了离线缓存的功能。在页面中的数据加载时，允许用户可以定义一些要缓存的图片、CSS、JavaScript、HTML等文件，等下次不能连网的情况下，还可以用那些缓存的文件，这就是HTML5 离线应用。

在 Web 应用中使用离线存储，避免了加载应用程序时所需的常规网络请求。如果 缓存清单（Cache Manifest）文件是最新的，浏览器就无需检查其它资源是否最新，大部分应用程序可以非常迅速地从本地缓存中加载完成。

HTML5 离线应用有三大好处：（1）用户可以离线访问 Web 应用，不用时刻保持与因特网的链接、（2）因为文件被缓存在本地，提升了页面加载速度、（3）离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力。

2、使用 manifest 文件

离线缓存技术包含两部分内容：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）

（1）manifest 缓存清单：manifest 缓存文件包含了一些需要缓存的资源清单。

（2）JavaScript 接口：提供了用于更新缓存文件的方法以及对缓存文件的操作。

Manifest 文件内容的基本格式要求如下：

第一行必须以 CACHE MANIFEST 开头

紧接着是文件的路径或注释，写在CACHE MANIFEST（或CACHE入口）后的文件将被下载到本地后缓存起来

注释必须以 # 开头

必须声明一个白名单，这个名单制定的文件将在用户链接因特网后访问，它必须在 NETWORK：下一行。

NETWORK 部分罗列的资源，无论缓存中存在与否，均从网络获取。

CACHE 部分，在进入因特网后，增加一个缓存内容，这些文件的路径必须在 CACHE：的下一行。

可选的 FALLBACK 部分提供了获取不到缓存资源时的备选资源路径。第1个文件的路径和第2个文件的路径中间有一个空格。

这个FALLBACK：的作用是：当第1个文件缓存不成功时，或无法找到时，它会缓存第2个文件。

下面例子：创建一个以 manifest 为扩展名的文件，命名为 cacheData.manifest，在这个文件中将指定一些文件的路径，如HTML、CSS、JS、Images。下面是一个完整的 manifest 文件的内容：

CACHE MANTEEST
version 1.0
login.html
static/css/i.css
static/js/mui-min.js
static/img/png/icons.png
NETWORK:       //以下资源必须在线访问
static/img/png/button=ok.png
CACHE:        //进入因特网后添加的缓存内容
static/img/png/login-slider-bg.png
FALLBACK:     //添加备份，这些文件的路径必须在FALLBACK:的下一行
static/img/png/alipay-bank=icbe.png static/img/png/alipay-bank-cmb.png

Web 应用的缓存只有在 manifest 文件被修改的情况下才会被更新，所以如果只是修改了被缓存的文件，那么用户本地的缓存还是不会被更新的，但是可以通过修改 manifest 文件的注释来告诉浏览器需要更新缓存。

创建好 cacheData.manifest 文件，下面就需要在 HTML 中指定文档的 manifest 属性为 cache.manifest 文件的路径。

<!DOCTYPE html>
<html manifest="cacheDate.manifest">
...
</html>

3、使用离线缓存

实现离线缓存需要 3 步操作，只要完成下面者三步操作，即使拔掉网线也可以访问页面。

（1）配置服务器 manifest 文件的 MIME 类型；

（2）编写 manifest 文件；

（3）在页面的 html 元素的 manifest 属性中引用 menifest 文件。

启用离线应用之后，当修改 JavaScript 代码或 CSS 代码，然后将更新内容上传到服务器，在本地刷新页面重新预览时，会无法看到最新的页面效果。那是因为本地浏览器还没更新 HTML5 的离线缓存文件。

更新 HTML5 离线缓存有 3 种方法：

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

（2）修改 manifest 文件：修改 manifest 文件中罗列的文件是不会更新缓存的，而是要更新 manifest 文件（可通过注释修改）

（3）通过javascript操作：html5 中引入了 js 操作离线缓存的方法，下面的 js 可以手动更新本地缓存。

window.applicationCache.update();

4、离线缓存应用案例

为了方便快速理解离线缓存的应用，我们通过一个简单的首页缓存演示 HTML 离线缓存的应用。整个过程只需要5步即可。

（1）添加 HTML5 Doctype。给所要缓存的首页文件 index.html 添加 HTML5 Doctype 标识，比如：

<!DOCTYPE html>
<html>
...
</html>

（2）添加 .htaccess 服务器配置支持。在创建用于缓存页面的 manifest 清单之前，首先要在 .htaccess 文件中添加以下代码：

AddType text/cache-manifest .manifest
//该指令可以确保每个manifest文件为text/cache-manifest MIME类型。
//如果MIME类型不对，那么整个清单将没有任何效果，页面将无法离线应用。

（3）创建 manifest 文件。配置服务器之后，创建 manifest 清单文件。新建一个文本文件另存名为 offline.manifest，然后：

CACHE MANIFEST
CACHE:    //声明需要缓存的文件
index.html
style.css
image.jpg
NETWORK:    //下面的文件只能在线访问
search.php
login.php
FALLBACK:    //在资源不可用的情况下将用户重定向到下面文件
/api offline.html

（4）关联 manifest 文件到 HTML 文档。设计完 manifest 文件和 HTML 文档，还需要将manifest文件关联到 HTML 文档中：

<!DOCTYPE html>
<html manifest="/offline.manifest">
...
</html>

（5）测试文档。当访问页面成功后，浏览器会默认自动缓存 manifest 清单中的指定资源，此后即使服务器停止工作或无法上网，我们依然可以访问服务器上的该首页信息。

yingjieweb

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Manifest 离线缓存

目录1、认识 HTML5 离线应用2、使用 manifest 文件3、使用离线缓存4、离线缓存应用案例1、认识 HTML5 离线应用大部分网页必须要连网才能访问，但是有些时候，比如在飞机上或地下隧道，没有网络信号就无法访问网站，这对于 web 用户的体验是很不好的，因此 HTML5 引入了离线缓存的功能。HTML5 离线存储（Offline Storage）的核心功能是...
复制链接

扫一扫