html离线应用的核心是通过.manifest文件实现资源缓存，具体步骤包括：1. 创建.manifest文件并定义cache、network、fallback三部分；2. 在标签中引用manifest属性；3. 利用版本控制触发缓存更新。其原理为首次访问时下载清单并缓存指定资源，后续访问优先从本地加载。优势在于提升加载速度和离线体验，但因更新机制繁琐、缓存粒度粗、调试困难等问题，现已被service worker取代。尽管如此，精准缓存核心静态资源、合理配置network与fallback仍可优化离线表现。
HTML离线应用，简单来说，就是让你的网页在没有网络连接的情况下也能正常访问。这主要是通过浏览器内置的缓存机制实现的。早期，我们大量依赖Application Cache（也就是大家常说的AppCache），它通过一个.manifest文件来告诉浏览器哪些资源需要被缓存下来。虽然现在Service Worker才是主流，但理解AppCache对于处理一些老项目或者追溯技术演进还是挺有意思的。它能显著提升用户体验和访问速度，因为资源直接从本地磁盘加载，省去了网络请求的延迟。
解决方案
要实现HTML离线应用，核心在于创建一个.manifest文件，并在HTML的标签中通过manifest属性引用它。浏览器在第一次访问时会下载这个.manifest文件，并根据其中列出的资源进行缓存。
一个基本的.manifest文件看起来是这样的：
立即学习“前端免费学习笔记（深入）”；
CACHE MANIFEST# 版本号或注释，每次修改这个文件，浏览器都会重新检查缓存# v1.0.0 - 2023-10-27# 明确列出需要缓存的资源CACHE:/index.html/css/style.css/js/main.js/images/logo.png# 那些必须在线才能访问的资源，或者不希望被缓存的资源NETWORK:* # 表示所有未明确缓存的资源都需要在线访问# 离线时，如果请求的资源无法从缓存或网络获取，则提供备用资源FALLBACK:/ /offline.html # 当请求任何资源失败时，显示offline.html
当浏览器首次加载带有manifest属性的页面时，它会下载并解析这个文件，然后将CACHE:部分列出的所有资源下载并存储到本地缓存中。后续访问时，如果这些资源在缓存中，浏览器就会直接从缓存中读取，大大加快加载速度。
AppCache文件是如何工作的？
说实话，AppCache这玩意儿，用起来有点儿“玄学”，但它的工作原理其实挺直接的。一个AppCache .manifest 文件通常分为三个主要部分，它们决定了浏览器在离线状态下如何处理你的网页资源：
CACHE MANIFEST: 这是文件的第一行，也是必须的。它告诉浏览器这是一个AppCache清单文件。通常，我会在这一行下面加一个注释，比如# Version 1.0.1，或者一个时间戳。这个注释非常关键，因为只有当这个.manifest文件本身发生任何改动时，浏览器才会重新检查并更新缓存。哪怕你只是改了缓存资源列表中的一个文件名，或者加了一个空格，浏览器都会认为这是一个新版本，然后尝试更新。CACHE:: 这一节列出了所有需要被浏览器缓存的资源。这些资源可以是HTML文件、CSS样式表、JavaScript脚本、图片，甚至是字体文件。一旦这些资源被缓存，即使你的设备完全断网，浏览器也会从本地缓存中加载它们。这是一个白名单机制，只有明确列在这里的才会被缓存。我个人的经验是，这里只放那些静态的、不常变动的核心资源。NETWORK:: 这一节列出了那些必须在线才能访问的资源。最常见的用法是写一个星号 *，这意味着所有没有在CACHE:节中明确列出的资源，都必须通过网络获取。如果你有API请求或者动态生成的内容，它们就应该走这一条路。这样可以避免AppCache错误地缓存了动态内容，导致数据不新鲜。FALLBACK:: 这是为离线用户体验设计的一个非常实用的部分。它定义了一对路径：当某个资源无法从缓存中获取，也无法通过网络获取时，浏览器会用指定的备用资源来替代。例如，/ /offline.html 的意思是，如果任何页面或资源无法加载，就显示 offline.html 这个页面。这对于提供一个友好的“你已离线”提示页面特别有用。
浏览器处理AppCache的流程大致是这样的：第一次访问时，它会下载.manifest文件，然后根据文件内容下载并缓存所有CACHE:节的资源。后续访问时，浏览器会先检查.manifest文件是否有更新（通过文件内容哈希值判断）。如果有更新，它会在后台下载新的缓存资源，但当前页面仍然使用旧缓存。只有当你刷新两次页面（或者导航到另一个使用了同一AppCache的页面再回来），新的缓存才会生效。这个“两次刷新”的机制，说实话，当年没少让人头疼。
提升访问速度的3种AppCache manifest技巧具体有哪些？
虽然AppCache现在已经算是“老古董”了，但它当年在提升网页访问速度上确实发挥了作用。这里有几个我当年摸索出来的“技巧”，希望能帮助你理解它的设计思路，或者处理一些遗留项目：
精准缓存核心静态资源： 这是最基本也是最重要的。我的做法是，只把那些不经常变动、且对于应用核心功能至关重要的静态文件放到CACHE:节里。比如你的主HTML文件（index.html）、核心的CSS样式表、关键的JavaScript库和脚本，以及应用的Logo、图标等图片资源。避免把那些动态生成的内容、或者经常更新的数据也扔进去。缓存太多不必要的资源，不仅浪费用户存储空间，还可能因为更新频率高而导致频繁的缓存失效和重新下载，反而拖慢速度。一个经验是，如果一个文件你预计它在未来很长一段时间内都不会变，那就缓存它。
巧用NETWORK和FALLBACK节来平衡离线与在线体验： 这两个节是AppCache的精髓所在。
NETWORK:：对于那些需要实时更新的数据（比如新闻列表、用户动态、API接口数据），或者那些你根本不希望离线访问的外部链接，一定要把它们排除在CACHE:之外，并确保它们能通过NETWORK:节正常访问。最简单粗暴但也有效的方法就是NETWORK: *，让所有未明确缓存的资源都尝试在线获取。这样可以避免缓存了不该缓存的东西，导致数据显示错误。FALLBACK:：这是一个非常棒的用户体验保障。我通常会设置一个通用的离线页面，比如/ /offline.html。这意味着无论用户尝试访问哪个页面，只要网络不通且该页面不在缓存中，都会被重定向到offline.html。这样用户就不会看到浏览器默认的“无法访问此网站”的错误页面，而是看到一个更友好的提示，告诉他们当前处于离线状态。这比什么都不做要好太多了。
巧妙利用Manifest文件本身的版本控制来触发更新： 这是AppCache最让人“爱恨交织”的地方。AppCache的更新机制是基于Manifest文件的内容变化的。这意味着，如果你想更新缓存中的某个CSS文件，你不能只改那个CSS文件，你必须修改.manifest文件本身。最常见的做法是在CACHE MANIFEST行的下面加一个注释，比如# Version 1.0.2，或者直接修改一个你缓存文件的版本号（例如/js/main.js?v=1.0.2）。只要.manifest文件内容发生了一点点变化，浏览器就会认为这是一个新版本，然后尝试下载所有新的缓存资源。所以，我的习惯是每次发布新版本，都会强制修改一下.manifest文件里的版本注释。当然，这只是触发更新的第一步，用户还需要再次刷新页面才能看到最新的内容，这一点确实不够优雅。
为什么AppCache现在很少被使用？
AppCache在离线应用领域确实是先行者，但它自身的设计缺陷，让它在现代Web开发中逐渐被淘汰，现在已经很少有新项目会选择它了。我个人在用它的时候，就没少踩坑。
首先，它的更新机制实在太反人类了。正如前面提到的，你需要修改.manifest文件才能触发更新，而且用户需要“两次刷新”才能看到最新内容。这对于快速迭代的Web应用来说简直是噩梦。用户可能总是看到旧版本的内容，直到他们手动清除了浏览器缓存或者多次刷新。这种不确定性极大地影响了用户体验和开发效率。调试起来也特别痛苦，你根本不知道用户当前加载的是哪个版本的缓存。
其次，AppCache的缓存粒度非常粗糙，控制能力有限。它要么缓存整个文件，要么不缓存。你很难实现更复杂的缓存策略，比如“缓存这个文件30天，但那个文件只缓存1小时”，或者“在网络好的时候预加载这些资源，网络差的时候只加载核心资源”。它就像一个大而全的开关，缺乏精细化控制的“旋钮”。
再者，调试和错误处理非常困难。AppCache的状态不透明，一旦缓存出现问题，你很难知道是哪个文件出了问题，或者为什么没有更新。浏览器提供的调试工具对于AppCache的支持也相对薄弱，不像现在Service Worker那样有详细的生命周期和事件日志。
最后，也是最关键的，AppCache缺乏拦截网络请求的能力。它只能根据.manifest文件预先定义好的规则来处理请求。而现代的Web应用需要更强大的能力，比如在客户端拦截并修改网络请求、动态生成响应、实现离线推送通知等。AppCache显然无法满足这些需求。
正因为这些局限性，AppCache最终被更强大、更灵活的Service Worker所取代。Service Worker运行在浏览器后台，独立于网页生命周期，能够拦截和控制网络请求，实现更精细的缓存策略（比如缓存优先、网络优先、Stale-While-Revalidate等），甚至可以处理推送通知和后台同步。它提供了一个可编程的网络代理，让开发者能够对离线体验有前所未有的控制力。所以，如果你现在想做离线应用，毫不犹豫地选择Service Worker吧，它才是未来。
以上就是HTML离线应用怎么实现？提升访问速度的3种manifest技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568826.html
微信扫一扫 
支付宝扫一扫 
