用于请求根路径的服务工作者“获取”事件永远不会触发答案

【问题标题】：Service Worker "fetch" event for requesting the root path never fires用于请求根路径的服务工作者“获取”事件永远不会触发
【发布时间】：2018-01-18 18:57:38
【问题描述】：

我正在尝试设置我的Service Worker，以便它拦截对主页（即主页，如www.mywebsite.com/）的请求，这最终将允许我返回一个缓存的模板。到目前为止，我的代码如下所示：

main.js：

navigator.serviceWorker.register('/sw.js')

sw.js：

self.addEventListener('fetch', function(event) {
  console.log(event.request.url)
  /**
   * only ever detects requests for resources but never the route itself..
   *
   * logged:
   * https://www.mywebsite.com/main.js
   * https://www.mywebsite.com/myimage.png
   *
   * not logged:
   * https://www.mywebsite.com/
   */
})

我很确定 Service Worker 设置正确，因为我确实检测到正在为资源请求触发的事件（例如 /main.js 或 /myimage.png）。但是，问题是只有资源的事件会被触发，即使我希望触发该事件来请求路由本身 (/)。我错过了什么，还是应该监听不同的事件？

谢谢

【问题讨论】：

您是否尝试过使用register 事件？
@guest271314 刚刚尝试过，但没有触发此类事件：\
您能否包含您在 Question 中尝试过的完整代码？
@guest271314 我已经相应地更新了我的帖子 - 谢谢你的帮助

标签： javascript service-worker service-worker-events

【解决方案1】：

我发现对根路径的请求实际上被拦截了。我从来没有注意到这一点的原因是因为请求发生在页面加载之前（即在甚至有一个控制台可以登录之前）。如果我在 Chrome DevTools 中打开 Preserve log 功能，我会注意到根路径请求的日志。

【讨论】：

【解决方案2】：

您可以将.then() 链接到。 .register() 调用然后检查location.href 以确定ServiceWorker 已注册的页面

  navigator.serviceWorker.register("sw.js")
  .then(function(reg) {
    if (location.href === "https://www.mywebsite.com/") {
      // do stuff
      console.log(location.href, reg.scope);
    }
  })
  .catch(function(err) {
    console.error(err);
  });

【讨论】：

不幸的是，我需要能够在服务工作者中访问请求 url，因为当我在 main.js 中访问它时，文件已经被提供（我需要提供文件来自缓存，而不是服务器）
代码是否使用fetch() 来获取.js 和.css 文件？
确实如此，而且似乎工作正常。但是，我什至在获取.js 和.css 之前就想检测根路径的请求url

【解决方案3】：

在https://livebook.manning.com/book/progressive-web-apps/chapter-4/27 的帮助下，我才发现这一点。这是我的 Service Worker 的简短版本：

const cacheName = "Cache_v1";

const urlsToCache = [
	"Offline.html"
  // styles, images and scripts
 ];
 
self.addEventListener('install', (e) => 
{
  e.waitUntil(
    caches.open(cacheName).then((cache) => 
    {
      return cache.addAll(urlsToCache);			
    })
  );
});

self.addEventListener('fetch', (e) => 
{	
  if (e.request.url == "https://<DOMAIN_NAME>/")
  {
    console.log("root");
    e.respondWith(
      fetch("offline.html")
    );
  }
}

【讨论】：