PWA Manifest + favicony

app/UI/@layout.latte

@@ -4,6 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Kufřík</title>
+    <link rel="icon" href="{$basePath}/favicon.ico" sizes="any">
+    <link rel="icon" href="{$basePath}/pwa/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="{$basePath}/pwa/apple-touch-icon.png">
+    <link rel="manifest" href="{$basePath}/manifest.webmanifest">
+    <meta name="theme-color" content="#1f4f8f">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Kufřík">
     
     <!-- Bootstrap 5 CSS & Icons -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -283,5 +291,10 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('{$basePath}/sw.js');
+        }
+    </script>
 </body>
 </html>

www/.htaccess

@@ -3,6 +3,9 @@
 # Allow access to all resources by default
 Require all granted
 
+# PWA manifest
+AddType application/manifest+json .webmanifest
+
 # Disable directory listing for security reasons
 <IfModule mod_autoindex.c>
 	Options -Indexes

www/manifest.webmanifest

@@ -0,0 +1,39 @@
+{
+	"id": "https://kufrik.kmetix.cz/",
+	"name": "Kufřík",
+	"short_name": "Kufřík",
+	"description": "Fakturační systém Kufřík",
+	"lang": "cs",
+	"start_url": "./",
+	"scope": "./",
+	"display": "standalone",
+	"orientation": "any",
+	"background_color": "#1f4f8f",
+	"theme_color": "#1f4f8f",
+	"icons": [
+		{
+			"src": "pwa/icon-192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "pwa/icon-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "any"
+		},
+		{
+			"src": "pwa/icon-maskable-192.png",
+			"sizes": "192x192",
+			"type": "image/png",
+			"purpose": "maskable"
+		},
+		{
+			"src": "pwa/icon-maskable-512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	]
+}

www/pwa/icon-maskable.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- Bootstrap Icons briefcase-fill, MIT. Glyph sits inside the maskable safe zone. -->
+  <rect width="512" height="512" fill="#1f4f8f"/>
+  <g fill="#ffffff" transform="translate(128 128) scale(16)">
+    <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5"/>
+    <path d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z"/>
+  </g>
+</svg>

www/pwa/icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- Bootstrap Icons briefcase-fill, MIT: https://github.com/twbs/icons -->
+  <rect width="512" height="512" fill="#1f4f8f"/>
+  <g fill="#ffffff" transform="translate(96 96) scale(20)">
+    <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5"/>
+    <path d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z"/>
+  </g>
+</svg>

www/sw.js

@@ -0,0 +1,11 @@
+/* Minimální service worker, aby šla PWA nainstalovat na plochu mobilu.
+   Požadavky neukládá do cache — aplikace zůstává online. */
+self.addEventListener('install', (event) => {
+	event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+	event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', () => {});