当我尝试缓存 xxx.worker.js 时，Service Worker 不会安装答案

【问题标题】：Service worker won't install when I try to cache xxx.worker.js当我尝试缓存 xxx.worker.js 时，Service Worker 不会安装
【发布时间】：2018-09-10 21:39:25
【问题描述】：

我的 Vue 应用中有以下 Service Worker 代码：

main.js

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

service-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' 时，它工作正常。但是当我取消注释它们时，会发生以下情况：

我开始使用开发工具并取消注册任何服务工作人员并删除缓存存储中的任何内容，以便我从头开始。
我加载了localhost:8080。
Service Worker 保持在 installing 状态。
在Cache Storage中，我看到c7d016677eb7e912bc40.worker.js和f328c7e2b379df12fa4c.worker.js已经被成功缓存了。
但是，“已成功缓存所有内容。”没有被记录到控制台。但是“问题缓存：”也没有被记录。

我知道the promise you pass to event.waitUntil() lets the browser know when your install completes, and if it was successful. 很明显，承诺存在一些问题。但我不知道问题是什么。它没有击中.then 块或.catch 块，当我在开发工具中查看缓存存储时，似乎'c7d016677eb7e912bc40.worker.js' 和'f328c7e2b379df12fa4c.worker.js' 被成功缓存。 /p>

编辑：我正在使用worker-loader。我觉得这个问题与工作文件的加载方式有关，但我不明白为什么会有问题，因为当我转到localhost:8080/c7d016677eb7e912bc40.worker.js 或localhost:8080/f328c7e2b379df12fa4c.worker.js 时，我会取回 JS 文件。

另外，我确保c7d016677eb7e912bc40.worker.js 和f328c7e2b379df12fa4c.worker.js 中的前缀是准确的。例如。 c7d016677eb7e912bc40 和 f328c7e2b379df12fa4c 是准确的。

更新：

【问题讨论】：

chrome上报的service worker的雕像是什么？是waiting to activated旁边有一个橙色图标吗
@HyyanAboFakher 状态为installing，位于waiting to be activated 状态之前。我添加了图片来演示。
检查 URL /ngsw/state 可能有一些错误。
@PeterS 我在网络选项卡中没有看到对/ngsw/state 的任何请求。当我访问 /ngsw/state - 例如在 URL 栏中输入它并按 Enter - 对 GET /ngsw/state 的响应只是我的 index.html 文件。
@PeterS seems /ngsw/state 特定于 Angular 上下文中的服务工作者。我正在使用 Vue。

标签： javascript service-worker web-worker cachestorage worker-loader

【解决方案1】：

这并不像你想象的那样起作用：

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',
    ]);
  }());
});

【讨论】：

1) return cache.addAll 方法不起作用；与我在问题中描述的情况相同，服务人员仍处于installing 状态。
2) “你在这里定义了一个叫做promise的变量，但是它并没有替换缓存，这是需要实现的promise。”我以为@ 987654332@ 是一个对象，而不是一个承诺，需要发生的是 caches.open 的 .then 块需要返回一些东西才能触发 caches.open 承诺解决（这将触发 event.waitUntil 到结束）。如果是这样，我不明白为什么分配给 promise 变量会很重要，因为无论哪种方式，caches.open 的 .then 块都会返回一些东西。
3) 即使分配给promise 变量会导致caches.open 出现问题，为什么它会导致cache.addAll 的.then 和.catch 块出现问题？
4) 如果let promise = cache.addAll 方法确实存在问题，为什么当我注释掉c7d016677eb7e912bc40.worker.js 和f328c7e2b379df12fa4c.worker.js 时它会起作用？