html5应用程序-【HTML】HTML5应用程序缓存

2023-08-29 0 7,477 百度已收录

【HTML】HTML5中应用程序缓存简介

内容速递:读完本文你能学到什么!

1.什么是应用程序缓存

使用 HTML5,您可以通过创建缓存清单文件轻松创建 Web 应用程序的离线版本。

2.应用程序缓存给应用程序带来了三大优势 离线浏览——用户可以在离线时使用应用程序 速度——缓存的资源加载速度更快 减少服务器负载——浏览器只会从服务器下载更新或修改的资源。 3. 缓存清单

要启用应用程序缓存,请在文档的标记中包含清单属性


当用户访问每个指定清单的页面时,都会对其进行缓存。

html5应用程序-【HTML】HTML5应用程序缓存

清单文件需要配置正确的 MIME 类型,即“text/cache-manifest”。

4.清单文件

清单文件可以分为三部分:CACHE MANIFEST、NETWORK、FALLBACK。

清单文件是一个简单的文本文件,告诉浏览器缓存什么(以及不缓存什么)。

4.1、缓存清单

第一行 CACHE MANIFEST 是必需的。 此标题下列出的文件将在首次下载后缓存。

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

html5应用程序-【HTML】HTML5应用程序缓存

当manifest文件加载时html5应用程序,浏览器会从网站根目录下载这三个文件。

但是,每当用户断开与 Internet 的连接时,这些资源仍然可用。

4.2、网络

此标题下列出的文件需要连接到服务器并且不会被缓存。

NETWORK:
login.php

星号可用于指示所有其他资源/文件需要 Internet 连接:

NETWORK:
*

html5应用程序-【HTML】HTML5应用程序缓存

4.3、后备

此标题下列出的文档指定当页面难以访问时的后备页面(例如 404 页面)。

下面的 FALLBACK 部分指定,如果无法建立 Internet 连接,则 /html5/ 目录中的所有文件都应替换为“404.html”:

FALLBACK:
/html5/ /404.html

5. 应用程序缓存注意事项

以“#”开头的行是注释行html5应用程序,但也可以用于其他目的。 每当修改其清单文件时,应用程序的缓存就会更新。 如果您编辑图像或更改 JavaScript 函数,这些更改将不会被重新缓存。 更新注释行中的日期和版本号是让浏览器重新缓存文件的一种方法。

6.更新缓存

html5应用程序-【HTML】HTML5应用程序缓存

应用程序被缓存后,它将保持缓存状态,直到发生以下情况之一:

7. 完整的Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html

好系列

HTML历史:【HTML】你会读HTML吗?带你回顾还是走进

HTML标签:【HTML】带你回忆一下HTML中这些模糊标签

HTML视频:【HTML】谈谈如何播放HTML5视频

html5应用程序-【HTML】HTML5应用程序缓存

HTML音频:[HTML] HTML5给网络音频带来的改变

HTML语义:【HTML】浅谈HTML5语义的理解

HTML定位:【HTML】HTML5的新功能Geolocation

HTML拖放:[HTML]你用过HTML5拖放吗?

HTML 缓存:[HTML] 为什么不看看 HTML5 的 WebStorage?

HTML 应用程序缓存:[HTML] HTML5 应用程序缓存

HTML 的 Web Werkors:[HTML] HTML5 的 Web Werkors

博客描述和致谢

文章涉及的部分信息来自网络,包括我个人的总结和想法。 分享的目的是建立一个社区,增强自己。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html5 html5应用程序-【HTML】HTML5应用程序缓存 https://www.wkzy.net/game/175185.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务