服務人員在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刷新頁面

回答

相關問題