Feat: PWA-Implementierung - Offline-Funktionalität hinzugefügt
This commit is contained in:
12
app.py
12
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():
|
||||
|
||||
28
static/manifest.json
Normal file
28
static/manifest.json
Normal file
@@ -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
|
||||
}
|
||||
75
static/sw.js
Normal file
75
static/sw.js
Normal file
@@ -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');
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -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 = [];
|
||||
|
||||
|
||||
58
templates/offline.html
Normal file
58
templates/offline.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user