update

dist/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>My App</title>

dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "My App",
+  "name": "Broadcast",
   "display": "standalone",
   "icons": [
     {

dist/styles.css

@@ -105,6 +105,10 @@ header {
   accent-color: var(--primary);
 }
 
+a {
+  color: var(--link);
+}
+
 /* text */
 
 .success {
@@ -605,6 +609,7 @@ select + .icon,
 article,
 main,
 select + .icon,
+.height-100,
 .modal > div,
 .modal main {
   height: 100%;
@@ -683,6 +688,7 @@ code {
 }
 
 .secondary,
+.secondary *,
 .helper-text,
 .error-text,
 label {
@@ -749,7 +755,8 @@ input[type="radio"]:checked::before {
 LAYOUT
 */
 /* basic */
-body {
+body,
+html {
   display: flex;
   flex-direction: column-reverse;
 
@@ -758,12 +765,17 @@ body {
   height: 100%;
 }
 
-body {
+body,
+.modal {
   padding-left: var(--safe-area-left);
   padding-right: var(--safe-area-right);
   padding-top: var(--safe-area-top);
 }
 
+.modal {
+  padding-bottom: var(--safe-area-bottom);
+}
+
 menu {
   width: 100%;
   height: var(--menu-height-mobile);

dist/support.js

@@ -1,3 +1,4 @@
+// TABS
 document.querySelector("main").addEventListener("scroll", () => {
   const links = document.querySelectorAll(".tab-link");
   links.forEach((element) => element.removeAttribute("active"));
@@ -8,3 +9,23 @@ document.querySelector("main").addEventListener("scroll", () => {
 
   if (links[currentPage]) links[currentPage].setAttribute("active", "");
 });
+
+// SERVICE WORKER
+async function registerServiceWorker() {
+  if ("serviceWorker" in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.register("/sw.js", {
+        scope: "/",
+      });
+      if (registration.installing) {
+        setTimeout(() => window.location.reload(), 500);
+      } else if (registration.active) {
+        console.log("Service worker active");
+      }
+    } catch (error) {
+      console.error(`Could not install service worker: ${error}`);
+    }
+  }
+}
+
+registerServiceWorker();

dist/sw.js

@@ -0,0 +1,38 @@
+const CACHE_VERSION = "v1";
+
+async function handleRequest(event) {
+  const responsePromise = getResponse(event);
+  event.respondWith(responsePromise);
+}
+
+async function getResponse(event) {
+  try {
+    return await fetchAndCache(event);
+  } catch {
+    return await getFromCache(event);
+  }
+}
+
+async function fetchAndCache(event) {
+  const request = event.request;
+
+  const response = await fetch(request);
+
+  const cache = await caches.open(CACHE_VERSION);
+  await cache.put(request, response.clone());
+
+  return response;
+}
+
+async function getFromCache(event) {
+  const request = event.request;
+
+  const cache = await caches.open(CACHE_VERSION);
+  const response = await cache.match(request);
+
+  return response;
+}
+
+self.addEventListener("fetch", (event) => {
+  handleRequest(event);
+});