<ServiceWorkerNotifications /> init

src/App.js

@@ -10,6 +10,7 @@ import Nav from './components/Nav'
 import NavLink from './components/NavLink'
 import Logo from './components/Logo'
 import GithubCorner from './components/GithubCorner'
+import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
 import globalStyles from './globalStyles'
 
 const siteTitle = 'HyperStatic'
@@ -37,6 +38,7 @@ class App extends Component {
       <Router>
         <div>
           <ScrollToTop />
+          <ServiceWorkerNotifications />
           <GithubCorner url='https://github.com/Jinksi/hyperstatic' />
           <Helmet titleTemplate={`${siteTitle} | %s`} />
           <Nav>

src/components/ServiceWorkerNotifications.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import { color } from '../globalStyles'
+
+const Notification = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  background: ${color.primary};
+  color: white;
+  padding: 1rem;
+`
+
+export default class ServiceWorkerNotifications extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      message: null
+    }
+
+    this.handleReady = this.handleReady.bind(this)
+    this.handleUpdated = this.handleUpdated.bind(this)
+    this.handleOffline = this.handleOffline.bind(this)
+  }
+
+  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)
+  }
+
+  handleReady () {
+    this.setState({ message: 'ready' })
+  }
+
+  handleUpdated () {
+    this.setState({ message: 'updated' })
+  }
+
+  handleOffline () {
+    this.setState({ message: 'offline' })
+  }
+
+  render () {
+    if (this.state.message) {
+      return (
+        <Notification>{this.state.message}</Notification>
+      )
+    }
+    return null
+  }
+}

src/registerServiceWorker.js

@@ -1,4 +1,9 @@
-/* global URL, fetch */
+/* global URL, fetch, Event */
+
+const swReady = new Event('swReady')
+const swUpdated = new Event('swUpdated')
+const swOffline = new Event('swOffline')
+
 // In production, we register a service worker to serve assets from local cache.
 
 // This lets the app load faster on subsequent visits in production, and gives
@@ -58,11 +63,13 @@ function registerValidSW (swUrl) {
               // It's the perfect time to display a "New content is
               // available please refresh." message in your web app.
               console.log('New content is available; please refresh.')
+              window.dispatchEvent(swUpdated)
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
               console.log('Content is cached for offline use.')
+              window.dispatchEvent(swReady)
             }
           }
         }
@@ -97,6 +104,7 @@ function checkValidServiceWorker (swUrl) {
       console.log(
         'No internet connection found. App is running in offline mode.'
       )
+      window.dispatchEvent(swOffline)
     })
 }