stream: make the web player installable as a PWA
Wire up a web manifest, service worker and icon routes so the player can be installed on mobile. The static manifest stays generic; the page regenerates it at runtime from STATION_NAME so an instance keeps its name. The service worker only caches the app shell, never the live stream or the playback APIs. Icons (192/512, maskable and apple-touch) are rasterized from the favicon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
976f009297
commit
c73b71d32f
10 changed files with 239 additions and 0 deletions
61
stream/sw.js
Normal file
61
stream/sw.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// Service worker minimal : son seul rôle indispensable est de rendre la webapp
|
||||
// « installable » (critère PWA d'Android/Chrome) en présentant un gestionnaire
|
||||
// de requêtes. Accessoirement, il met en cache la coquille de l'application
|
||||
// (page, icônes, manifest) pour que la fenêtre autonome s'ouvre instantanément,
|
||||
// même hors ligne.
|
||||
//
|
||||
// Rien de ce qui est « vivant » ne passe par le cache : le flux audio
|
||||
// (/radio.mp3) et toutes les API de lecture (/nowplaying, /history, /queue,
|
||||
// /skip…) vont toujours directement au réseau. On se contente donc de gérer les
|
||||
// quelques ressources statiques de la coquille.
|
||||
|
||||
const CACHE = "nemufm-shell-v1";
|
||||
const SHELL = [
|
||||
"/",
|
||||
"/manifest.webmanifest",
|
||||
"/favicon.svg",
|
||||
"/icon-192.png",
|
||||
"/icon-512.png",
|
||||
"/icon-maskable-512.png",
|
||||
"/apple-touch-icon.png",
|
||||
];
|
||||
|
||||
self.addEventListener("install", (e) => {
|
||||
e.waitUntil(caches.open(CACHE).then((c) => c.addAll(SHELL)));
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
self.addEventListener("activate", (e) => {
|
||||
// Purge des anciennes versions de coquille.
|
||||
e.waitUntil(
|
||||
caches.keys().then((keys) =>
|
||||
Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
|
||||
)
|
||||
);
|
||||
self.clients.claim();
|
||||
});
|
||||
|
||||
self.addEventListener("fetch", (e) => {
|
||||
const req = e.request;
|
||||
if (req.method !== "GET") return;
|
||||
const url = new URL(req.url);
|
||||
|
||||
// Hors périmètre (CDN d'arrière-plan…) ou ressources vivantes : on laisse le
|
||||
// navigateur faire, sans interception ni cache.
|
||||
if (url.origin !== location.origin) return;
|
||||
const shellPaths = new Set(SHELL);
|
||||
const isShell = url.pathname === "/" ? true : shellPaths.has(url.pathname);
|
||||
if (!isShell) return; // flux et API : réseau direct, pas de cache.
|
||||
|
||||
// Coquille : réseau d'abord (pour récupérer une version fraîche), repli sur le
|
||||
// cache si le réseau manque, avec mise à jour du cache au passage.
|
||||
e.respondWith(
|
||||
fetch(req)
|
||||
.then((resp) => {
|
||||
const copy = resp.clone();
|
||||
caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => {});
|
||||
return resp;
|
||||
})
|
||||
.catch(() => caches.match(req).then((r) => r || caches.match("/")))
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue