怎么在 HTML5 中使用 manifest 实现离线缓存

怎么在 HTML5 中使用 manifest 实现离线缓存

首页/常见问题/低代码开发/怎么在 HTML5 中使用 manifest 实现离线缓存

作者：web开发工具发布时间：2025-01-01 13:27浏览量：4726

织信企业级低代码开发平台

提供表单、流程、仪表盘、API等功能，非IT用户可通过设计表单来收集数据，设计流程来进行业务协作，使用仪表盘来进行数据分析与展示，IT用户可通过API集成第三方系统平台数据。

免费试用

在HTML5中，使用manifest文件可以实现离线缓存功能。这一功能是通过创建一个manifest文件，通常以.appcache为扩展名，来实现的。这个文件列出了浏览器应该缓存的资源列表，让网站即使在没有网络连接的情况下仍然可以访问这些资源。manifest文件中的资源将被浏览器存储起来，并且只会在manifest文件发生变化时更新。利用manifest可以使得应用在离线状态下运行，提高网站性能，并且减少服务器的负载。

一、创建MANIFEST文件

制作manifest文件是实现离线缓存的第一步。首先，你需要创建一个文本文件，命名为比如example.appcache，并在文件的第一行写上CACHE MANIFEST。之后，列出要缓存的资源文件，如HTML、CSS、JavaScript文件、图像等。例如：

CACHE MANIFEST Version 1.0.0 CACHE: /index.html /css/style.css /js/script.js /images/logo.png NETWORK: * FALLBACK: / /offline.html

二、引用MANIFEST文件

在HTML文件中引用manifest文件。在HTML的<html>标签中使用manifest属性来指定manifest文件的路径。例如：

<!DOCTYPE html>
<html manifest="example.appcache">
<head>
    <title>离线缓存示例</title>
</head>
<body>
    <p>如果你能看到这条消息，说明离线缓存正在工作。</p>
</body>
</html>

三、理解MANIFEST文件结构

manifest文件主要包含三个部分：CACHE、NETWORK和FALLBACK。

CACHE：在此部分列出的文件会在首次访问时被缓存，之后即使在离线状态下也可以访问。
NETWORK：在此部分列出的文件需要具有网络连接才能访问，它们不会被缓存。
FALLBACK：列出备选资源，当无法访问某个资源时，浏览器将使用对应的备选资源。

四、缓存更新机制

浏览器会根据manifest文件检查缓存内容是否有更新。如果manifest文件未发生任何变化，则缓存将不会被更新。即使文件内容已更改，如果manifest文件本身没有变化，浏览器也不会更新缓存的文件。因此，一般建议在manifest文件中添加一个注释来表示版本号，并在更新资源时更改版本号，这样可以触发缓存更新。

五、离线缓存事件处理

在使用离线缓存时，可以通过JavaScript来处理与离线缓存相关的事件，例如检测更新、处理错误等。这些事件包括：

checking：浏览器正在检查manifest文件的更新。
error：在检查过程中发生错误，比如manifest文件未找到或资源下载失败。
noupdate：没有发现manifest文件的更新。
downloading：开始下载manifest文件中列出的资源。
progress：资源下载过程中会触发多次，可用于显示下载进度。
cached：资源已被缓存，可离线使用。
updateready：资源已更新，可以通过swapCache()来使用新的缓存。
obsolete：manifest文件不再可用，缓存被删除。

以下是如何使用JavaScript监听这些事件的示例：

// 检查是否支持离线缓存
if (window.applicationCache) {
    var appCache = window.applicationCache;
    // 错误事件
    appCache.addEventListener('error', function(e) {
        console.log('离线缓存出现错误', e);
    }, false);
    // 检测到更新时
    appCache.addEventListener('updateready', function(e) {
        if (appCache.status == appCache.UPDATEREADY) {
            appCache.swapCache();
            if (confirm('网站有更新，是否加载新的内容？')) {
                window.location.reload();
            }
        }
    }, false);
    // 未发现更新事件
    appCache.addEventListener('noupdate', function(e) {
        console.log('没有发现离线缓存更新');
    }, false);
}

六、注意事项与最佳实践

在使用HTML5的离线缓存功能时，有几个要点需要注意：

对manifest文件的更改必须是字节级的，即使是空格或换行的改变也能触发缓存更新。
资源路径应相对于manifest文件或者是绝对路径。
使用HTTPS可以提供更安全的离线缓存服务。
确保服务器正确设置MIME类型为text/cache-manifest，否则浏览器可能不会识别manifest文件。
引入manifest后，即使在线状态也会优先使用缓存资源，这可能导致开发过程中的更新不即时显示，可以配置服务器或开发工具绕过缓存。
由于浏览器差异，建议进行详尽的跨浏览器测试。

HTML5的离线缓存功能是一项强大的技术，可以改善用户体验并增加网站在无网络或网络不稳定时的可用性。然而，随着Service Workers的出现和日益成熟，它提供了更灵活和强大的离线缓存解决方案，因此manifest方式逐渐被Service Workers所替代。

尽管如此，熟悉manifest离线缓存的原理仍然有其价值，它能帮助开发者更好地理解网站资源的缓存机制，并为学习Service Workers提供基础。展望未来，在构建面向现代浏览器的PWA（Progressive Web Apps）应用时，Service Workers将是构建离线体验的首选技术。

作为一家全球知名的超大型企业，吉利需要大量的技术人员来满足各事业部门的日常数字化需求。在内部强调“降本增效”的大环境下，吉利通过采购“织信低代码平台”，开发周期平均缩短61%，人力投入减少47%，解决了开发需求常年堆积的难题。

医院后勤服务领军者——某管家

国内市场化运作、跨区域经营、集团化管理的大型专业医疗机构后勤服务供应商，全国80多座城市，每天为超过百万的病人和医护人员提供服务，通过织信低代码平台构建线上数字化的方式服务各医院的后勤保障和正常运行，主要为运送条线、保洁条线、秩序条线、工程条线、医废条线等解决工单调度、医辅材料运输、多端协同的效率难题。

中国兵器工业集团——银光化学

国家“一五”期间156个重点项目之一。属于国家高新技术企业，在信息化升级建设中，存在大量“小、散、碎”的信息化需求，需要投入大量人力资源进行开发，通过引入织信低代码平台，解决当下遇到的各类业务难题，提升整体的IT研发效率。

石油领域重点工程单位——川庆钻探

随着国企工规模的不断扩大和内部数字化转型的要求不断提升，公司着眼长远，决定借助织信低代码的各方面能力，从物资储备管理入手，并辐射经营、生产、工程、日常管理等多个板块，为后续内部信息化建设打好基座。

汽车零部件上市企业——川环科技

川环为了有效应对残酷的市场现实，高层一致决定加强公司内部管理，8大部门将全面进行数字化转型，耗时10月，成功上线8套系统，通过织信低代码平台对接现有用友U9ERP，实现各部门的业务线上化，并通过数据治理，实现整个企业从战略到经营管理的分析。

B2C跨境电商知名品牌——朗驰实业

全球500强车企巨头——吉利集团