Install PWA

client/public/index.html

@@ -60,5 +60,19 @@
 
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
-    --></body>
+    -->
+        <script>
+            if ('serviceWorker' in navigator) {
+                console.log('Will service worker register?');
+                navigator.serviceWorker
+                    .register('/serviceWorker.js')
+                    .then(function (reg) {
+                        console.log('Yes it did.');
+                    })
+                    .catch(function (err) {
+                        console.log("No it didn't. This happened: ", err);
+                    });
+            }
+        </script>
+    </body>
 </html>

client/public/manifest.json

@@ -1,25 +1,33 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "theme_color": "#1976d2",
+  "background_color": "#000",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Dev Chat+",
+  "short_name": "Dev Chat+",
+  "description": "DevChat+ is a great productivity tool that combines all the awesome features of video-calling with useful tools such as whiteboarding and a built in IDE to help you get your point across.",
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "32x32",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/logo192.png",
+      "sizes": "192x192",
+      "type": "image/png"
     },
     {
-      "src": "logo512.png",
+      "src": "/assets/icons/maskable_icon_x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/icons/maskable_icon_x512.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "512x512"
+      "purpose": "maskable"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+  ]
+}

client/public/serviceWorker.js

@@ -0,0 +1,41 @@
+const CACHE_NAME = 'version-1.0';
+const urlsToCache = ['index.html', 'offline.html'];
+
+const self = this;
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            // eslint-disable-next-line no-console
+            console.log('Opened cache');
+            return cache.addAll(urlsToCache);
+        })
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then(() => {
+            return fetch(event.request).catch(() =>
+                caches.match('offline.html')
+            );
+        })
+    );
+});
+
+self.addEventListener('activate', (event) => {
+    const cacheWhitelist = [];
+    cacheWhitelist.push(CACHE_NAME);
+
+    event.waitUntil(
+        caches.keys().then((cacheNames) =>
+            Promise.all(
+                cacheNames.map((cacheName) => {
+                    if (!cacheWhitelist.includes(cacheName)) {
+                        return caches.delete(cacheName);
+                    }
+                })
+            )
+        )
+    );
+});