Javascript 用fetch事件替换service worker中的资产

我正试图与我的服务人员热切换主题样式表

我为Jekyll创建了一个主题（与GitHub页面一起使用），并希望能够在黑暗主题和光明主题之间进行替换（“关闭灯光”）并使其保持一致

现在，这是通过将状态保存到

localstorage

并根据该状态替换主题

link

元素来实现的

问题是，检查是在获取原始白色主题后进行的，因此即使

localstorage

设置了黑色主题，用户也会看到白色主题的闪烁

下面是它目前的行为（按钮位于右上角）：

更改主题后，请尝试导航到其他页面。页面加载白色主题，然后更改为黑色主题

我想我可以通过在服务工作者内部切换脚本来解决这个问题，因为我可以将

addEventListener

添加到

fetch

事件中，并用另一个fetch替换承诺链中的脚本

但代码似乎不起作用。如果我在事件回调中添加调试点，它永远不会被触发（不在资产上，也不在实际的页面获取上）

HTML头 当在chrome中调试时（还有chrome canary，因为我听说那里有更好的服务人员调试支持），甚至从未调用

fetch

上的回调。没有记录任何请求

我确实看到服务人员在chrome的开发工具中注册并处于活动状态。 我看到其他事件记录在控制台中

另外，在调试脚本并在脚本开始处放置断点时，看起来已经获取了

bulmaswatch.min.css

知道我遗漏了什么吗？：-）

---

谢谢

根本问题与您的服务人员的范围有关

当我在Chrome的DevTools中访问并查看应用程序>服务人员面板时，我看到服务人员的作用域为

https://thatkookooguy.github.io/postmortem-demo/assets

，不控制任何客户端

如果您将

sw.js

文件从

/assets/

子目录移到站点的顶级目录（即

/postmortem demo/

），然后切换注册码以反映这一点，那么您的服务人员应该能够控制您的客户端页面：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/postmortem-demo/sw.js');
}

（这意味着在本地开发时，您还应该为您的web应用程序提供URL前缀

/postmorem demo/

，以与之匹配。）

以下资源提供了有关服务人员范围的详细信息：

importScripts('localforage.min.js');

// remember the theme
this.onmessage = function(msg) {
  if (!msg.data.theme) {
    return;
  }

  localforage.setItem('theme', msg.data.theme);
}

// replace link fetching with correct theme
this.addEventListener('fetch', function(event) {
  console.log(event.request.url);

  if (event.request.url.contains('/bulmaswatch/')) {
    return localforage.getItem('theme')
      .then(function(theme) {
        if (theme === 'kb-dark-theme') {

          let darkThemeRequest = new Request(request.url.replace('bulmaswatch/default/', 'bulmaswatch/superhero/'), {
            method: request.method,
            headers: request.headers,
            mode: 'same-origin',
            credentials: request.credentials,
            redirect: 'manual'
          });

          return fetch(darkThemeRequest);
        }

        return fetch(event.request);
      })
  }
});

// Log SW installation
this.addEventListener('install', function(event) {
  console.log('[SW]: installing....');
});

// Log SW activation
this.addEventListener('activate', function activator(event) {
  console.log('[SW]: activate!');
});

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/postmortem-demo/sw.js');
}