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/app.py
+++ b/app.py
@@ -30,7 +30,7 @@ APP_PASSWORD = os.environ.get("PASSWORD", "")
 def require_login():
    if not APP_PASSWORD:
        return
-    if request.endpoint in ("login", "static"):
+    if request.endpoint in ("login", "static", "service_worker", "offline"):
        return
    if not session.get("authenticated"):
        if request.path.startswith("/api/"):
@@ -170,6 +170,16 @@ def run_download(job_id: str, urls: list[str], options: dict):
            jobs[job_id]["output"] = jobs[job_id].get("output", []) + [str(e)]


+@app.route("/sw.js")
+def service_worker():
+    return send_from_directory("static", "sw.js", mimetype="application/javascript")
+
+
+@app.route("/offline")
+def offline():
+    return send_from_directory("static", "offline.html")
+
+
@app.route("/login", methods=["GET", "POST"])
 def login():
    if request.method == "POST":
--- 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;
+    }
+});
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,6 +5,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Votify Web</title>
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="theme-color" content="#1db954">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Votify Web">
+    <link rel="apple-touch-icon" href="/static/icons/icon-192x192.png">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
@@ -525,6 +531,12 @@

        loadSettings();
        checkCookies();
+
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/sw.js')
+                .then(reg => console.log('SW registered, scope:', reg.scope))
+                .catch(err => console.error('SW registration failed:', err));
+        }
    </script>
 </body>
 </html>
--- a/templates/login.html
+++ b/templates/login.html
@@ -5,6 +5,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Votify Web - Login</title>
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="theme-color" content="#1db954">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Votify Web">
+    <link rel="apple-touch-icon" href="/static/icons/icon-192x192.png">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
@@ -40,5 +46,12 @@
        <input type="password" name="password" placeholder="Password" autofocus required>
        <button type="submit">Sign In</button>
    </form>
+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/sw.js')
+                .then(reg => console.log('SW registered, scope:', reg.scope))
+                .catch(err => console.error('SW registration failed:', err));
+        }
+    </script>
 </body>
 </html>