Question

我有一个服务工作者的伴侣脚本，我现在正在试用。

脚本的工作原理如下：

((n, d) => {

  if (!(n.serviceWorker && (typeof Cache !== 'undefined' && Cache.prototype.addAll))) return; 

  n.serviceWorker.register('/serviceworker.js', { scope: './book/' })
    .then(function(reg) {

        if (!n.serviceWorker.controller) return;

        reg.onupdatefound = () => {

          let installingWorker = reg.installing;

          installingWorker.onstatechange = () => {
            switch (installingWorker.state) {
              case 'installed':
                if (navigator.serviceWorker.controller) {
                  updateReady(reg.waiting);

                } else {
                  // This is the initial serviceworker…
                  console.log('May be skipwaiting here?');
                }
                break;

              case 'waiting':
                updateReady(reg.waiting);
                break;

              case 'redundant':
                // Something went wrong?
                console.log('[Companion] new SW could not install…')
                break;
            }
          };
        };
    }).catch((err) => {
      //console.log('[Companion] Something went wrong…', err);
    });

    function updateReady(worker) {
        d.getElementById('swNotifier').classList.remove('hidden');

        λ('refreshServiceWorkerButton').on('click', function(event) {
          event.preventDefault();
          worker.postMessage({ 'refreshServiceWorker': true } );
        });

        λ('cancelRefresh').on('click', function(event) {
          event.preventDefault();
          d.getElementById('swNotifier').classList.add('hidden');
        });

    }

    function λ(selector) {

      let self = {};

      self.selector = selector;

      self.element = d.getElementById(self.selector);

      self.on = function(type, callback) {
        self.element['on' + type] = callback;
      };

      return self;
    }

    let refreshing;

    n.serviceWorker.addEventListener('controllerchange', function() {
      if (refreshing) return;
      window.location.reload();
      refreshing = true;
    });    


})(navigator, document);

我现在因服务工作者API的庞大而感到不知所措，如果reg.installing返回redundant状态，我们似乎无法弄清楚他们会做些什么？

道歉，如果这看起来像一个愚蠢的问题，但我是服务工作者的新手。

Answer 1

基于此处的定义https://www.w3.org/TR/service-workers/#service-worker-state-attribute我猜测只是打印一个日志，以防它出现在调试中，否则什么都不做。

Answer 2

很难弄清楚你的意图是什么，所以我一般会尝试回答这个问题。

如果服务工作者无法安装或者被更新的服务工作者取代，他将变得多余。

如果发生这种情况，您所做的事由您决定。在这些情况下你想做什么？

Answer 3

编写catch函数以查看错误。可能是SSL问题。

/* In main.js */
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
    .then(function(registration) {
        console.log("Service Worker Registered", registration);
    })
    .catch(function(err) {
        console.log("Service Worker Failed to Register", err);
    })
}

Answer 4

您应该删除您创建的所有要求用户执行某些操作的UI提示，以激活最新的Service Worker。耐心一点。

您有3名服务人员，如registration所示：

active：正在运行的那个
waiting：已下载并准备成为active
installing：我们刚刚找到的那个正在下载，之后变成waiting

当服务人员到达＃2时，您可以向用户显示有关该应用程序新版本的提示，只需单击即可。假设他们不对此采取行动。

然后发布新版本。您的应用检测到新版本，并开始下载。此时，您有3位服务人员。＃2处的一个更改为redundant。＃3的那个还没有准备好。您应该删除该提示。

一旦下载了＃3，它就会取代＃2，您可以再次显示该提示。

如何处理ServiceWorker的冗余状态？

4 个答案: