强制 Service Worker 仅在特定页面打开时返回缓存响应答案

【问题标题】：Force Service Worker to only return cached responses when specific page is open强制 Service Worker 仅在特定页面打开时返回缓存响应
【发布时间】：2018-10-06 15:07:46
【问题描述】：

我已经建立了一个门户，它提供了对多个功能的访问，包括故障单功能。

客户要求我离线提供故障单功能。他们希望能够在线“签出”特定的现有票证，然后在用户的设备超出任何互联网连接范围时访问（查看/编辑）这些票证。此外，他们希望能够在离线时创建新工单。然后，当连接可用时，他们将签入已更改/新创建的票证。

我一直在修补 Service Workers 并查看了一些关于它们的好文档，我觉得我对如何缓存数据有了基本的了解。

但是，由于我只想使门户的票务部分脱机可用，因此我不希望服务工作者在访问门户的任何其他页面时缓存或返回缓存的数据。所有页面都在同一个目录中，因此服务工作者一旦加载，默认情况下会拦截来自门户中所有页面的所有请求。

如何将 Service Worker 设置为仅在工单页面打开时响应缓存数据？

当 fetch 事件发生时，我是否必须手动检查 window.location 的值？例如，

if (window.location == 'https://www.myurl.com/tickets')
{
    // try to get the request from network. If successful, cache the result.
    // If not successful, try returning the request from the cache.
}
else
{
    // only try the network, and don't cache the result.
}

需要为页面加载许多支持文件（即 css 文件、js 文件等），因此仅检查 request.url 的页面名称是不够的。在 service worker 事件中是否可以访问“window.location”，这是实现此目的的合理方式吗？

【问题讨论】：

标签： javascript caching offline service-worker

【解决方案1】：

使用服务工作者范围

我知道您提到您目前从同一目录提供所有页面...但是如果您对 Web 应用程序的 URL 结构有任何灵活性，那么最简洁的方法是从 URL 提供您的票证功能以唯一的路径前缀（如/tickets/）开头，然后从/tickets/service-worker.js 托管您的服务工作者。重新组织 URL 的努力可能是值得的，如果这意味着能够利用默认的 Service Worker 范围，而不必担心 /tickets/ 之外的页面由 Service Worker 控制。

推断引荐来源网址

this answer 中提供了有关从服务人员的 fetch 处理程序中确定引用的 window 客户端 URL 的信息。您可以将其与 fetch 处理程序中的初始检查结合起来，以查看它是否是导航请求并使用它提前退出。

const TICKETS = '/tickets';
self.addEventListener('fetch', event => {
  const requestUrl = new URL(event.request.url);
  if (event.request.mode === 'navigate' && requestUrl.pathname !== TICKETS) {
    return;
  }

  const referrerUrl = ...; // See https://stackoverflow.com/questions/50045641
  if (referrerUrl.pathname !== TICKETS) {
    return;
  }

  // At this point, you know that it's either a navigation for /tickets,
  // or a request for a subresource from /tickets.
});

【讨论】：