Feat: PWA-Implementierung - Offline-Funktionalität hinzugefügt

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, jsonify, url_for, redirect, session
+from flask import Flask, render_template, request, jsonify, url_for, redirect, session, make_response, send_from_directory
 import pandas as pd
 import os
 import logging
@@ -320,6 +320,16 @@ def search():
         logger.error(f'Fehler bei der Suche: {str(e)}')
         return jsonify({"error": str(e)}), 500
 
+@app.route('/sw.js')
+def sw():
+    response = make_response(send_from_directory('static', 'sw.js'))
+    response.headers['Content-Type'] = 'application/javascript'
+    return response
+
+@app.route('/offline')
+def offline():
+    return render_template('offline.html')
+
 def init_app(app):
     """Initialisiert die Anwendung mit allen notwendigen Einstellungen."""
     with app.app_context():

static/manifest.json

@@ -0,0 +1,28 @@
+{
+    "name": "MEDI Kunden",
+    "short_name": "MEDI",
+    "description": "MEDI Kundenverwaltung - Offline-fähige PWA",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#4CAF50",
+    "orientation": "portrait",
+    "icons": [
+        {
+            "src": "/static/images/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/static/images/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "categories": ["business", "productivity"],
+    "lang": "de-DE",
+    "dir": "ltr",
+    "prefer_related_applications": false
+} 

static/sw.js

@@ -0,0 +1,75 @@
+const CACHE_NAME = 'medi-customers-v1';
+const urlsToCache = [
+    '/',
+    '/static/css/styles.css',
+    '/static/js/script.js',
+    '/static/images/logo.png',
+    '/static/images/icon-192x192.png',
+    '/static/images/icon-512x512.png'
+];
+
+// Installation des Service Workers
+self.addEventListener('install', event => {
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(cache => {
+                console.log('Cache geöffnet');
+                return cache.addAll(urlsToCache);
+            })
+    );
+});
+
+// Aktivierung des Service Workers
+self.addEventListener('activate', event => {
+    event.waitUntil(
+        caches.keys().then(cacheNames => {
+            return Promise.all(
+                cacheNames.map(cacheName => {
+                    if (cacheName !== CACHE_NAME) {
+                        console.log('Lösche alten Cache:', cacheName);
+                        return caches.delete(cacheName);
+                    }
+                })
+            );
+        })
+    );
+});
+
+// Fetch-Event-Handler
+self.addEventListener('fetch', event => {
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => {
+                // Cache-Treffer - gib die Antwort zurück
+                if (response) {
+                    return response;
+                }
+
+                // Kein Cache-Treffer - führe Netzwerkanfrage durch
+                return fetch(event.request)
+                    .then(response => {
+                        // Prüfe, ob wir eine gültige Antwort erhalten haben
+                        if (!response || response.status !== 200 || response.type !== 'basic') {
+                            return response;
+                        }
+
+                        // Klone die Antwort
+                        const responseToCache = response.clone();
+
+                        // Speichere die Antwort im Cache
+                        caches.open(CACHE_NAME)
+                            .then(cache => {
+                                cache.put(event.request, responseToCache);
+                            });
+
+                        return response;
+                    })
+                    .catch(() => {
+                        // Fallback für Offline-Zugriff
+                        if (event.request.mode === 'navigate') {
+                            return caches.match('/offline.html');
+                        }
+                    });
+            })
+    );
+}); 

templates/index.html

@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>medisoftware Kundensuche</title>
     <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
+    <meta name="theme-color" content="#4CAF50">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="MEDI">
+    <link rel="apple-touch-icon" href="{{ url_for('static', filename='images/icon-192x192.png') }}">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
@@ -105,6 +111,28 @@
     </footer>
 
     <script>
+        // Service Worker Registrierung
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(registration => {
+                        console.log('ServiceWorker registration successful');
+                    })
+                    .catch(err => {
+                        console.log('ServiceWorker registration failed: ', err);
+                    });
+            });
+        }
+
+        // Offline-Status-Überwachung
+        window.addEventListener('online', function() {
+            document.body.classList.remove('offline');
+        });
+
+        window.addEventListener('offline', function() {
+            document.body.classList.add('offline');
+        });
+
         let searchTimeout;
         let lastResults = [];
 

templates/offline.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Offline - MEDI Kunden</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <style>
+        .offline-container {
+            text-align: center;
+            padding: 2rem;
+            max-width: 600px;
+            margin: 2rem auto;
+        }
+        .offline-icon {
+            font-size: 4rem;
+            color: #666;
+            margin-bottom: 1rem;
+        }
+        .offline-message {
+            font-size: 1.2rem;
+            color: #333;
+            margin-bottom: 1.5rem;
+        }
+        .retry-button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        .retry-button:hover {
+            background-color: #45a049;
+        }
+    </style>
+</head>
+<body>
+    <div class="offline-container">
+        <div class="offline-icon">📡</div>
+        <h1>Sie sind offline</h1>
+        <p class="offline-message">
+            Es scheint, dass Sie keine Internetverbindung haben. 
+            Bitte überprüfen Sie Ihre Verbindung und versuchen Sie es erneut.
+        </p>
+        <button class="retry-button" onclick="window.location.reload()">
+            Erneut versuchen
+        </button>
+    </div>
+    <script>
+        // Automatische Überprüfung der Verbindung
+        window.addEventListener('online', function() {
+            window.location.reload();
+        });
+    </script>
+</body>
+</html>