刷新有关控制器的页面更改服务辅助角色

Question

我有一个简单的服务工作者，当新的服务工作者在队列中时，按钮会更新。更新后，我想在控制器更改时刷新页面，但没有任何反应。总而言之，服务工作者是实时更新的，但在该课程（https://www.udacity.com/course/offline-web-applications--ud899）之后，他们出于某种原因尝试添加该刷新。

在 js 中：

const updateButton = document.querySelector('.js-update-btn')
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
  .then(function (reg) {
    if (!navigator.serviceWorker.controller) {
      return
    }
    if (reg.waiting) {
      updateReady(reg.waiting)
      return
    }
    if (reg.installing) {
      trackInstalling(reg.installing)
      return
    }
    reg.addEventListener('updatefound', function () {
      trackInstalling(reg.installing)
    })
  })
  var refreshing
  navigator.serviceWorker.addEventListener('controllerchange', function () {
    if (refreshing) return
    window.location.reload()
    refreshing = true
  })
}
function updateReady (worker) {
  updateButton.disabled = false
  updateButton.addEventListener('click', function () {
    updateButton.disabled = true
    worker.postMessage({action: 'skipWaiting'})
  })
}
function trackInstalling (worker) {
  worker.addEventListener('statechange', function () {
    if (worker.state == 'installed') {
      updateReady(worker)
    }
  })
}

在 sw.js：

self.addEventListener('message', function (event) {
  if (event.data.action == 'skipWaiting') {
    self.skipWaiting()
  }
})

Answer 1

我建议遵循sw-precache演示代码中的示例。

下面是该示例的一个非常简洁的修改版本，当已安装的服务辅助角色有更新时，它将强制重新加载页面。（我认为在页面上显示一条消息要求用户手动重新加载可能会更用户友好，这样您最终就不会中断他们在页面上所做的任何事情。

navigator.serviceWorker.register('/service-worker.js').then(reg => {
  reg.onupdatefound = () => {
    const installingWorker = reg.installing;
    installingWorker.onstatechange = () => {
      if (installingWorker.state === 'installed' &&
          navigator.serviceWorker.controller) {
        // Preferably, display a message asking the user to reload...
        location.reload();
      }
    };
  };
});

Answer 2

经过多次尝试，我得到了类似的东西。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
  .then(function (reg) {
    if (!navigator.serviceWorker.controller) {
      return
    }
    reg.addEventListener('updatefound', function () {
      const newWorker = reg.installing
      newWorker.state
      var refreshing
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state == 'activated') {
          if (refreshing) return
          window.location.reload()
          refreshing = true
        }
      })
      trackInstalling(reg.installing)
    })
  })
}

它正在工作。该代码是否有任何缺陷？