🎉 Updated RASPBERRY_PI_OPTIMIERUNGEN documentation and added SETUP_OPTIMIERUNGEN guide. Also refined scheduler log and setup script for better optimization. 🖥️📚
This commit is contained in:
391
backend/setup.sh
391
backend/setup.sh
@@ -6,14 +6,16 @@
|
||||
# Optimiert für Debian/Linux (Raspberry Pi OS) - KEIN Windows-Support
|
||||
# HTTPS auf Port 443 mit automatischer SSL-Zertifikat-Generierung
|
||||
# Kiosk-Modus mit Chromium-Autostart ohne Desktop-Environment
|
||||
# Version: 4.0.0
|
||||
# RASPBERRY PI CSS/JS PERFORMANCE-OPTIMIERUNGEN INTEGRIERT
|
||||
# Automatische Hardware-Erkennung und spezifische Browser-Optimierungen
|
||||
# Version: 4.1.0 - Raspberry Pi CSS-Optimiert
|
||||
# ===================================================================
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# =========================== GLOBALE KONFIGURATION ===========================
|
||||
readonly APP_NAME="MYP Druckerverwaltung"
|
||||
readonly APP_VERSION="4.0.0"
|
||||
readonly APP_VERSION="4.1.0"
|
||||
readonly APP_DIR="/opt/myp"
|
||||
readonly HTTPS_SERVICE_NAME="myp-https"
|
||||
readonly KIOSK_SERVICE_NAME="myp-kiosk"
|
||||
@@ -84,6 +86,15 @@ check_debian_system() {
|
||||
if [ -f /proc/device-tree/model ]; then
|
||||
local pi_model=$(cat /proc/device-tree/model 2>/dev/null || echo "Unbekannt")
|
||||
info "Raspberry Pi Modell: $pi_model"
|
||||
|
||||
# Exportiere Raspberry Pi Detection für spätere Verwendung
|
||||
export IS_RASPBERRY_PI=true
|
||||
export PI_MODEL="$pi_model"
|
||||
|
||||
# Raspberry Pi spezifische Optimierungen aktivieren
|
||||
log "✅ Raspberry Pi Hardware erkannt - CSS-Optimierungen werden aktiviert"
|
||||
else
|
||||
export IS_RASPBERRY_PI=false
|
||||
fi
|
||||
}
|
||||
|
||||
@@ -555,6 +566,23 @@ if [ -z "$DISPLAY" ] && [ "$XDG_VTNR" = "1" ]; then
|
||||
--disable-web-security \
|
||||
--allow-running-insecure-content \
|
||||
--unsafely-treat-insecure-origin-as-secure=https://localhost:443 \
|
||||
--disable-gpu-compositing \
|
||||
--enable-gpu-rasterization \
|
||||
--disable-smooth-scrolling \
|
||||
--disable-2d-canvas-image-chromium \
|
||||
--disable-accelerated-2d-canvas \
|
||||
--num-raster-threads=2 \
|
||||
--enable-zero-copy \
|
||||
--disable-gpu-sandbox \
|
||||
--disable-software-rasterizer \
|
||||
--enable-low-end-device-mode \
|
||||
--disable-features=VizHitTestSurfaceLayer \
|
||||
--disable-partial-raster \
|
||||
--disable-threaded-animation \
|
||||
--disable-checker-imaging \
|
||||
--disable-new-content-rendering-timeout \
|
||||
--run-all-compositor-stages-before-draw \
|
||||
--disable-ipc-flooding-protection \
|
||||
https://localhost:443
|
||||
else
|
||||
exec firefox-esr \
|
||||
@@ -580,6 +608,68 @@ EOF
|
||||
mkdir -p "$kiosk_home/.chromium-kiosk"
|
||||
chown -R "$KIOSK_USER:$KIOSK_USER" "$kiosk_home/.chromium-kiosk"
|
||||
|
||||
# Raspberry Pi spezifische Chromium-Konfiguration
|
||||
if [ "${IS_RASPBERRY_PI:-false}" = "true" ]; then
|
||||
progress "Konfiguriere Chromium für Raspberry Pi Hardware..."
|
||||
|
||||
# Erstelle Raspberry Pi optimierte Chromium Preferences
|
||||
cat > "$kiosk_home/.chromium-kiosk/Default/Preferences" << 'EOF'
|
||||
{
|
||||
"browser" : {
|
||||
"check_default_browser" : false,
|
||||
"show_home_button" : false
|
||||
},
|
||||
"profile" : {
|
||||
"default_content_setting_values" : {
|
||||
"notifications" : 2
|
||||
},
|
||||
"password_manager_enabled" : false
|
||||
},
|
||||
"translate" : {
|
||||
"enabled" : false
|
||||
},
|
||||
"extensions" : {
|
||||
"ui" : {
|
||||
"developer_mode" : false
|
||||
}
|
||||
},
|
||||
"browser_switcher" : {
|
||||
"enabled" : false
|
||||
},
|
||||
"performance_tuning" : {
|
||||
"high_efficiency_mode" : {
|
||||
"enabled" : true
|
||||
},
|
||||
"battery_saver_mode" : {
|
||||
"enabled" : false
|
||||
}
|
||||
},
|
||||
"privacy" : {
|
||||
"ad_measurement_enabled" : false,
|
||||
"enable_do_not_track" : true
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
# Erstelle Raspberry Pi optimierte Local State
|
||||
cat > "$kiosk_home/.chromium-kiosk/Local State" << 'EOF'
|
||||
{
|
||||
"background_mode" : {
|
||||
"enabled" : false
|
||||
},
|
||||
"browser" : {
|
||||
"enabled_labs_experiments" : [ ]
|
||||
},
|
||||
"user_experience_metrics" : {
|
||||
"reporting_enabled" : false
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
chown -R "$KIOSK_USER:$KIOSK_USER" "$kiosk_home/.chromium-kiosk"
|
||||
log "✅ Raspberry Pi optimierte Chromium-Konfiguration erstellt"
|
||||
fi
|
||||
|
||||
log "✅ Automatischer Kiosk-Start konfiguriert"
|
||||
info "Der Kiosk-Modus startet automatisch beim Login des $KIOSK_USER"
|
||||
}
|
||||
@@ -1755,94 +1845,249 @@ EOF
|
||||
log " 📊 System-Limits für bessere Performance gesetzt"
|
||||
}
|
||||
|
||||
# =========================== CSS/JS OPTIMIERUNG ===========================
|
||||
# =========================== CSS/JS OPTIMIERUNG FÜR RASPBERRY PI ===========================
|
||||
optimize_static_assets() {
|
||||
log "=== STATISCHE DATEIEN OPTIMIERUNG ==="
|
||||
log "=== RASPBERRY PI CSS/JS OPTIMIERUNG ==="
|
||||
|
||||
if [ ! -d "$APP_DIR/static" ]; then
|
||||
warning "Static-Ordner nicht gefunden - überspringe Asset-Optimierung"
|
||||
return
|
||||
fi
|
||||
|
||||
progress "Analysiere und optimiere CSS/JS Dateien..."
|
||||
progress "Validiere Raspberry Pi optimierte CSS-Dateien..."
|
||||
|
||||
cd "$APP_DIR/static"
|
||||
|
||||
# Erstelle optimierte CSS-Datei durch Kombination kritischer Styles
|
||||
progress "Erstelle optimierte CSS-Kombination..."
|
||||
# Spezielle Raspberry Pi Hardware-Optimierungen
|
||||
if [ "${IS_RASPBERRY_PI:-false}" = "true" ]; then
|
||||
log "🍓 Raspberry Pi Hardware erkannt: ${PI_MODEL:-Unbekannt}"
|
||||
log "🚀 Aktiviere spezielle Performance-Optimierungen..."
|
||||
else
|
||||
info "ℹ️ Keine Raspberry Pi Hardware - verwende Standard-Optimierungen"
|
||||
fi
|
||||
|
||||
cat > css/critical.min.css << 'EOF'
|
||||
/* Kritische Styles für ersten Seitenaufbau - Inline-optimiert */
|
||||
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;line-height:1.5}
|
||||
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
|
||||
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
|
||||
.btn{display:inline-flex;align-items:center;padding:0.5rem 1rem;border:none;border-radius:0.375rem;font-weight:500;text-decoration:none;cursor:pointer;transition:all 0.15s}
|
||||
.btn-primary{background:#3b82f6;color:white}.btn-primary:hover{background:#2563eb}
|
||||
.card{background:white;border-radius:0.5rem;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
|
||||
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
|
||||
.hidden{display:none}.block{display:block}.inline-block{display:inline-block}
|
||||
.text-sm{font-size:0.875rem}.text-lg{font-size:1.125rem}
|
||||
.font-medium{font-weight:500}.font-bold{font-weight:700}
|
||||
.text-gray-600{color:#4b5563}.text-gray-900{color:#111827}
|
||||
.mb-4{margin-bottom:1rem}.mt-6{margin-top:1.5rem}.p-4{padding:1rem}
|
||||
.w-full{width:100%}.h-full{height:100%}
|
||||
@media(max-width:768px){.container{padding:0 0.5rem}.card{padding:1rem}}
|
||||
EOF
|
||||
|
||||
# Erstelle minimale JavaScript-Loader
|
||||
progress "Erstelle optimierten JavaScript-Loader..."
|
||||
# Prüfe ob optimierte CSS-Dateien existieren
|
||||
local optimized_files=(
|
||||
"css/glassmorphism.css"
|
||||
"css/optimization-animations.css"
|
||||
"css/professional-theme.css"
|
||||
"css/caching-optimizations.css"
|
||||
)
|
||||
|
||||
cat > js/loader.min.js << 'EOF'
|
||||
/*Minimaler Async Loader für bessere Performance*/
|
||||
(function(){var d=document,w=window;function loadCSS(href){var l=d.createElement('link');l.rel='stylesheet';l.href=href;l.media='print';l.onload=function(){this.media='all'};d.head.appendChild(l)}function loadJS(src,cb){var s=d.createElement('script');s.async=true;s.src=src;if(cb)s.onload=cb;d.head.appendChild(s)}w.loadAssets=function(){if(w.assetsLoaded)return;w.assetsLoaded=true;loadCSS('/static/css/tailwind.min.css');loadJS('/static/js/app.min.js')};if(d.readyState==='loading'){d.addEventListener('DOMContentLoaded',w.loadAssets)}else{w.loadAssets()}})();
|
||||
EOF
|
||||
|
||||
# Service Worker für besseres Caching
|
||||
progress "Erstelle optimierten Service Worker..."
|
||||
|
||||
cat > sw-optimized.js << 'EOF'
|
||||
const CACHE_NAME = 'myp-webapp-v1';
|
||||
const ASSETS_TO_CACHE = [
|
||||
'/',
|
||||
'/static/css/critical.min.css',
|
||||
'/static/js/loader.min.js',
|
||||
'/static/favicon.svg'
|
||||
];
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => cache.addAll(ASSETS_TO_CACHE))
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
if (event.request.destination === 'image' ||
|
||||
event.request.url.includes('/static/')) {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => response || fetch(event.request))
|
||||
);
|
||||
}
|
||||
});
|
||||
EOF
|
||||
|
||||
# Gzip-Kompression für statische Dateien
|
||||
progress "Komprimiere statische Dateien..."
|
||||
|
||||
find . -name "*.css" -o -name "*.js" -o -name "*.html" | while read file; do
|
||||
if [ -f "$file" ] && [ ! -f "$file.gz" ]; then
|
||||
gzip -c "$file" > "$file.gz" 2>/dev/null || true
|
||||
local missing_files=0
|
||||
for file in "${optimized_files[@]}"; do
|
||||
if [ ! -f "$file" ]; then
|
||||
warning "Optimierte CSS-Datei fehlt: $file"
|
||||
((missing_files++))
|
||||
else
|
||||
# Prüfe ob Datei Raspberry Pi Optimierungen enthält
|
||||
if grep -q "Raspberry Pi" "$file" 2>/dev/null; then
|
||||
log "✅ Raspberry Pi optimiert: $file"
|
||||
else
|
||||
warning "⚠️ Datei nicht für Raspberry Pi optimiert: $file"
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
if [ $missing_files -gt 0 ]; then
|
||||
warning "⚠️ $missing_files CSS-Dateien fehlen oder sind nicht optimiert"
|
||||
fi
|
||||
|
||||
# Erstelle kritische CSS-Datei für Above-the-fold Content
|
||||
progress "Erstelle kritische CSS-Datei für Raspberry Pi..."
|
||||
|
||||
cat > css/critical-raspberry-pi.min.css << 'EOF'
|
||||
/* Kritische Styles für Raspberry Pi - Maximale Performance */
|
||||
:root{--mb-primary:#0073ce;--mb-primary-dark:#005a9f;--light-bg-primary:#fff;--light-bg-secondary:#fafbfc;--light-surface:#fff;--light-text-primary:#111827;--light-text-secondary:#374151;--light-border:#e5e7eb;--dark-bg-primary:#0f172a;--dark-bg-secondary:#1e293b;--dark-surface:#1e293b;--dark-text-primary:#f8fafc;--dark-text-secondary:#e2e8f0;--dark-border:#334155}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:system-ui,-apple-system,sans-serif;line-height:1.5;background:var(--light-bg-primary);color:var(--light-text-primary)}
|
||||
.dark body{background:var(--dark-bg-primary);color:var(--dark-text-primary)}
|
||||
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
|
||||
.btn-professional{background:var(--mb-primary);color:#fff;border:none;border-radius:0.5rem;padding:0.75rem 1.5rem;font-weight:600;cursor:pointer}
|
||||
.btn-professional:hover{background:var(--mb-primary-dark)}
|
||||
.card-professional{background:var(--light-surface);border:1px solid var(--light-border);border-radius:0.75rem;padding:1.5rem}
|
||||
.dark .card-professional{background:var(--dark-surface);border-color:var(--dark-border)}
|
||||
.professional-container{background:var(--light-surface);border:1px solid var(--light-border);border-radius:0.75rem}
|
||||
.dark .professional-container{background:var(--dark-surface);border-color:var(--dark-border)}
|
||||
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
|
||||
.hidden{display:none}.block{display:block}.flex{display:flex}.items-center{align-items:center}
|
||||
.w-full{width:100%}.h-full{height:100%}
|
||||
@media(max-width:768px){.container{padding:0 0.5rem}.card-professional{padding:1rem}}
|
||||
/* Nur opacity transitions für Raspberry Pi Performance */
|
||||
.animate-fade-in{animation:fadeIn 0.2s ease-out}
|
||||
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
|
||||
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
|
||||
EOF
|
||||
|
||||
# Erstelle optimierten JavaScript-Loader ohne GPU-intensive Features
|
||||
progress "Erstelle Raspberry Pi optimierten JavaScript-Loader..."
|
||||
|
||||
cat > js/raspberry-pi-loader.min.js << 'EOF'
|
||||
/*Raspberry Pi optimierter Loader - Keine GPU-intensive Features*/
|
||||
(function(){
|
||||
var d=document,w=window;
|
||||
function loadCSS(href,media){
|
||||
var l=d.createElement('link');
|
||||
l.rel='stylesheet';
|
||||
l.href=href;
|
||||
l.media=media||'all';
|
||||
d.head.appendChild(l);
|
||||
return l;
|
||||
}
|
||||
function loadJS(src,cb){
|
||||
var s=d.createElement('script');
|
||||
s.async=true;
|
||||
s.src=src;
|
||||
if(cb)s.onload=cb;
|
||||
d.head.appendChild(s);
|
||||
return s;
|
||||
}
|
||||
w.loadOptimizedAssets=function(){
|
||||
if(w.assetsLoaded)return;
|
||||
w.assetsLoaded=true;
|
||||
loadCSS('/static/css/professional-theme.css');
|
||||
loadCSS('/static/css/glassmorphism.css');
|
||||
loadCSS('/static/css/optimization-animations.css');
|
||||
loadCSS('/static/css/caching-optimizations.css');
|
||||
if(d.querySelector('#app-js')){
|
||||
loadJS('/static/js/app.min.js');
|
||||
}
|
||||
};
|
||||
if(d.readyState==='loading'){
|
||||
d.addEventListener('DOMContentLoaded',w.loadOptimizedAssets);
|
||||
}else{
|
||||
w.loadOptimizedAssets();
|
||||
}
|
||||
})();
|
||||
EOF
|
||||
|
||||
# Service Worker für optimiertes Caching auf Raspberry Pi
|
||||
progress "Erstelle Raspberry Pi optimierten Service Worker..."
|
||||
|
||||
cat > sw-raspberry-pi.js << 'EOF'
|
||||
const CACHE_NAME = 'myp-raspberry-pi-v1';
|
||||
const CRITICAL_ASSETS = [
|
||||
'/',
|
||||
'/static/css/critical-raspberry-pi.min.css',
|
||||
'/static/js/raspberry-pi-loader.min.js',
|
||||
'/static/css/professional-theme.css',
|
||||
'/static/css/glassmorphism.css',
|
||||
'/static/css/optimization-animations.css'
|
||||
];
|
||||
|
||||
// Aggressive Caching für statische Assets
|
||||
self.addEventListener('install', event => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => {
|
||||
console.log('Raspberry Pi Cache wird geladen...');
|
||||
return cache.addAll(CRITICAL_ASSETS);
|
||||
})
|
||||
);
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
// Cache-First Strategie für bessere Performance auf schwacher Hardware
|
||||
self.addEventListener('fetch', event => {
|
||||
if (event.request.url.includes('/static/')) {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(response => {
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
return fetch(event.request).then(fetchResponse => {
|
||||
if (fetchResponse && fetchResponse.status === 200) {
|
||||
const responseClone = fetchResponse.clone();
|
||||
caches.open(CACHE_NAME)
|
||||
.then(cache => {
|
||||
cache.put(event.request, responseClone);
|
||||
});
|
||||
}
|
||||
return fetchResponse;
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Cache-Bereinigung für alte Versionen
|
||||
self.addEventListener('activate', event => {
|
||||
event.waitUntil(
|
||||
caches.keys().then(cacheNames => {
|
||||
return Promise.all(
|
||||
cacheNames.map(cacheName => {
|
||||
if (cacheName !== CACHE_NAME) {
|
||||
console.log('Entferne alte Cache-Version:', cacheName);
|
||||
return caches.delete(cacheName);
|
||||
}
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
});
|
||||
EOF
|
||||
|
||||
# CSS-Minifikation für optimierte Dateien
|
||||
progress "Minifiziere CSS-Dateien für bessere Performance..."
|
||||
|
||||
local css_files=("professional-theme.css" "glassmorphism.css" "optimization-animations.css" "caching-optimizations.css")
|
||||
|
||||
for css_file in "${css_files[@]}"; do
|
||||
if [ -f "css/$css_file" ]; then
|
||||
# Einfache CSS-Minifikation (Entfernung von Kommentaren und unnötigen Whitespaces)
|
||||
sed 's|/\*[^*]*\*\+\([^/*][^*]*\*\+\)*/||g; s/^[[:space:]]*//g; s/[[:space:]]*$//g; /^$/d' "css/$css_file" > "css/${css_file%.css}.min.css" 2>/dev/null || true
|
||||
|
||||
if [ -f "css/${css_file%.css}.min.css" ]; then
|
||||
log "✅ Minifiziert: ${css_file%.css}.min.css"
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
# Gzip-Kompression für alle CSS/JS-Dateien
|
||||
progress "Komprimiere Dateien mit Gzip..."
|
||||
|
||||
find css js -name "*.css" -o -name "*.js" | while read file; do
|
||||
if [ -f "$file" ] && [ ! -f "$file.gz" ]; then
|
||||
gzip -9 -c "$file" > "$file.gz" 2>/dev/null || true
|
||||
if [ -f "$file.gz" ]; then
|
||||
local original_size=$(wc -c < "$file" 2>/dev/null || echo "0")
|
||||
local compressed_size=$(wc -c < "$file.gz" 2>/dev/null || echo "0")
|
||||
if [ "$original_size" -gt 0 ] && [ "$compressed_size" -gt 0 ]; then
|
||||
local ratio=$((100 - (compressed_size * 100 / original_size)))
|
||||
log "✅ Komprimiert: $file (${ratio}% kleiner)"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
# Performance-Hints für Browser
|
||||
progress "Erstelle Performance-Hints für Raspberry Pi Browser..."
|
||||
|
||||
cat > performance-hints.txt << 'EOF'
|
||||
# Performance-Optimierungen für Raspberry Pi Browser:
|
||||
# 1. Alle backdrop-filter entfernt (GPU-intensiv)
|
||||
# 2. Transform-Animationen eliminiert (Layout-Thrashing)
|
||||
# 3. Box-shadows reduziert (Paint-Performance)
|
||||
# 4. Will-change Properties entfernt (Memory-Management)
|
||||
# 5. Gradient-Effekte vereinfacht (GPU-Berechnungen)
|
||||
# 6. Nur Opacity/Color Transitions (CSS-Performance)
|
||||
# 7. Kritische CSS inline geladen (Render-Blocking)
|
||||
# 8. Service Worker für aggressives Caching
|
||||
# 9. Gzip-Kompression für alle Assets
|
||||
# 10. Cache-First Strategie für statische Dateien
|
||||
EOF
|
||||
|
||||
cd "$CURRENT_DIR"
|
||||
|
||||
log "✅ Statische Dateien optimiert:"
|
||||
log " 📦 Kritische CSS-Styles kombiniert"
|
||||
log " ⚡ Asynchroner Asset-Loader erstellt"
|
||||
log " 🗜️ Gzip-Kompression angewendet"
|
||||
log " 🔄 Service Worker für Caching installiert"
|
||||
log "✅ Raspberry Pi CSS/JS-Optimierung abgeschlossen:"
|
||||
log " 🚀 Backdrop-Filter und Transform-Animationen entfernt"
|
||||
log " 📦 Kritische CSS für Above-the-fold Content erstellt"
|
||||
log " ⚡ Raspberry Pi spezifischer Asset-Loader"
|
||||
log " 🗜️ Aggressive Gzip-Kompression angewendet"
|
||||
log " 🔄 Cache-First Service Worker installiert"
|
||||
log " 📊 CSS-Minifikation für alle Dateien"
|
||||
log " 💾 Performance-optimiert für schwache Hardware"
|
||||
}
|
||||
|
||||
# =========================== HAUPTPROGRAMM ===========================
|
||||
|
||||
Reference in New Issue
Block a user