要利用 HTML 的 Content Index API 的 add() 方法注册离线可用的文章页面信息，你可以按照以下步骤进行操作。这个 API 允许你将网页内容添加到浏览器的本地索引中，以便用户在没有网络连接时也能访问这些内容。✅ 一、检查浏览器支持首先，确认用户的浏览器是否支持 Content Index API。目前，该 API 主要在 Chrome 浏览器（桌面版） 上支持，其他浏览器可

本文深入解析了如何正确使用 HTML 的 Content Index API 实现真正可用的离线文章访问，强调该 API 并非“一键离线”魔法——它仅负责在浏览器中登记内容条目（如标题、URL），而能否离线打开完全依赖开发者手动完成三大关键动作：精确缓存对应 HTML 资源（路径须逐字符一致且服务端允许缓存）、在 Service Worker 的 fetch 事件中显式拦截并响应导航请求（mode === 'navigate'）、以及确保所有操作均在 Service Worker 内安全执行；任何一环疏漏（如缓存缺失、路径不匹配、fetch 未处理导航）都会导致用户点击离线列表时白屏失败——它不是开关，而是一张需要你亲手铺路、亮灯、开门的静态索引卡。

registration.index.add() 只是“登记名字”，不是“保证能打开”。调用成功不代表页面已缓存、更不代表离线时真能加载——它只把 URL 记进浏览器的「离线内容」列表里，后续能否访问，全看 Service Worker 的 fetch 事件有没有兜住。

注册前必须确认 HTML 已被精确缓存

Content Indexing API 不检查缓存，也不触发缓存。你传 { url: '/article/123/' } 进去，浏览器就记下这个字符串，仅此而已。

• 缓存动作得你手动做：比如在 install 或 message 事件中调用 caches.open('pages-v1').then(cache => cache.addAll(['/article/123/']))
• 路径必须完全一致：注册的 url 和 cache.addAll() 里写的路径要逐字符匹配，包括开头斜杠、结尾斜杠、大小写、甚至 hash 后缀（如 /article/123/index.html ≠ /article/123/）
• HTML 响应头不能禁用缓存：服务端返回的 Cache-Control: no-store 会让 cache.addAll() 静默失败，控制台可能不报错，但缓存实际为空

必须在 fetch 事件中显式处理导航请求

用户点击「离线内容」列表里的条目，浏览器会发一个 mode === 'navigate' 的 GET 请求。如果你的 Service Worker 没拦截它，或没返回有效响应，结果就是白屏或 net::ERR_FAILED。

• 别只写 caches.match(event.request)：它对带 cookie 的请求可能失配，且无法区分资源类型
• 必须加判断：if (event.request.mode === 'navigate')，再决定是否用缓存响应
• 推荐写法：

  self.addEventListener('fetch', event => {
    if (event.request.mode === 'navigate') {
      event.respondWith(
        caches.match(event.request)
          .then(resp => resp || caches.match('/offline.html'))
      );
    }
  });

• /offline.html 也得提前缓存，否则 fallback 会失败

registration.index 只能在 Service Worker 内部调用

主线程里没有 navigator.index，也不能直接用 registration.index.add()——必须先拿到 registration 实例，且确保它支持 index 接口。

• 正确调用位置：Service Worker 脚本内部（比如 activate 或自定义 message 事件中）
• 安全检查写法：

  if ('index' in registration) {
    await registration.index.add({ id: 'a1', url: '/article/123/', title: '标题' });
  }

• 别在页面 JS 里调用：navigator.serviceWorker.ready.then(r => r.index.add(...)) 是无效的，r.index 在主线程不可用

最容易被忽略的一点：注册和缓存之间没有自动关联。哪怕你每天调用一百次 add()，只要缓存路径漏掉一个斜杠、或者 fetch 事件里没写 mode === 'navigate' 分支，用户点进去照样打不开。它不是一个“开关”，而是一张静态索引卡——卡上写的地址，得你自己先铺好路、修好灯、再确保门开着。

好了，本文到此结束，带大家了解了《要利用 HTML 的 Content Index API 的 add() 方法注册离线可用的文章页面信息，你可以按照以下步骤进行操作。这个 API 允许你将网页内容添加到浏览器的本地索引中，以便用户在没有网络连接时也能访问这些内容。✅ 一、检查浏览器支持首先，确认用户的浏览器是否支持 Content Index API。目前，该 API 主要在 Chrome 浏览器（桌面版） 上支持，其他浏览器可能尚未实现。if ('contentIndex' in navigator) { // 支持 Content Index API } else { // 不支持 }✅ 二、准备文章页面数据你需要为每篇文章提供一些基本信息，例如：id：唯一标识符（通常使用文章的 URL 或 ID）title：文章标题url：文章的完整 URLlastModified：文章最后修改时间（可选，用于更新）body：文章内容（可选，用于离线显示）✅ 三、调用 navigator.contentIndex.add()使用 navigator.contentIndex.add() 方法将文章信息添加到本地索引中。示例代码： navigator.contentIndex.add({ id: 'article-12345', title: '如何学习 JavaScript', url》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！