上一章HTML5教程请查看:html5 Web存储
在本教程中,你将学习如何使用HTML5缓存特性创建离线应用程序。
什么是应用程序缓存?通常,大多数基于web的应用程序只有在你在线时才能工作。但是HTML5引入了一种应用程序缓存机制,允许浏览器自动保存HTML文件和所有其他需要在本地机器上正确显示的资源,这样浏览器仍然可以在没有互联网连接的情况下访问web页面及其资源。
以下是使用HTML5应用缓存功能的一些好处:
- 离线浏览-用户可以使用应用程序,即使他们离线或有意外中断的网络连接。
- 提高性能—缓存的资源直接从用户的机器而不是远程服务器加载,因此网页加载更快,性能更好。
- 减少HTTP请求和服务器负载——浏览器只需从远程服务器下载更新/更改的资源,从而最小化HTTP请求并节省宝贵的带宽,同时减少web服务器的负载。
使用清单缓存文件要缓存离线使用的文件,你需要完成以下步骤:
步骤1:创建缓存清单文件清单是一个特殊的文本文件,它告诉浏览器要存储什么文件,不存储什么文件,以及用其他文件替换什么文件。清单文件总是以单词缓存清单开头(大写)。下面是一个简单清单文件的例子:
缓存清单
# v1.0 : 10-08-2020
缓存:
# 页面
index.html
# 样式 &
脚本
css/theme.css
js/jquery.min.js
js/default.js
# 图片
/favicon.ico
images/logo.png
网络:
login.php
回退:
/ /offline.html
代码解释
你可能会想那是什么代码。好吧,我们直接开始吧。清单文件可以有三个不同的部分:缓存、网络和回退。
- 在缓存下列出的文件:节标头(或紧接在缓存清单行之后)在第一次下载后显式缓存。
- 在NETWORK:节标头下列出的文件是白色列表的资源,它们从不被缓存,也不能离线使用,这意味着用户只有在联机时才能访问login.php页面。
- 回退:部分指定在无法建立到服务器的连接时浏览器应该使用的回退页面。本节中的每个条目都列出了两个uri——第一个是主资源,第二个是备用资源。例如,在我们的示例中,如果用户离线,就会显示offline.html页面。另外,两个uri必须与清单文件来自同一个源文件。
- 以散列符号(#)开头的行是注释行。
警告:不要在缓存清单文件中指定清单文件本身,否则几乎不可能通知浏览器有新的清单可用。
步骤2:使用缓存清单文件创建之后,将缓存清单文件上传到web服务器上——确保web服务器配置为使用MIME类型text/cache-manifest来提供清单文件。
现在要使缓存清单生效,你需要在web页面中启用它,方法是将清单属性添加到根元素< html> 元素,如下所示:
<
!DOCTYPE html>
<
html lang="en" manifest="example.appcache">
<
head>
<
title>使用应用程序缓存<
/title>
<
/head>
<
body>
<
!--文档内容将插入这里-->
<
/body>
<
/html>
【html5应用程序缓存 – HTML5教程】注意:在Apache web服务器上,可以通过将AddType text/cache-manifest .appcache添加到应用程序根目录中的.htaccess文件或与应用程序相同的目录中来设置清单(.appcache)文件的MIME类型。
推荐阅读
- html5 Web worker用法 – HTML5教程
- html5 Web存储 – HTML5教程
- html5视频video元素 – HTML5教程
- html5音频audio元素 – HTML5教程
- html5 SVG绘制以及和canvas的区别 – HTML5教程
- html5 canvas绘图 – HTML5教程
- html5 input新输入类型 – HTML5教程
- html ISO语言代码 – HTML教程
- html URL编码 – HTML教程