Обновить страницу на контроллере в обслуживающем работнике

Question

У меня есть простой рабочий сервис с обновлением кнопки, когда новый сервисный рабочий находится в очереди. После обновления я хочу обновить страницу на контроллере, но ничего не происходит. В целом рабочий сервис обновляется в режиме реального времени, но после этого курса (https://www.udacity.com/course/offline-web-applications--ud899) они пытаются добавить это обновление по какой-либо причине.

В ЯШАХ:

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

Я бы рекомендовал следующее 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(); 
     } 
    }; 
    }; 
}); 

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

It's working. Есть ли недостатки этого кода?