Heb er een PWA van gemaakt en layout gecorrigeerd

public/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="112" fill="#0e7490"/>
+  <path d="M256 76 394 136v108c0 94-58 158-138 192-80-34-138-98-138-192V136L256 76Z" fill="#fff" opacity=".96"/>
+  <path d="m256 126 88 38v78c0 57-31 101-88 130-57-29-88-73-88-130v-78l88-38Z" fill="#0e7490"/>
+  <path d="M208 211h96M208 256h96M208 301h58" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="22"/>
+</svg>

public/sw.js

@@ -0,0 +1,40 @@
+const CACHE_NAME = "adc-bestelapp-v1";
+const APP_SHELL = ["/login", "/manifest.webmanifest", "/icon.svg"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)),
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((key) => key !== CACHE_NAME)
+          .map((key) => caches.delete(key)),
+      ),
+    ),
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  const url = new URL(request.url);
+
+  if (request.method !== "GET" || url.origin !== self.location.origin) {
+    return;
+  }
+
+  // Never cache authenticated pages or API responses containing private data.
+  if (url.pathname === "/" || url.pathname.startsWith("/api/")) {
+    return;
+  }
+
+  event.respondWith(
+    fetch(request).catch(() => caches.match(request)),
+  );
+});