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

Question

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

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

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

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

如何将服务辅助角色设置为仅在门票页面打开时使用缓存数据进行响应？

发生读取事件时，是否必须手动检查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，这是否是实现此目的的合理方法？

Answer 1

我知道你提到你目前所有的页面都来自同一个目录。。。但是，如果您对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.
});