feat: added PWA support

2026-03-07 15:48:27 +01:00
parent acfbe71baa
commit fc83bab9f7
8 changed files with 150 additions and 1 deletions
--- a/static/icons/icon-192x192.png
+++ b/static/icons/icon-192x192.png
--- a/static/icons/icon-512x512.png
+++ b/static/icons/icon-512x512.png
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -0,0 +1,23 @@
+{
+  "name": "Votify Web",
+  "short_name": "Votify",
+  "description": "Music download manager",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#121212",
+  "theme_color": "#1db954",
+  "icons": [
+    {
+      "src": "/static/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}
--- a/static/offline.html
+++ b/static/offline.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Votify Web - Offline</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #121212; color: #fff; display: flex; align-items: center;
+            justify-content: center; min-height: 100vh; margin: 0; text-align: center;
+        }
+        h1 span { color: #1db954; }
+        p { color: #b3b3b3; margin-top: 16px; }
+        button {
+            margin-top: 24px; background: #1db954; color: #000; border: none;
+            padding: 12px 32px; border-radius: 20px; font-size: 1rem;
+            font-weight: 600; cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <h1><span>Votify</span> Web</h1>
+        <p>You are currently offline.<br>Please check your connection and try again.</p>
+        <button onclick="window.location.reload()">Retry</button>
+    </div>
+</body>
+</html>
--- a/static/sw.js
+++ b/static/sw.js
@@ -0,0 +1,62 @@
+const CACHE_NAME = 'votify-v1';
+const APP_SHELL = [
+    '/',
+    '/static/favicon.ico',
+    '/static/manifest.json',
+    '/static/icons/icon-192x192.png',
+    '/static/icons/icon-512x512.png',
+    '/offline',
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(cache => cache.addAll(APP_SHELL))
+            .then(() => self.skipWaiting())
+    );
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(
+        caches.keys().then(keys =>
+            Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
+        ).then(() => self.clients.claim())
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    const url = new URL(event.request.url);
+
+    // API calls: network only
+    if (url.pathname.startsWith('/api/')) {
+        return;
+    }
+
+    // Navigation requests: network first, cache fallback, then offline page
+    if (event.request.mode === 'navigate') {
+        event.respondWith(
+            fetch(event.request)
+                .then(response => {
+                    const clone = response.clone();
+                    caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
+                    return response;
+                })
+                .catch(() => caches.match(event.request).then(r => r || caches.match('/offline')))
+        );
+        return;
+    }
+
+    // Static assets: cache first, network fallback
+    if (url.pathname.startsWith('/static/')) {
+        event.respondWith(
+            caches.match(event.request).then(cached =>
+                cached || fetch(event.request).then(response => {
+                    const clone = response.clone();
+                    caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
+                    return response;
+                })
+            )
+        );
+        return;
+    }
+});