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演示代码中关注the example。

这是该示例的一个非常简洁的修改版本，当对已安装的服务工作者进行更新时，该版本将强制重新加载页面。（我认为，在页面上显示消息要求用户手动重新加载可能更加用户友好，这样您就不会中断他们在页面上做的任何事情。）

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)
    })
  })
}

它在工作。这段代码有什么缺陷吗？

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

2 个答案: