Служащий не будет установлен, когда я попытаюсь кэшировать xxx.worker.js

Question

Служащий не будет установлен, когда я попытаюсь кэшировать xxx.worker.js

У меня есть следующий код работника службы в моем приложении Vue:

main.js

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/service-worker.js').catch(function() {
    console.log('Service worker registration failed.');
  });
}

сервис-worker.js

let currCacheName = 'premium-poker-tools-5';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(currCacheName).then(function(cache) {
      let promise = cache.addAll([
        '/',
        'app.js',
        'c7d016677eb7e912bc40.worker.js',
        'f328c7e2b379df12fa4c.worker.js',
        'static/logo.png',
        'static/favicon.png',
        'static/loading.svg',
        'static/cards/ace-of-clubs.png',
        'static/cards/king-of-clubs.png',
        'static/cards/queen-of-clubs.png',
        'static/cards/jack-of-clubs.png',
        'static/cards/ten-of-clubs.png',
        'static/cards/nine-of-clubs.png',
        'static/cards/eight-of-clubs.png',
        'static/cards/seven-of-clubs.png',
        'static/cards/six-of-clubs.png',
        'static/cards/five-of-clubs.png',
        'static/cards/four-of-clubs.png',
        'static/cards/three-of-clubs.png',
        'static/cards/two-of-clubs.png',
        'static/cards/ace-of-spades.png',
        'static/cards/king-of-spades.png',
        'static/cards/queen-of-spades.png',
        'static/cards/jack-of-spades.png',
        'static/cards/ten-of-spades.png',
        'static/cards/nine-of-spades.png',
        'static/cards/eight-of-spades.png',
        'static/cards/seven-of-spades.png',
        'static/cards/six-of-spades.png',
        'static/cards/five-of-spades.png',
        'static/cards/four-of-spades.png',
        'static/cards/three-of-spades.png',
        'static/cards/two-of-spades.png',
        'static/cards/ace-of-hearts.png',
        'static/cards/king-of-hearts.png',
        'static/cards/queen-of-hearts.png',
        'static/cards/jack-of-hearts.png',
        'static/cards/ten-of-hearts.png',
        'static/cards/nine-of-hearts.png',
        'static/cards/eight-of-hearts.png',
        'static/cards/seven-of-hearts.png',
        'static/cards/six-of-hearts.png',
        'static/cards/five-of-hearts.png',
        'static/cards/four-of-hearts.png',
        'static/cards/three-of-hearts.png',
        'static/cards/two-of-hearts.png',
        'static/cards/ace-of-diamonds.png',
        'static/cards/king-of-diamonds.png',
        'static/cards/queen-of-diamonds.png',
        'static/cards/jack-of-diamonds.png',
        'static/cards/ten-of-diamonds.png',
        'static/cards/nine-of-diamonds.png',
        'static/cards/eight-of-diamonds.png',
        'static/cards/seven-of-diamonds.png',
        'static/cards/six-of-diamonds.png',
        'static/cards/five-of-diamonds.png',
        'static/cards/four-of-diamonds.png',
        'static/cards/three-of-diamonds.png',
        'static/cards/two-of-diamonds.png',
        'static/feedback/1.png',
        'static/feedback/2.png',
        'static/feedback/3.png',
        'static/feedback/4.png',
        'static/feedback/flop-selector.png',
        'static/feedback/green-grid-squares.png',
        'static/feedback/user-set-range-to-simulate-to-street.png',
        'static/guides/beginners-guide/1.png',
        'static/guides/beginners-guide/2.png',
        'static/guides/beginners-guide/3.png',
        'static/guides/beginners-guide/4.png',
        'static/guides/beginners-guide/5.png',
        'static/guides/beginners-guide/6.png',
        'static/guides/beginners-guide/7.png',
        'static/guides/beginners-guide/8.png',
        'static/guides/beginners-guide/9.png',
        'static/guides/beginners-guide/10.png',
        'static/guides/beginners-guide/11.png',
        'static/guides/beginners-guide/12.png',
        'static/guides/beginners-guide/13.png',
        'static/guides/beginners-guide/14.png',
        'static/guides/beginners-guide/15.png',
        'static/guides/beginners-guide/16.png',
        'static/guides/beginners-guide/17.png',
        'static/guides/beginners-guide/18.png',
        'static/guides/beginners-guide/19.png',
        'static/guides/beginners-guide/20.png',
        'static/guides/beginners-guide/21.png',
        'static/guides/faq/double-counting/1.png',
        'static/guides/faq/hit-percentage-calculation/1.png',
        'static/guides/faq/hit-percentage-calculation/2.png',
        'static/guides/faq/hit-percentage-calculation/3.png',
        'static/guides/faq/insights/1.png',
        'static/guides/faq/insights/2.png',
        'static/guides/faq/insights/3.png',
        'static/guides/faq/insights/4.png',
        'static/guides/faq/insights/5.png',
        'static/guides/faq/insights/6.png',
        'static/guides/faq/insights/7.png',
        'static/guides/faq/insights/8.png',
        'static/guides/faq/set-checks-to-default/1.png',
        'static/guides/quick-guide/1.png',
        'static/guides/quick-guide/2.png',
        'static/guides/quick-guide/3.png',
        'static/guides/quick-guide/4.png',
        'static/guides/quick-guide/5.png',
        'static/guides/quick-guide/6.png',
        'static/guides/quick-guide/7.png',
        'static/guides/quick-guide/8.png',
        'static/guides/quick-guide/save-load-scenario.png',
        'static/home/1.png',
        'static/home/2.png',
        'static/home/3.png',
        'static/settings/equity-calculator-insights-not-visible.png',
        'static/settings/equity-calculator-insights-visible.png',
        'static/settings/outcome-analyzer-checkboxes-collapsed-1.png',
        'static/settings/outcome-analyzer-checkboxes-collapsed-2.png',
        'static/settings/outcome-analyzer-checkboxes-included-1.png',
        'static/settings/outcome-analyzer-checkboxes-included-2.png',
        'static/settings/outcome-analyzer-hands.png',
        'static/settings/outcome-analyzer-insights-not-visible.png',
        'static/settings/outcome-analyzer-insights-visible.png',
        'static/settings/saved-ranges-1.png',
        'static/settings/saved-ranges-2.png',
        'static/settings/saved-ranges-3.png',
        'static/settings/saved-ranges-4.png',
        'static/settings/included-selectors/double-slider-selector.png',
        'static/settings/included-selectors/log-double-slider-selector.png',
        'static/settings/included-selectors/saved-ranges-selector.png',
        'static/settings/included-selectors/single-slider-selector.png',
        'static/settings/included-selectors/tier-and-category-selector.png',
        'static/settings/tiers/tiers.png',
        'static/settings/visual/dont-show-num-combos-in-range.png',
        'static/settings/visual/green-grid-squares.png',
        'static/settings/visual/multicolored-grid-squares.png',
        'static/settings/visual/show-num-combos-in-range.png',
      ]).then(function () {
        console.log('Successfully cached everything.')
      }).catch(function (error) {
        console.log('Problem caching: ', error);
      });

      return promise;
    }).catch(function () {
      console.error('Error with caches.open or cache.addAll');
    })
  );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
      .then(function getOldCachesThatBeginWithPremiumPokerToolsDash (cacheNames) {
        return cacheNames.filter(function (cacheName) {
          return cacheName.startsWith('premium-poker-tools-') && (cacheName !== currCacheName);
        });
      })
      .then(function removeOldCachesThatBeginWithPremiumPokerToolsDash (oldCachesThatBeginWithPremiumPokerToolsDash) {
        let removeCachePromises = [];

        oldCachesThatBeginWithPremiumPokerToolsDash.forEach(function (oldCacheThatBeginsWithPremiumPokerToolsDash) {
          removeCachePromises.push(caches.delete(oldCacheThatBeginsWithPremiumPokerToolsDash));
        });

        return Promise.all(removeCachePromises);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) {
        return response;
      }

      return fetch(event.request);
    }).catch(function () {
      console.error('Error trying to match event request to cache.');
    })
  );
});

