HTML5离线缓存Manifest是什么资源-CSDN文库

120 浏览量 2020-12-14 01:28:09 上传评论收藏 74KB PDF 举报

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应用能够提供类似原生应用的离线体验，提升了用户体验并减少了服务器的压力。然而，需要注意的是，由于更新机制和浏览器兼容性问题，开发者需要谨慎使用并充分测试，以确保应用在各种场景下都能正确工作。

资源推荐

资源详情

资源评论