Add PWA support

client/public/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
+  <link rel="manifest" href="/manifest.json">
 
   <title>Media Tracker</title>
 
@@ -19,6 +20,16 @@
     } else {
       document.documentElement.classList.remove('dark');
     }
+
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js')
+        .then(function (reg) {
+          console.log('Service worker registered.', reg);
+        })
+        .catch(function (error) {
+          console.log('Service worker registration failed. Error: ', error);
+        });
+    }
   </script>
 </head>
 

client/public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "MediaTracker",
+  "short_name": "MediaTracker",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#404040",
+  "theme_color": "#262626",
+  "icons": [
+    {
+      "src": "/image/mediatracker-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/image/mediatracker-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}

client/public/sw.js

@@ -0,0 +1,11 @@
+self.addEventListener('install', function (_e) {
+  // Do nothing for now
+});
+
+self.addEventListener('activate', function (_e) {
+  // Do nothing for now
+});
+
+self.addEventListener('fetch', function (_e) {
+  // Do nothing for now
+});

client/webpack.common.ts

@@ -66,6 +66,8 @@ const config: Configuration = {
       patterns: [
         { from: 'public/logo', to: 'logo' },
         { from: 'public/image', to: 'image' },
+        { from: 'public/manifest.json', to: 'manifest.json' },
+        { from: 'public/sw.js', to: 'sw.js' },
       ],
     }),
     // new BundleAnalyzerPlugin(),