feat: introduce progressive web app (pwa)

Source: https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript Inludes pwa caching. Signed-off-by: Conrad Zelck <git@simpel.cc>

feat: introduce progressive web app (pwa)
44d5d67f · Conrad Zelck · 523db091 · 44d5d67f · 44d5d67f · 44d5d67f
Unverified Commit 44d5d67f authored 1 year ago by Conrad Zelck
--- a/icons/apple-icon-precomposed.png
+++ b/icons/apple-icon-precomposed.png
--- a/icons/apple-icon.png
+++ b/icons/apple-icon.png
--- a/icons/favicon-16x16.png
+++ b/icons/favicon-16x16.png
--- a/icons/favicon-32x32.png
+++ b/icons/favicon-32x32.png
--- a/icons/favicon-96x96.png
+++ b/icons/favicon-96x96.png
--- a/icons/icon-maskable-512x512.png
+++ b/icons/icon-maskable-512x512.png
--- a/icons/icon-rounded-512x512.png
+++ b/icons/icon-rounded-512x512.png
--- a/icons/ms-icon-144x144.png
+++ b/icons/ms-icon-144x144.png
--- a/icons/ms-icon-150x150.png
+++ b/icons/ms-icon-150x150.png
--- a/icons/ms-icon-310x310.png
+++ b/icons/ms-icon-310x310.png
--- a/icons/ms-icon-70x70.png
+++ b/icons/ms-icon-70x70.png
--- a/index.php
+++ b/index.php
@@ -6,6 +6,23 @@
    <!-- <title>FreqBuddy</title> -->
    <script src="script.min.js" defer></script>
    <link rel="stylesheet" href="style.min.css">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/icons/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+    <meta name="msapplication-TileColor" content="#555555">
+    <meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
+    <meta name="theme-color" content="#555555">
  </head>
  <body>
    <header>
@@ -154,4 +171,5 @@
      <div class="space"></div>
    </main>
  </body>
+  <script src="app.min.js"></script>
 </html>
--- a/manifest.json
+++ b/manifest.json
+{
+    "name": "FreqBuddy",
+    "short_name": "FreqBuddy",
+    "description": "FreqBuddy berechnet die besten, untereinander störungsfreien Funkfrequenzen innerhalb eines TV-Kanals (8 MHz-Raster).",
+    "start_url": "/index.php",
+    "display": "standalone",
+    "orientation": "portrait-primary",
+    "lang": "de",
+    "theme_color": "#555555",
+    "background_color": "#555555",
+    "icons": [
+        {
+            "src": "icons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "0.75"
+        },
+        {
+            "src": "icons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1.0"
+        },
+        {
+            "src": "icons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+        {
+            "src": "icons/android-icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
+        },
+        {
+            "src": "icons/android-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image\/png",
+            "density": "3.0"
+        },
+        {
+            "src": "icons/android-icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image\/png",
+            "density": "4.0"
+        },
+        {
+            "src": "icons/icon-maskable-512x512.png",
+            "purpose": "maskable",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/icon-rounded-512x512.png",
+            "purpose": "any",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
\ No newline at end of file
--- a/manifest.min.json
+++ b/manifest.min.json
+{"name":"FreqBuddy","short_name":"FreqBuddy","description":"FreqBuddy berechnet die besten, untereinander störungsfreien Funkfrequenzen innerhalb eines TV-Kanals (8 MHz-Raster).","start_url":"/index.php","display":"standalone","orientation":"portrait-primary","lang":"de","theme_color":"#555555","background_color":"#555555","icons":[{"src":"icons/android-icon-36x36.png","sizes":"36x36","type":"image\/png","density":"0.75"},{"src":"icons/android-icon-48x48.png","sizes":"48x48","type":"image\/png","density":"1.0"},{"src":"icons/android-icon-72x72.png","sizes":"72x72","type":"image\/png","density":"1.5"},{"src":"icons/android-icon-96x96.png","sizes":"96x96","type":"image\/png","density":"2.0"},{"src":"icons/android-icon-144x144.png","sizes":"144x144","type":"image\/png","density":"3.0"},{"src":"icons/android-icon-192x192.png","sizes":"192x192","type":"image\/png","density":"4.0"},{"src":"icons/icon-maskable-512x512.png","purpose":"maskable","sizes":"512x512","type":"image/png"},{"src":"icons/icon-rounded-512x512.png","purpose":"any","sizes":"512x512","type":"image/png"}]}
\ No newline at end of file
--- a/serviceWorker.js
+++ b/serviceWorker.js
+const staticFreqBuddy = "freq-buddy-site-v1"
+const assets = [
+    "/index.php",
+    "/script.min.js",
+    "/app.min.js",
+    "/style.min.css",
+    "/Simpel_256px_eco.webp",
+    "/github.svg",
+]
+self.addEventListener("install", installEvent => {
+    installEvent.waitUntil(
+        caches.open(staticFreqBuddy).then(cache => {
+            cache.addAll(assets)
+        })
+    )
+})
+self.addEventListener("fetch", fetchEvent => {
+    fetchEvent.respondWith(
+        caches.match(fetchEvent.request).then(res => {
+            return res || fetch(fetchEvent.request)
+        })
+    )
+})
--- a/serviceWorker.min.js
+++ b/serviceWorker.min.js
+const staticFreqBuddy="freq-buddy-site-v1",assets=["/index.php","/script.min.js","/app.min.js","/style.min.css","/Simpel_256px_eco.webp","/github.svg"];self.addEventListener("install",(e=>{e.waitUntil(caches.open(staticFreqBuddy).then((e=>{e.addAll(assets)})))})),self.addEventListener("fetch",(e=>{e.respondWith(caches.match(e.request).then((s=>s||fetch(e.request))))}));
\ No newline at end of file