Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ObsiGate/PWA_CHANGELOG.md

5.9 KiB
Raw Blame History

Changelog PWA - ObsiGate

Version 1.5.0 - Support PWA Complet

🎉 Nouvelles Fonctionnalités

Progressive Web App (PWA)

  • ✅ Manifeste Web (manifest.json) avec métadonnées complètes
  • ✅ Service Worker (sw.js) pour le mode hors ligne et le cache
  • ✅ Icônes PWA en multiples tailles (72px à 512px)
  • ✅ Installation native sur desktop et mobile
  • ✅ Mode hors ligne avec stratégies de cache intelligentes
  • ✅ Notifications de mise à jour avec interface élégante
  • ✅ Raccourcis d'application (recherche rapide)

Fichiers Ajoutés

Frontend

  • frontend/manifest.json - Manifeste PWA
  • frontend/sw.js - Service Worker
  • frontend/icons/ - Répertoire des icônes PWA (SVG)
    • icon-72x72.svg à icon-512x512.svg
    • icon-192x192-maskable.svg, icon-512x512-maskable.svg
    • search-96x96.svg
    • README.md - Guide de conversion des icônes

Scripts

  • generate_pwa_icons.py - Générateur d'icônes PWA automatique

Documentation

  • PWA_GUIDE.md - Guide complet d'utilisation PWA
  • PWA_CHANGELOG.md - Ce fichier

Modifications Frontend

index.html

  • Ajout des meta tags PWA (description, theme-color, mobile-web-app-capable)
  • Ajout du lien vers le manifeste
  • Ajout des icônes Apple Touch
  • Ajout du favicon SVG

app.js

  • Fonction registerServiceWorker() pour enregistrer le SW
  • Fonction showUpdateNotification() pour les mises à jour
  • Gestion de l'événement beforeinstallprompt pour l'installation
  • Gestion de l'événement appinstalled avec notification toast

style.css

  • Styles pour .pwa-update-notification
  • Styles pour .pwa-update-content
  • Styles pour les boutons de mise à jour
  • Animation slideInUp pour les notifications
  • Responsive mobile pour les notifications PWA

Modifications Backend

main.py

  • Route GET /sw.js pour servir le service worker
    • Headers: Cache-Control: no-cache, Service-Worker-Allowed: /
  • Route GET /manifest.json pour servir le manifeste
    • Headers: Cache-Control: public, max-age=3600

🔧 Configuration

Service Worker

Stratégies de Cache

  • Cache First : Assets statiques (HTML, CSS, JS, icônes)
  • Network First : API et données dynamiques
  • Fallback gracieux : Affichage hors ligne élégant

Gestion du Cache

  • Cache statique : obsigate-v1.4.0-static
  • Cache dynamique : obsigate-v1.4.0-dynamic (max 50 entrées)
  • Nettoyage automatique des anciens caches
  • Vérification des mises à jour toutes les 60 secondes

Exclusions

  • Endpoints SSE (/api/events)
  • Endpoints d'authentification (/api/auth/*)
  • Requêtes non-GET

Manifeste PWA

Métadonnées

  • Nom : "ObsiGate"
  • Description complète en français
  • Thème : #2563eb (bleu)
  • Background : #1a1a1a (sombre)
  • Display : standalone (mode app)
  • Orientation : any

Icônes

  • 8 tailles régulières (72px à 512px)
  • 2 icônes maskables (192px, 512px)
  • Format : SVG (convertible en PNG)

Raccourcis

  • Recherche : /?action=search

📱 Compatibilité

Fonctionnalité Chrome Edge Firefox Safari iOS Safari Android
Installation ✅ ✅ ❌ ⚠️ ✅ ✅
Service Worker ✅ ✅ ✅ ✅ ✅ ✅
Mode Hors Ligne ✅ ✅ ✅ ✅ ✅ ✅
Notifications ✅ ✅ ✅ ❌ ❌ ✅
Raccourcis ✅ ✅ ❌ ❌ ❌ ✅

🚀 Utilisation

Installation Desktop

  1. Ouvrir ObsiGate dans Chrome/Edge
  2. Cliquer sur l'icône d'installation dans la barre d'adresse
  3. Confirmer l'installation

Installation Mobile (Android)

  1. Ouvrir ObsiGate dans Chrome
  2. Menu ⋮ → "Ajouter à l'écran d'accueil"
  3. Confirmer

Installation iOS

  1. Ouvrir ObsiGate dans Safari
  2. Bouton Partager 📤
  3. "Sur l'écran d'accueil"
  4. Confirmer

🔍 Tests

Vérifications Effectuées

  • ✅ Manifeste valide (DevTools → Application → Manifest)
  • ✅ Service Worker enregistré (DevTools → Application → Service Workers)
  • ✅ Cache fonctionnel (DevTools → Application → Cache Storage)
  • ✅ Mode hors ligne opérationnel (DevTools → Network → Offline)
  • ✅ Notifications de mise à jour
  • ✅ Installation sur desktop (Chrome, Edge)
  • ✅ Responsive design maintenu

Lighthouse Score

  • PWA : 90-100/100 (attendu)
  • Performance : Maintenu
  • Accessibilité : Maintenu
  • Best Practices : Maintenu
  • SEO : Maintenu

📝 Notes de Migration

Pour les Utilisateurs Existants

  • Aucune action requise
  • Le PWA est optionnel
  • L'application web fonctionne normalement sans installation
  • Le service worker s'enregistre automatiquement

Pour les Développeurs

  • Les icônes SVG peuvent être converties en PNG si nécessaire
  • Le script generate_pwa_icons.py peut être personnalisé
  • Le service worker peut être désactivé en commentant registerServiceWorker()

🐛 Problèmes Connus

  • Firefox Desktop : Pas d'installation native (limitation du navigateur)
  • Safari Desktop : Support PWA limité (limitation du navigateur)
  • iOS : Pas de notifications push (limitation iOS)

🔜 Améliorations Futures

  • Background Sync pour les modifications hors ligne
  • Notifications push pour les mises à jour de vaults
  • Cache prédictif basé sur l'historique
  • Stratégies de cache configurables
  • Support des screenshots dans le manifeste
  • Conversion automatique SVG → PNG au build

📚 Documentation

  • PWA_GUIDE.md - Guide complet d'utilisation et de configuration
  • frontend/icons/README.md - Instructions de conversion des icônes
  • Commentaires inline dans sw.js et app.js

🙏 Remerciements

Merci à la communauté PWA pour les standards et bonnes pratiques.

ObsiGate v1.5.0 - Maintenant disponible en Progressive Web App ! 🎉