icons

index.html

@@ -29,15 +29,16 @@
     <meta name="twitter:image:alt" content="Guy in a blue suit and cape presenting a smartphone showing a QR code pointing to the BezahlBrudi webapp" />
 
     <!-- icons and color -->
-    <meta name="theme-color" content="#ff0000">
+    <meta name="theme-color" content="#000000">
     <meta name="theme-scheme" content="dark light">
     <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png">
     <link rel="icon" type="image/svg+xml" sizes="any" href="/img/favicon.svg">
     <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
-    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="shortcut icon" href="/favicon.ico"> -->
+    <!-- PWA -->
     <link rel="manifest" href="/site.webmanifest">
 
-    <title>BezahlBrudi</title>
+    <title>🦸 BezahlBrudi</title>
 
     <style>
         /* Chrome, Safari, Edge, Opera */
@@ -51,6 +52,9 @@
         input[type=number] {
             -moz-appearance: textfield;
         }
+        div#qr-code canvas {
+            max-width: 100%;
+        }
     </style>
     <link rel="stylesheet" href="css/bulma.min.css">
     <script src="js/qr-creator.min.js"></script>
@@ -130,7 +134,7 @@
 <footer class="footer">
     <div class="content has-text-centered">
         <p>
-            <strong>BezahlBrudi v1.0.6</strong> by <a href="https://xengi.de">XenGi</a>.
+            <strong>BezahlBrudi v1.1.0</strong> by <a href="https://xengi.de">XenGi</a>.
             The source code is licensed <a href="https://opensource.org/license/mit">MIT</a>. Find the source code on <a href="https://gitlab.com/xengi/bezahlbrudi/">GitLab</a>.
             <br/>
             This site doesn't store any data outside your browser. This site doesn't provide any financial services. It is a simple QR code generator.

js/index.js

@@ -255,7 +255,7 @@ validatePurpose(document.querySelector("#purpose input"));
 // generate qr code on first visit
 regenerate();
 
-if ('serviceWorker' in navigator) {
+if ("serviceWorker" in navigator) {
-  navigator.serviceWorker.register('/js/service-worker.js');
+  navigator.serviceWorker.register("/js/service-worker.js");
 }
 

js/service-worker.js

@@ -1,24 +1,26 @@
-self.addEventListener('install', event => {
+/*
-  event.waitUntil(
+const cacheName = "cache";
-    caches.open('app-cache').then(cache => {
+const precachedResources = [
-      return cache.addAll([
+  '/',
-        '/',
+  '/index.html',
-        '/index.html',
+  '/css/bulma.min.css',
-        '/css/bulma.min.css',
+  '/js/index.js',
-        '/js/index.js',
+  '/js/qr-creator.min.js',
-        '/js/qr-creator.min.js',
+  '/img/icon-192.png',
-        '/img/icon-192.png',
+  '/img/icon-512.png'
-        '/img/icon-512.png'
+];
-      ]);
+
-    })
+async function precache() {
-  );
+  const cache = await caches.open(cacheName);
+  return cache.addAll(precachedResources);
+}
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(precache());
 });
+*/
 
-self.addEventListener('fetch', event => {
+self.addEventListener("fetch", event => {
-  event.respondWith(
+  event.respondWith(fetch(event.request));
-    caches.match(event.request).then(response => {
-      return response || fetch(event.request);
-    })
-  );
 });
 

site.webmanifest

@@ -1,21 +1,26 @@
 {
-  "name": "BezahlBrudi",
+  "id": "https://bezahlbrudi.jetzt",
-  "short_name": "BezahlBrudi",
+  "scope": "https://bezahlbrudi.jetzt",
+  "name": "🦸 BezahlBrudi",
+  "short_name": "🦸 BB",
+  "description": "Webapp that generates GiroCodes so that you can easily exchange money with friends and family without involving third party financial services",
+  "categories": ["finance", "utilities"],
+  "start_url": "/",
   "icons": [
     {
-      "src": "/img/web-app-manifest-192x192.png",
+      "src": "/img/icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/img/web-app-manifest-512x512.png",
+      "src": "/img/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
     }
   ],
-  "theme_color": "#ffffff",
+  "theme_color": "#111111",
-  "background_color": "#ffffff",
+  "background_color": "#000000",
-  "display": "standalone"
+  "display": "fullscreen"
 }