服务人员在controllerchange刷新页面

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

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

来源

2017-01-27 Krystus

我建议以下the example从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(); 
     } 
    }; 
    }; 
});

来源

2017-01-27 14:47:41

经过多次尝试后，我带来了类似的东西。

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

它的工作。该代码是否有缺陷？

来源

2017-01-27 15:04:34 Krystus

服务人员在controllerchange刷新页面

回答

相关问题