Когда я закомментирую 'c7d016677eb7e912bc40.worker.js' а также 'f328c7e2b379df12fa4c.worker.js' работает нормально. Но когда я раскомментирую их, вот что происходит:

Я начинаю ходить в Dev Tools и отменяю регистрацию любых сервисных работников и удаляю что-либо в Cache Storage, чтобы начать с чистого листа.
Я загружаю localhost:8080,
Работник службы остается в installing государство.
В Cache Storage я вижу, что c7d016677eb7e912bc40.worker.js а также f328c7e2b379df12fa4c.worker.js были успешно кэшированы.
Тем не менее, "успешно все кешируется". не регистрируется на консоли. Но "Проблема кеширования: " тоже не регистрируется.

Я понимаю, что обещание, которое вы передаете event.waitUntil(), сообщает браузеру, когда установка завершена и прошла ли она успешно. Очевидно, что с обещанием происходит какая-то проблема. Но я не знаю, в чем проблема. Это не бьет .then блок или .catch блок, и когда я смотрю на Cache Storage в Dev Tools, кажется, что 'c7d016677eb7e912bc40.worker.js' а также 'f328c7e2b379df12fa4c.worker.js' успешно кэшируются.

Редактировать: я использую работник-загрузчик. У меня такое ощущение, что проблема связана с тем, как загружаются рабочие файлы, но я не понимаю, почему возникнет проблема, потому что, когда я иду в localhost:8080/c7d016677eb7e912bc40.worker.js или же localhost:8080/f328c7e2b379df12fa4c.worker.js Я вернул файл JS.

