Merge pull request #4 from Jinksi/sw-notifications

Sw notifications

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,9 @@ class App extends Component {
       <Router>
         <div>
           <ScrollToTop />
+          <ServiceWorkerNotifications
+            readyMessage='This message is displayed when the SW is registered'
+          />
           <GithubCorner url='https://github.com/Jinksi/hyperstatic' />
           <Helmet titleTemplate={`${siteTitle} | %s`} />
           <Nav>

src/components/ServiceWorkerNotifications.js

@@ -0,0 +1,92 @@
+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;
+  min-height: 5rem;
+  transition: transform 0.1s ease-in-out;
+  transform: translateY(${props => props.message ? '0' : '100%'});
+`
+const CloseButton = styled.button.attrs({
+  children: 'x'
+})`
+  border: none;
+  background: white;
+  color: ${color.primary};
+  border-radius: 100%;
+  width: 2.5rem;
+  height: 2.5rem;
+  position: absolute;
+  right: 1rem;;
+  top: 1rem;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    opacity: 0.7;
+    outline: none;
+  }
+`
+
+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: true,
+    updated: true,
+    offline: 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)
+  }
+
+  handleReady = () => {
+    if (!this.props.ready) return
+    this.setState({ message: this.props.readyMessage })
+  }
+
+  handleUpdated = () => {
+    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 () {
+    return (
+      <Notification message={this.state.message}>
+        {this.state.message}
+        <CloseButton onClick={this.handleDismiss} />
+      </Notification>
+    )
+  }
+}

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