Created by: piotr-cz
Adding two callbacks in registerServiceWorker file:
-
onUpdate
- executed after console logs New content is available; please refresh. -
onSuccess
- executed after console logs Content is cached for offline use.
This is a more lightweight change, compared to other related PR: https://github.com/facebookincubator/create-react-app/pull/2426 as in my opinion problem should be separated into two parts:
- Providing callbacks in
registerServiceWorker.js
file - Adding an callback notification (Toast) that may be customized by developer
How callbacks are provided or named is up to discussion, the point is to provide minimal working technique to detect update.
When this or similar PR is landed on master branch we can discuss how to notify user about the update.
To use it inside application to show notification (toast/ icon etc) register service worker inside App.js file:
import registerServiceWorker from './registerServiceWorker.js'
export default class App {
constructor(props) {
// Register service worker and add onUpdate callback
registerServiceWorker({
onUpdate: this.handleServiceWorkerUpdate
})
}
// Simplest notification implementation example.
handleServiceWorkerUpdate(registration) {
if (window.confirm('New update has been installed, click to restart')) {
window.location.reload()
}
}
}