Make the app more "PWA"

Add maskable icons and service worker.

frontend/js/app.js

@@ -91,6 +91,12 @@ const App = () => (
   </div>
 );
 
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/service-worker.js");
+  });
+}
+
 ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>

frontend/package.json

@@ -57,6 +57,7 @@
         "universal-cookie": "^4.0.4",
         "webpack": "^5.50.0",
         "webpack-cli": "^4.7.2",
-        "webpack-pwa-manifest": "^4.3.0"
+        "webpack-pwa-manifest": "^4.3.0",
+        "workbox-webpack-plugin": "^6.2.4"
     }
 }

frontend/webpack.config.js

@@ -3,6 +3,7 @@ var path = require("path");
 var WebpackPwaManifest = require("webpack-pwa-manifest");
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 var { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
 
 var mode = "development";
 var BUILD_DIR = path.resolve(__dirname, "../build/public/");
@@ -84,6 +85,11 @@ const config = {
           src: path.resolve(__dirname, "img/android-chrome-512x512.png"),
           sizes: [96, 128, 192, 256, 384, 512],
         },
+        {
+          src: path.resolve(__dirname, "img/maskable_icon_x512.png"),
+          size: "512x512",
+          purpose: "maskable",
+        },
         {
           src: path.resolve(__dirname, "img/apple-touch-icon.png"),
           sizes: [80, 120, 152, 167, 180],
@@ -91,6 +97,7 @@ const config = {
         },
       ],
     }),
+    new WorkboxPlugin.GenerateSW(),
   ],
   resolve: {
     extensions: [".js"],