feat: add styled PWA update modal with auto cache purge

This commit is contained in:
2026-07-24 19:35:13 +04:00
parent f760dfb72c
commit 7f1bdaa2ab
14 changed files with 331 additions and 52 deletions
+30 -6
View File
@@ -192,7 +192,8 @@ Toutes ces sources sont modifiables dans `includes/config.local.php` (voir <<fr-
│ ├── search.js # Cartes cliquables de la recherche
│ ├── mastodon-config.php # Configuration JS de la timeline (servie en JS)
│ ├── mastodon-timeline.umd.js # mastodon-embed-timeline v4.7.0 (vendored)
── pleroma-adapter.js # Adaptateur Pleroma → API Mastodon
── pleroma-adapter.js # Adaptateur Pleroma → API Mastodon
│ └── pwa-update.js # Enregistrement SW + modal de mise à jour
├── uploads/ # Images d'annonces (non versionné, hors .gitkeep)
├── index.php # Page d'accueil (agrégateur)
├── video.php # Page de lecture d'une vidéo
@@ -806,7 +807,7 @@ WARNING: Le bloc `location ~* \.(php|inc|conf|config|local)$ { deny all; }` de l
- 📲 *Installation native* : bouton « Installer » dans le header à la première visite
- 🌐 *Mode hors ligne* : cache des pages visitées et des ressources statiques
- 📡 *Détection de connexion* : indicateur visuel en cas de perte réseau
- 🔄 *Mise à jour* : proposition de rechargement quand une nouvelle version est détectée
- 🔄 *Mise à jour sans friction* : quand une nouvelle version est déployée, un modal stylé la propose ; en acceptant, l'utilisateur la reçoit immédiatement — *aucune purge manuelle du cache navigateur nécessaire*
==== Stratégies de cache du Service Worker (`sw.js`)
@@ -827,7 +828,18 @@ WARNING: Le bloc `location ~* \.(php|inc|conf|config|local)$ { deny all; }` de l
| Jamais de cache ; réponse JSON 503 synthétique hors ligne
|===
TIP: Pour déployer une nouvelle version des assets, changez le suffixe de version des noms de cache dans `sw.js` (format date, ex. `08072026-0720`) : les anciens caches sont supprimés à l'activation.
==== Cycle de mise à jour automatique
Le mécanisme (`js/pwa-update.js` + `sw.js`) garantit que les visiteurs reçoivent les nouvelles versions *sans purger manuellement le cache de leur navigateur* :
. Au déploiement, *bumpez* le suffixe de version des noms de cache dans `sw.js` (format `JJMMAAAA-HHMM`, ex. `24072026-0612`)
. Au chargement d'une page, le navigateur détecte le nouveau `sw.js` et installe le nouveau Service Worker en arrière-plan ; il reste *en attente* (pas de `skipWaiting()` automatique)
. Un *modal* propose la mise à jour à l'utilisateur :
* *« Mettre à jour »* → le SW en attente reçoit `SKIP_WAITING`, purge les anciens caches à l'activation, prend le contrôle (`controllerchange`) et la page se recharge sur la nouvelle version
* *« Plus tard »* → le modal se ferme ; la mise à jour est reproposée au prochain chargement
. Une mise à jour déjà installée lors d'une visite précédente mais jamais activée est également signalée
WARNING: Pour que la détection fonctionne, `sw.js` ne doit *pas* être caché longtemps côté serveur : les configurations fournies (`conf/nginx.conf.sample`, `conf/.htaccess.sample`) le servent en `no-cache` (ainsi que `site.webmanifest`). Si vous utilisez votre propre configuration serveur, reproduisez cette règle.
==== Installation par les visiteurs
@@ -1084,7 +1096,8 @@ All of these sources can be changed in `includes/config.local.php` (see <<en-con
│ ├── search.js # Clickable search result cards
│ ├── mastodon-config.php # Timeline JS config (served as JavaScript)
│ ├── mastodon-timeline.umd.js # mastodon-embed-timeline v4.7.0 (vendored)
── pleroma-adapter.js # Pleroma → Mastodon API adapter
── pleroma-adapter.js # Pleroma → Mastodon API adapter
│ └── pwa-update.js # SW registration + update modal
├── uploads/ # Announcement images (not versioned, except .gitkeep)
├── index.php # Homepage (aggregator)
├── video.php # Video playback page
@@ -1698,7 +1711,7 @@ WARNING: The sample's `location ~* \.(php|inc|conf|config|local)$ { deny all; }`
- 📲 *Native installation*: an "Install" button in the header on first visit
- 🌐 *Offline mode*: visited pages and static assets cached
- 📡 *Connection detection*: visual indicator when the network is lost
- 🔄 *Updates*: reload prompt when a new version is detected
- 🔄 *Frictionless updates*: when a new version is deployed, a styled modal offers it; on accept, the user gets it immediately — *no manual browser-cache purge needed*
==== Service Worker caching strategies (`sw.js`)
@@ -1719,7 +1732,18 @@ WARNING: The sample's `location ~* \.(php|inc|conf|config|local)$ { deny all; }`
| Never cached; synthetic 503 JSON response when offline
|===
TIP: To deploy a new version of the assets, change the version suffix of the cache names in `sw.js` (date format, e.g. `08072026-0720`): old caches are deleted on activation.
==== Automatic update cycle
This mechanism (`js/pwa-update.js` + `sw.js`) ensures visitors receive new versions *without manually purging their browser cache*:
. When deploying, *bump* the version suffix of the cache names in `sw.js` (format `DDMMYYYY-HHMM`, e.g. `24072026-0612`)
. On page load, the browser detects the new `sw.js` and installs the new Service Worker in the background; it stays *waiting* (no automatic `skipWaiting()`)
. A *modal* offers the update to the user:
* *"Mettre à jour"* → the waiting SW receives `SKIP_WAITING`, purges old caches on activation, takes control (`controllerchange`) and the page reloads onto the new version
* *"Plus tard"* → the modal closes; the update is offered again on the next page load
. An update already installed during a previous visit but never activated is also reported
WARNING: For detection to work, `sw.js` must *not* be cached for long by the server: the provided configurations (`conf/nginx.conf.sample`, `conf/.htaccess.sample`) serve it with `no-cache` (as well as `site.webmanifest`). If you use your own server configuration, reproduce this rule.
==== Installation by visitors