diff --git a/README.md b/README.md index e7a99a4..227e776 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,9 @@ kaubuntu.re est une interface web responsive qui permet de consulter et recherch - Recherche de contenu - Interface responsive (mobile et desktop) - Intégration avec une instance PeerTube +- **Progressive Web App (PWA)** avec installation native +- Mode hors ligne avec cache intelligent +- Détection automatique d'état de connexion ## Technologies utilisées @@ -21,6 +24,8 @@ kaubuntu.re est une interface web responsive qui permet de consulter et recherch - CSS3 avec Media Queries pour le responsive design - PHP pour le backend - JavaScript pour les interactions côté client +- **Service Worker** pour le cache offline et PWA +- **Web App Manifest** pour l'installation native - Bibliothèques externes via CDN: - Font Awesome (icônes) - jQuery @@ -45,11 +50,15 @@ kaubuntu.re est une interface web responsive qui permet de consulter et recherch │ ├── mobile-menu.php │ ├── featured-videos.php │ ├── recent-videos.php -│ └── categories.php +│ ├── categories.php +│ └── pwa-init.php ├── index.php ├── video.php ├── categories.php ├── search.php +├── sw.js # Service Worker pour PWA +├── site.webmanifest # Manifest PWA +├── browserconfig.xml # Configuration Windows └── README.md ``` @@ -57,6 +66,7 @@ kaubuntu.re est une interface web responsive qui permet de consulter et recherch 1. Clonez ce dépôt 2. Configurez votre serveur web (Apache, Nginx, etc.) pour pointer vers le répertoire racine +3. **Important :** Assurez-vous que votre serveur supporte HTTPS (requis pour PWA) ## Configuration @@ -120,14 +130,49 @@ Les fichiers `sitemap.xml`, `robots.txt` et `site.webmanifest` contiennent le no Ces fichiers sont listés dans le `.gitignore` afin que vos modifications ne soient pas suivies par Git, ce qui vous permet de personnaliser votre instance sans affecter le code source principal. +## Progressive Web App (PWA) + +Cette plateforme est une PWA complète offrant : + +### Fonctionnalités PWA + +- **Installation native** : Bouton d'installation automatique dans l'interface +- **Mode hors ligne** : Cache intelligent des pages et ressources visitées +- **Détection d'état** : Indicateur visuel en cas de perte de connexion +- **Performance** : Chargement instantané des ressources en cache +- **Responsive** : Interface adaptée pour l'utilisation en application mobile + +### Comment installer l'application + +1. **Automatique** : Un bouton "Installer" apparaît dans le header lors de la première visite +2. **Manuel** : + - **Chrome/Edge** : Menu → "Installer kaubuntu.re" + - **Safari iOS** : Partager → "Ajouter à l'écran d'accueil" + - **Firefox Android** : Menu → "Installer" + +### Compatibilité PWA + +- ✅ Chrome/Edge (Android/Desktop) +- ✅ Safari (iOS 11.3+) +- ✅ Firefox (Android) +- ✅ Samsung Internet + +### Fichiers PWA + +- `sw.js` : Service Worker gérant le cache et mode offline +- `site.webmanifest` : Configuration de l'application (nom, icônes, etc.) +- `browserconfig.xml` : Support des tuiles Windows + ## Déploiement Pour déployer sur un serveur mutualisé: 1. Assurez-vous que votre hébergeur supporte PHP (version 7.0 minimum recommandée) -2. Transférez tous les fichiers via FTP dans le répertoire racine de votre site -3. Vérifiez que les permissions des fichiers sont correctement définies (644 pour les fichiers, 755 pour les dossiers) -4. Configurez votre domaine pour pointer vers le dossier où vous avez installé l'application +2. **Configurez HTTPS** (obligatoire pour les fonctionnalités PWA) +3. Transférez tous les fichiers via FTP dans le répertoire racine de votre site +4. Vérifiez que les permissions des fichiers sont correctement définies (644 pour les fichiers, 755 pour les dossiers) +5. Configurez votre domaine pour pointer vers le dossier où vous avez installé l'application +6. Testez l'installation PWA via les outils de développement du navigateur ## Développement