service-worker - Service Worker 未在非根路径上使用

Question

我有一个部署到静态服务器的非根路径的网络应用程序。即MyApp构建时部署到路径/文件夹 https://example.com/myapp .

MyApp正在使用 vue 和 webpack 所以我添加了 GenerateSW具有标准配置的工作箱插件。它正在注册，将我需要的所有文件添加到缓存中，但它没有被使用。

我的服务 worker 正在使用 scriptURL https://example.com/myapp/service-worker.js 注册和范围https://example.com/myapp/ .我的缓存存储有我的文件 /myapp/index.html?__WB_REVISION_... /myapp/app.<hash>.js?__WB_REVISION_..等等。但是 service worker 仍然没有控制页面，即 navigator.serviceWorker.controller正在返回 null。

我看过这个https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug#common_problems但与这种情况不同的是，我不希望 service worker 具有根范围。

我是否缺少任何配置选项？

Answer 1

controlling 有时为 null，具体取决于您在 Service Worker 生命周期中所处的位置。当 controlling 为 null 时，您将监听 serviceworker 对象上的 controllerchange 事件。当 controllerchange 事件被分派(dispatch)时，我的代码假设一切正常，但您可以在调用 resolve 之前检查 serviceWorker.controller !== null > 方法。

const controllerPromise = window.navigator.serviceWorker
  .register('https://example.com/myapp/service-worker.js')
  .then(() => window.navigator.serviceWorker.ready)
  .then(() => {
    if (window.navigator.serviceWorker.controller) {
      return Promise.resolve(window.navigator.serviceWorker.controller);
    }
    return new Promise(resolve =>
      window.navigator.serviceWorker
        .addEventListener('controllerchange', () => resolve(window.navigator.serviceWorker.controller))
    );
  })