Сервисный работник не используется по некорневому пути

Question

У меня есть веб-приложение, развернутое по некорневому пути статического сервера. То есть MyApp при сборке развертывается в путь / папку https://example.com/myapp.

MyApp использует vue и webpack, поэтому я добавил плагин GenerateSW workbox со стандартной конфигурацией. Он регистрируется, добавляя все файлы, которые мне нужны, в кеш, но он не используется.

Мой сервисный работник регистрируется с помощью scriptURL https://example.com/myapp/service-worker.js и scope https://example.com/myapp/. В моем кеше хранятся мои файлы /myapp/index.html?__WB_REVISION_... /myapp/app.<hash>.js?__WB_REVISION_.. и так далее. Однако работник сервиса по-прежнему не контролирует страницу, то есть navigator.serviceWorker.controller возвращает ноль.

Я видел это https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug#common_problems, но в отличие от этой ситуации, я не хочу, чтобы работник сервиса имелкорневая область.

Мне не хватает каких-либо параметров конфигурации?

Answer 1

controlling иногда равно нулю в зависимости от того, где вы находитесь в жизненном цикле работника сервиса. Когда управление равно нулю, вы слушаете событие controllerchange в объекте serviceworker. Мой код предполагает, что при отправке события controllerchange все в порядке, но вы можете проверить наличие serviceWorker.controller !== null, прежде чем вызывать метод resolve.

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))
    );
  })