elpatron/medi-customers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
elpatron
2025-03-18 16:16:47 +01:00
parent 35645fc671
commit 4c69478fa8
5 changed files with 200 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
templates/index.html
View File

@@ -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
View 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>