Add "Progressive Web App (PWA)" support

.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
   env: {
     node: true,
     es2022: true, // add globals and sets parserOptions.ecmaVersion to 2022
+    serviceworker: true, // Add this line to enable serviceworker support
   },
   extends: [
     // Vue specific base rules, `eslint-plugin-vue`

src/presentation/index.html

@@ -13,6 +13,8 @@
     "
   />
   <meta name="robots" content="index,follow" />
+  <meta name="theme-color" content="#ffffff"/>
+  <link rel="manifest" href="/manifest.json">
   <link rel="icon" href="/favicon.ico">
 
   <!--
@@ -63,5 +65,18 @@ <h1>Problem loading page</h1>
   </noscript>
   <div id="app"></div>
   <script type="module" src="/main.ts"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('/service-worker.js')
+          .then(registration => {
+            console.log('Service Worker registered with scope:', registration.scope);
+          })
+          .catch(error => {
+            console.error('Service Worker registration failed:', error);
+          });
+      });
+    }
+  </script>
 </body>
 </html>

src/presentation/public/manifest.json

@@ -0,0 +1,62 @@
+{
+    "name": "privacy.sexy",
+    "short_name": "privacy.sexy",
+    "description": "Enforce privacy & security best-practices on Windows, macOS and Linux, because privacy is sexy.",
+    "version": "0.13.5",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "icons": [
+        {
+          "src": "icons/manifest-icon-192.maskable.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "any"
+        },
+        {
+          "src": "icons/manifest-icon-192.maskable.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "maskable"
+        },
+        {
+          "src": "icons/manifest-icon-512.maskable.png",
+          "sizes": "512x512",
+          "type": "image/png",
+          "purpose": "any"
+        },
+        {
+          "src": "icons/manifest-icon-512.maskable.png",
+          "sizes": "512x512",
+          "type": "image/png",
+          "purpose": "maskable"
+        }
+      ],
+      "screenshots": [
+        {
+          "src": "screenshots/screenshot-1280x720.png",
+          "sizes": "1280x720",
+          "type": "image/png",
+          "form_factor": "wide" 
+        },
+        {
+            "src": "screenshots/screenshot-1366x768.png",
+            "sizes": "1366x768",
+            "type": "image/png",
+            "form_factor": "wide" 
+        },
+        {
+            "src": "screenshots/screenshot-1600x900.png",
+            "sizes": "1600x900",
+            "type": "image/png",
+            "form_factor": "wide" 
+        },
+        {
+            "src": "screenshots/screenshot-1920x1080.png",
+            "sizes": "1920x1080",
+            "type": "image/png",
+            "form_factor": "wide" 
+        }
+      ]
+  }

src/presentation/public/service-worker.js

@@ -0,0 +1,70 @@
+// Event listener for when the service worker is installed
+self.addEventListener('install', (event) => {
+  // Log that the service worker has been installed
+  console.log('Service Worker: Installed');
+
+  // Open a cache called 'app-cache' and add the following URLs to it
+  event.waitUntil(
+    caches.open('app-cache').then((cache) => {
+      return cache.addAll([
+        '/', // root URL
+        '/icon.png',
+        '/favicon.ico',
+        '/main.ts',
+      ]);
+    }),
+  );
+});
+
+// Event listener for when the service worker receives a fetch event
+self.addEventListener('fetch', (event) => {
+  // Log that the service worker is fetching a URL
+  console.log('Service Worker: Fetching', event.request.url);
+
+  // Respond with a cached response if it exists, otherwise fetch the URL
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      // If a cached response exists, return it
+      if (response) {
+        console.log('Service Worker: Found in cache', event.request.url);
+        return response;
+      }
+
+      // If no cached response exists, fetch the URL and cache the response
+      const fetchRequest = event.request.clone();
+      return fetch(fetchRequest).then((response) => {
+        // If the response is not valid, return it without caching
+        if (!response || response.status !== 200 || response.type !== 'basic') {
+          return response;
+        }
+
+        // Cache the response and return it
+        const responseToCache = response.clone();
+        caches.open('app-cache').then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+        return response;
+      });
+    }),
+  );
+});
+
+// Event listener for when the service worker is activated
+self.addEventListener('activate', (event) => {
+  // Log that the service worker has been activated
+  console.log('Service Worker: Activated');
+
+  // Remove old caches that start with 'app-' except for 'app-cache'
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.filter((cacheName) => {
+          return cacheName.startsWith('app-') && cacheName !== 'app-cache';
+        }).map((cacheName) => {
+          return caches.delete(cacheName);
+        }),
+      );
+    }),
+  );
+});
+