feat: make tileboard installable as web apk (#822)

Co-authored-by: Rafał Chłodnicki <[email protected]>

index.html.ejs

@@ -31,12 +31,27 @@
    <link rel="stylesheet" href="./styles/custom.css">
 
    <script>
+      window.IN_INGRESS = false;
       window.AUTH_TOKEN_OVERRIDE = null;
       window.SERVER_URL_OVERRIDE = null;
       window.REST_URL_OVERRIDE = null;
       window.WS_URL_OVERRIDE = null;
    </script>
 
+   <script>
+      // Source: https://developers.google.com/web/fundamentals/primers/service-workers
+      // License: https://www.apache.org/licenses/LICENSE-2.0
+      if (!window.IN_INGRESS && 'serviceWorker' in navigator) {
+         window.addEventListener('load', function() {
+            navigator.serviceWorker.register('./ServiceWorker.js', )
+               .catch(function(err) {
+                  // Registration failed
+                  console.log('ServiceWorker registration failed: ', err);
+               });
+         });
+      }
+   </script>
+
    <% javascripts.forEach(javascript => { %><script src="./<%= javascript %>"></script><% }) %>
 </head>
 

manifest.webmanifest

@@ -1,9 +1,16 @@
 {
   "name": "TileBoard",
-  "icons": [{
-    "src": "favicon.png",
-    "sizes": "16x16 24x24 32x32 48x48 64x64 192x192",
-    "type": "image/png"
-  }],
+  "icons": [
+    {
+      "src": "favicon.svg",
+      "sizes": "16x16 24x24 32x32 48x48 64x64 192x192 256x256 512x512",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "favicon.png",
+      "sizes": "16x16 24x24 32x32 48x48 64x64 192x192 256x256 512x512",
+      "type": "image/png"
+    }
+  ],
   "display": "fullscreen"
 }

rollup.config.js

@@ -94,6 +94,8 @@ const config = {
       }),
       copy([
          { files: './favicon.png', dest: `./${outDir}/` },
+         { files: './favicon.svg', dest: `./${outDir}/` },
+         { files: './scripts/ServiceWorker.js', dest: `./${outDir}/` },
          { files: './manifest.webmanifest', dest: `./${outDir}/` },
          { files: './images/*.*', dest: `./${outDir}/images/` },
       ]),

scripts/ServiceWorker.js

@@ -0,0 +1,4 @@
+// Installable progressive web app requires fetch handler
+self.addEventListener('fetch', function (event) {
+   event.respondWith(fetch(event.request));
+});