Preact component to notify user when a change has been made, and on route change reload the page.

app.js

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

index.js

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

style.css

.new_version {
    position: absolute;
    z-index: 10000;
    bottom: 50px;
    right: 0;
    background-color: red;
    color: white;
    font-weight: bold;
    padding: 10px;
}