Javascript 如何在所有其他请求之前加载服务工作者？

我试图在页面上的所有子资源请求之前加载一个服务工作者，这样我就可以对加载子资源的方式应用一些优化（例如，延迟加载，加载资产的缩小版本而不是完整资产）。但是，我无法找到在其他子资源请求开始之前加载软件的方法

我创建了一个简单的概念证明，说明了我试图如何处理我的服务人员处理的任何请求（只是为了更容易找到我的软件何时开始处理请求）

这是我的HTML：

if（导航器中的“serviceWorker”）{
register（'/dl wps sw.js'，{scope:'/'}）{
console.log（'Service Worker registration successfully with scope:'，registration.scope）；
}，函数（err）{
控制台错误（err）；
});
}
...

这是我的服务人员：

self.addEventListener（'install'，函数（事件）{
自我skipWaiting（）；
});
self.addEventListener（'activate'，（）=>{
self.clients.claim（）；
});
self.addEventListener（'fetch'，（事件）=>{
const init={status:401，statusText:'Blocked！'}；
respondWith（新响应（null，init））；
});

这是在我的浏览器中发生的情况：

正如您在屏幕截图中所看到的，尽管我注册服务人员的代码位于页面的最顶端，但它直到稍后才会激活并开始处理请求，到那时，我需要捕获的大量关键请求已经触发

我在《服务工作者规范》的Github问题中发现了另外一个人，他似乎在尝试完成我（2年前）想要完成的任务：

---

似乎他们建议使用

，您需要先单独安装软件，然后刷新页面。然后，软件可以为启用软件的页面提供内容，并拦截所有其他请求。例如：

index.html

<p>Installing Service Worker, please wait...</p>

<script>
  navigator.serviceWorker.register('sw.js')
  .then(reg => {
    if (reg.installing) {
      const sw = reg.installing || reg.waiting;
      sw.onstatechange = function() {
        if (sw.state === 'installed') {
          // SW installed.  Refresh page so SW can respond with SW-enabled page.
          window.location.reload();
        }
      };
    } else if (reg.active) {
      // something's not right or SW is bypassed.  previously-installed SW should have redirected this request to different page
      handleError(new Error('Service Worker is installed and not redirecting.'))
    }
  })
  .catch(handleError)

  function handleError(error) {}
</script>

<!-- 
  This page shows after SW installs.
  Put your main app content on this page.
-->

已启用索引sw.html

<p>Installing Service Worker, please wait...</p>

<script>
  navigator.serviceWorker.register('sw.js')
  .then(reg => {
    if (reg.installing) {
      const sw = reg.installing || reg.waiting;
      sw.onstatechange = function() {
        if (sw.state === 'installed') {
          // SW installed.  Refresh page so SW can respond with SW-enabled page.
          window.location.reload();
        }
      };
    } else if (reg.active) {
      // something's not right or SW is bypassed.  previously-installed SW should have redirected this request to different page
      handleError(new Error('Service Worker is installed and not redirecting.'))
    }
  })
  .catch(handleError)

  function handleError(error) {}
</script>

<!-- 
  This page shows after SW installs.
  Put your main app content on this page.
-->


我建议您使用Workbox，避免一直使用“navigator.serviceWorker.Register”，首先检查是否有工作人员已注册。感谢您对Workbox的建议。不幸的是，我认为这对解决这个具体问题没有帮助。我看不到任何东西可以解决这个初始加载开始时间的难题。也许我错了，所以请让我知道如果是这样。@jameslk下面的答案够了吗？还需要帮助吗？我想这是一个能准确回答我问题的解决方案。我希望找到一种解决方案，不会降低首次访问的页面加载速度（这是由于刷新），但我猜，由于服务人员的限制，这在目前是不可能的。我已经接受了答案。非常感谢。很好。在软件的
oninstall
事件期间，您可以使用和缓存
索引sw enabled.html
来缓解这种情况。