Кроме того, я убедился, что префиксы в c7d016677eb7e912bc40.worker.js а также f328c7e2b379df12fa4c.worker.js точны. Например. тот c7d016677eb7e912bc40 а также f328c7e2b379df12fa4c точны.

Обновить:

8

javascript service-worker web-worker cachestorage worker-loader

Источник

user1927876 10 сен '18 в 21:39

1 ответ

Другие вопросы по тегам javascript service-worker web-worker cachestorage worker-loader

user7147666 20 сен '18 в 03:48 2018-09-20 03:48 · Answer 1 · 2018-09-20 03:48

Это не работает так, как вы думаете:

caches.open(currCacheName).then(function(cache) {
  let promise = cache.addAll([

Вы определяете переменную с именем promise здесь, но это не заменяет cacheЭто обещание, которое должно быть выполнено.

У вас есть куча ресурсов для кэширования, а затем:

 'static/settings/visual/show-num-combos-in-range.png',
      ]).then(function () {
        console.log('Successfully cached everything.')
      }).catch(function (error) {
        console.log('Problem caching: ', error);
      });

Вы ничего не возвращаете сюда, так .then не будет работать, но это не ошибка, так .catch тоже не буду

Ваш кеш заполнен, но ваше обещание для extendableEvent.waitUntil() никогда не устанавливается, поэтому установка никогда не завершается.

Либо удалите вашу переменную обещания / console.logs и верните cache.addAll вот так:

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(currCacheName).then(function(cache) {
      return cache.addAll([
        '/',
        'app.js',
        'static/settings/visual/show-num-combos-in-range.png',
      ])
    })
  );
});

Или сделайте вашу функцию асинхронной, например так:

self.addEventListener('install', event => {
  event.waitUntil(async function() {
    const cache = await caches.open(currCacheName);
    await cache.addAll([
        '/',
        'app.js',
        'static/settings/visual/show-num-combos-in-range.png',
    ]);
  }());
});