javascript - 强制 Service Worker 仅在特定页面打开时返回缓存的响应

Question

我构建了一个门户网站，可以访问多个功能，包括故障单功能。

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

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

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

如何设置 Service Worker 仅在工单页面打开时使用缓存数据进行响应？

当获取事件发生时，我是否必须手动检查 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”是否可以在 service worker 事件中访问，这是实现此目的的合理方法吗？

Answer 1

使用服务 worker 范围界定

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

推断推荐人

this answer 中有关于从您的服务 worker 的 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.
});