Toast for Service Worker

packages/react-dev-utils/ModuleScopePlugin.js

@@ -50,8 +50,7 @@ class ModuleScopePlugin {
       // Error if in a parent directory of src/
       const requestRelative = path.relative(appSrc, requestFullPath);
       if (
-        requestRelative.startsWith('../') ||
-        requestRelative.startsWith('..\\')
+        requestRelative.startsWith('../') || requestRelative.startsWith('..\\')
       ) {
         callback(
           new Error(

packages/react-scripts/template/src/Toast.css

@@ -0,0 +1,39 @@
+.Toast {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 16px;
+	margin: auto;
+	transition: 250ms;
+	background: #222;
+	color: white;
+	line-height: 24px;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	display: flex;
+}
+
+.Toast.active {
+	transform: translateY(0);
+}
+
+.Toast.inactive {
+	transform: translateY(100%);
+}
+
+.Toast a,
+.Toast-button {
+	padding: 0;
+	background: transparent;
+	border: 0;
+	color: #61dafb;
+	font-size: inherit;
+	line-height: inherit;
+	text-transform: uppercase;
+	text-decoration: none;
+}
+
+.Toast-text {
+	flex: 1;
+}

packages/react-scripts/template/src/Toast.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import './Toast.css';
+
+export default class Toast extends React.Component {
+  state = {
+    active: true,
+  };
+
+  close = () => {
+    clearTimeout(this.timeout);
+    this.setState({
+      active: false,
+    });
+  };
+  componentDidMount() {
+    this.timeout = setTimeout(
+      () => {
+        this.setState({
+          active: false,
+        });
+      },
+      this.props.timeout
+    );
+  }
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+  render() {
+    return (
+      <div className={`Toast ${this.state.active ? 'active' : 'inactive'}`}>
+        <span className="Toast-text">
+          {this.props.children}
+        </span>
+        <button className="Toast-button" onClick={this.close}>Dismiss</button>
+      </div>
+    );
+  }
+}
+
+Toast.defaultProps = {
+  timeout: 3000,
+};

packages/react-scripts/template/src/registerServiceWorker.js

@@ -7,6 +7,32 @@
 
 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 // This link also includes instructions on opting out of this behavior.
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Toast from './Toast';
+
+const useToast = true;
+const domId = 'toast';
+let dom = document.getElementById(domId);
+
+if (!dom) {
+  dom = document.createElement('div');
+  dom.id = domId;
+  document.body.appendChild(dom);
+}
+
+function showMessage(message) {
+  if (useToast) {
+    ReactDOM.render(
+      <Toast>
+        {message}
+      </Toast>,
+      dom
+    );
+  } else {
+    console.log(message);
+  }
+}
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
@@ -41,6 +67,19 @@ export default function register() {
       }
     });
   }
+
+  if (process.env.NODE_ENV !== 'production') {
+    showMessage(
+      <span>
+        Development mode started.{' '}
+        <a
+          href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md"
+        >
+          Read Me
+        </a>
+      </span>
+    );
+  }
 }
 
 function registerValidSW(swUrl) {
@@ -56,12 +95,12 @@ function registerValidSW(swUrl) {
               // the fresh content will have been added to the cache.
               // 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.');
+              showMessage('New content is available; please refresh.');
             } 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.');
+              showMessage('Content is cached for offline use.');
             }
           }
         };
@@ -93,7 +132,7 @@ function checkValidServiceWorker(swUrl) {
       }
     })
     .catch(() => {
-      console.log(
+      showMessage(
         'No internet connection found. App is running in offline mode.'
       );
     });