Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Preact component to notify user when a change has been made, and on route change reload the page.
import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';
import NotifyChange from "./NotifyChange/index";
// import Home from 'async!../routes/home';
// import Profile from 'async!../routes/profile';
export default class App extends Component {
constructor() {
super();
this.state = {
notifyChange: false,
};
}
/** Gets fired when the route changes.
* @param {Object} event "change" event from [preact-router](http://git.io/preact-router)
* @param {string} event.url The newly routed URL
*/
handleRoute = e => {
this.currentUrl = e.url;
if (this.state.notifyChange) {
window.location.reload(true);
}
};
notifyChange() {
this.setState({notifyChange: true});
}
render() {
return (
<div id="app">
<Header />
<NotifyChange notifyChange={() => this.notifyChange()}/>
<Router onChange={this.handleRoute}>
<Home path="/" />
<Profile path="/profile/" user="me" />
<Profile path="/profile/:user" />
</Router>
</div>
);
}
}
import {h, Component} from 'preact';
import style from './style';
export default class NotifyChange extends Component {
constructor(props) {
super(props);
this.state = {
newVersion: false
};
// Check that service workers are supported, and we aren't prerendered.
if (typeof window !== "undefined" && 'serviceWorker' in navigator && navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.onstatechange = event => {
// If we have updates, show the newVersion popup.
if (event.target.state === 'redundant') {
this.setState({newVersion: true});
// Also notify the parent component that an update has been passed.
this.props.notifyChange();
}
};
// Check for updates every 30 seconds.
setInterval(function () {
navigator.serviceWorker.ready.then(function (registration) {
registration.update();
});
}, 2000);
}
}
render() {
if (this.state.newVersion !== true) {
return;
}
return (<div class={style.new_version} onClick={() => window.location.reload(true)}>
A new version has been released, click here to reload the page.
</div>);
}
}
.new_version {
position: absolute;
z-index: 10000;
bottom: 50px;
right: 0;
background-color: red;
color: white;
font-weight: bold;
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment