62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
import { Component } from 'react'
|
|
|
|
export default class ServiceWorkerNotifications extends Component {
|
|
static defaultProps = {
|
|
readyMessage: 'This site is cached for offline use!',
|
|
updatedMessage: 'New content is available please refresh.',
|
|
offlineMessage: 'You are now offline, browsing from cache.',
|
|
ready: false,
|
|
updated: false,
|
|
offline: false,
|
|
reloadOnUpdate: true
|
|
}
|
|
|
|
state = {
|
|
message: null
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
window.addEventListener('swReady', this.handleReady)
|
|
window.addEventListener('swUpdated', this.handleUpdated)
|
|
window.addEventListener('swOffline', this.handleOffline)
|
|
}
|
|
|
|
componentWillUnmount = () => {
|
|
window.removeEventListener('swReady', this.handleReady)
|
|
window.removeEventListener('swUpdated', this.handleUpdated)
|
|
window.removeEventListener('swOffline', this.handleOffline)
|
|
}
|
|
|
|
reloadIfUpdated = () => {
|
|
if (window.swUpdated) {
|
|
console.log('New content available: reloading window')
|
|
window.location.reload()
|
|
}
|
|
}
|
|
|
|
handleReady = () => {
|
|
if (!this.props.ready) return
|
|
this.setState({ message: this.props.readyMessage })
|
|
}
|
|
|
|
handleUpdated = () => {
|
|
window.swUpdated = true
|
|
console.log('Window will reload on next render')
|
|
if (!this.props.updated) return
|
|
this.setState({ message: this.props.updatedMessage })
|
|
}
|
|
|
|
handleOffline = () => {
|
|
if (!this.props.offline) return
|
|
this.setState({ message: this.props.offlineMessage })
|
|
}
|
|
|
|
handleDismiss = () => {
|
|
this.setState({ message: null })
|
|
}
|
|
|
|
render () {
|
|
this.props.reloadOnUpdate && this.reloadIfUpdated()
|
|
return null
|
|
}
|
|
}
|