在服务工作者的controllerchange上刷新页面

Question

当新的服务工作者在队列中时,我有一个简单的服务工作者,按钮更新.更新后我想在controllerchange上刷新页面,但没有任何反应.总而言之,所有服务工作者都会更新,但是按照该课程(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();
      }
    };
  };
});