Javascript 强制服务工作者仅在特定页面打开时返回缓存响应

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

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

我一直在对服务人员进行修补，并查阅了一些关于他们的好文档，我觉得我对如何缓存数据有了基本的了解

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

如何设置service worker，使其在Tickets页面打开时仅响应缓存数据

发生提取事件时，是否必须手动检查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中的页面名称是不够的。在服务人员事件中是否可以访问“window.location”，这是实现这一点的合理方法吗？

使用服务人员作用域 我知道你提到你目前所有的页面都来自同一个目录。。。但是，如果您对web应用程序的URL结构有任何灵活性，那么最干净的方法就是从以唯一路径前缀开头的URL（如

/tickets/

）提供票证功能，然后从

/tickets/service worker.js

托管您的服务人员。重新组织URL的努力可能是值得的，如果这意味着能够利用默认的服务工作者范围，而不必担心

/tickets/

之外的页面被服务工作者控制

推断推荐人 中有关于确定引用的

窗口

客户端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.
});