feat(pwa): Add minimum to be installable

src/js/App.tsx

@@ -1,25 +1,33 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Provider } from "react-redux";
 
-import { Route, Redirect } from 'react-router';
-import { HashRouter } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
+import { Route, Redirect } from "react-router";
+import { HashRouter } from "react-router-dom";
+import { ConnectedRouter } from "connected-react-router";
 
 // Layouts
-import DefaultLayout from './layout/DefaultLayout';
+import DefaultLayout from "./layout/DefaultLayout";
 
-import store, { history } from './store';
-import LoadableStoreApp from './apps/Store';
+import store, { history } from "./store";
+import LoadableStoreApp from "./apps/Store";
 
 export default class App {
     domId: string;
 
-    constructor(id: string = 'app') {
+    constructor(id: string = "app") {
         this.domId = id;
     }
 
     run() {
+        // Check that service workers are supported
+        if ('serviceWorker' in navigator) {
+            // Use the window load event to keep the page load performant
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('./serviceWorker.js');
+            });
+        }
+
         ReactDOM.render(
             <Provider store={store}>
                 <ConnectedRouter history={history}>
@@ -32,8 +40,7 @@ export default class App {
                     </HashRouter>
                 </ConnectedRouter>
             </Provider>,
-            document.getElementById(this.domId),
+            document.getElementById(this.domId)
         );
     }
 }
-

www/manifest.webmanifest

@@ -1,3 +1,52 @@
 {
-    "short_name": "PlayOS"
-}
+    "name": "PlayOS",
+    "short_name": "PlayOS",
+    "theme_color": "#ff22ff",
+    "background_color": "#2196f3",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "icons": [
+      {
+        "src": "res/img/icons/icon-72x72.png",
+        "sizes": "72x72",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-96x96.png",
+        "sizes": "96x96",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-128x128.png",
+        "sizes": "128x128",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-144x144.png",
+        "sizes": "144x144",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-152x152.png",
+        "sizes": "152x152",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-384x384.png",
+        "sizes": "384x384",
+        "type": "image/png"
+      },
+      {
+        "src": "res/img/icons/icon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ],
+    "splash_pages": null
+  }

www/serviceWorker.js

@@ -0,0 +1,6 @@
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
+
+workbox.routing.registerRoute(
+    /\.js$/,
+    new workbox.strategies.NetworkFirst(),
+);