web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over。 什么是manifest? 简单来说manifest能让你的应用在无网的情况下也能访问。 它有三大优势: 1、离线浏览,无网情况下也能正常访问; 2、更快的加载速度,缓存在本地访问速度自然更快; 3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。 如何使用? XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html manifest="demo.appc HTML5离线缓存,又称为离线存储或Application Cache,是HTML5引入的一项功能,旨在提高Web应用程序的性能和可用性。它允许开发者创建能够离线工作的Web应用,即使在网络不可用的情况下,用户仍然可以访问和使用这些应用。离线缓存通过使用一个名为`manifest`的特殊文件来实现,这个文件告诉浏览器哪些资源应当被缓存以便离线访问。 `manifest`文件是关键,它是一个简单的文本文件,通常以`.appcache`为扩展名。该文件包含三个主要部分: 1. **CACHE MANIFEST**:这部分定义了需要被缓存的资源列表,包括CSS、JavaScript、图片等静态文件。一旦用户首次访问Web应用,这些文件会被下载并存储在本地。 2. **NETWORK**:这部分列出的文件需要始终从网络获取,即使在离线状态下。例如,登录页面可能需要在这个部分,因为它通常需要实时交互。 3. **FALLBACK**:这部分用于设置备用策略,当指定的资源无法访问时,浏览器会使用指定的回退页面。例如,如果 `/html5/` 目录下的页面无法加载,浏览器将显示 `404.html` 页面。 使用离线缓存有以下几个显著优点: - **离线浏览**:用户可以在没有网络连接时访问已缓存的Web应用。 - **更快的加载速度**:本地缓存的资源加载速度远快于从服务器请求。 - **减少服务器负载**:频繁访问的文件只需首次加载后缓存,减少了对服务器的请求次数。 为了启用离线缓存,开发者需要在HTML文档中添加`manifest`属性,如以下示例所示: ```html <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> ``` 这里的`manifest`属性值是`manifest`文件的URL,它可以是相对路径或绝对路径,但必须与Web应用在同一源下。 当`manifest`文件发生变化时,浏览器会检测到变化并自动下载新的缓存版本。有三种触发更新的方式: 1. **清除浏览器缓存**:用户手动清理缓存会导致重新下载。 2. **修改manifest文件**:任何改动,包括注释,都会启动更新。 3. **编程更新**:开发者可以通过JavaScript的`window.applicationCache`对象来检查和管理缓存状态,例如监听`updateready`事件来提示用户更新缓存。 通过`window.applicationCache`对象,可以检查不同状态,如`UNCACHED`、`IDLE`、`CHECKING`、`DOWNLOADING`、`UPDATEREADY`和`OBSOLETE`,根据这些状态进行相应的处理,例如提醒用户更新应用。 HTML5离线缓存通过`manifest`文件提供了一种强大的工具,使Web应用能够提供类似原生应用的离线体验,提升了用户体验并减少了服务器的压力。然而,需要注意的是,由于更新机制和浏览器兼容性问题,开发者需要谨慎使用并充分测试,以确保应用在各种场景下都能正确工作。
- 粉丝: 5
- 资源: 893
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助