Add PWA manifest, icons and offline service worker to the admin app
- Static web app manifest (standalone, brand-token colours) with 192/512 "any" icons and a 512 maskable icon, generated as real PNGs by admin/scripts/generate-icons.mjs (zlib only, no network). - Hand-written public/sw.js: precaches the shell on install, prunes stale caches on activate, falls back to the cached index.html for offline navigations, serves same-origin static assets cache-first; never handles cross-origin or non-GET requests. - registerServiceWorker() registers /sw.js only in production builds and logs on failure; called from main.tsx. index.html links the manifest, theme colour and apple-touch-icon. - Vitest coverage for manifest installability, icon PNG dimensions, the worker's install/activate/fetch behaviour and the production guard. Task: 96ab3c0b-7554-4098-8af1-2be7815f8929 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "NestQuest Admin",
|
||||
"short_name": "NestQuest",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#f4f4f6",
|
||||
"theme_color": "#3b3ab8",
|
||||
"icons": [
|
||||
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
|
||||
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
|
||||
{ "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* NestQuest Admin service worker — hand-written, served from the site root.
|
||||
Precaches the app shell, serves static assets cache-first, and falls back
|
||||
to the cached shell for navigations when offline. Only same-origin GET
|
||||
requests are handled; cross-origin requests (Authentik, the API host) are
|
||||
never intercepted or cached. */
|
||||
|
||||
const VERSION = "v1";
|
||||
const SHELL_CACHE = `nestquest-admin-shell-${VERSION}`;
|
||||
const RUNTIME_CACHE = `nestquest-admin-runtime-${VERSION}`;
|
||||
const CURRENT_CACHES = [SHELL_CACHE, RUNTIME_CACHE];
|
||||
|
||||
const SHELL_URLS = [
|
||||
"/",
|
||||
"/index.html",
|
||||
"/manifest.webmanifest",
|
||||
"/icons/icon-192.png",
|
||||
"/icons/icon-512.png",
|
||||
"/icons/icon-maskable-512.png",
|
||||
];
|
||||
|
||||
// Request destinations treated as static assets (cache-first). Anything else
|
||||
// same-origin (e.g. API calls) goes straight to the network.
|
||||
const STATIC_DESTINATIONS = ["script", "style", "image", "font", "manifest"];
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
event.waitUntil(
|
||||
caches
|
||||
.open(SHELL_CACHE)
|
||||
.then((cache) => cache.addAll(SHELL_URLS))
|
||||
.then(() => self.skipWaiting()),
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener("activate", (event) => {
|
||||
event.waitUntil(
|
||||
caches
|
||||
.keys()
|
||||
.then((keys) =>
|
||||
Promise.all(
|
||||
keys.filter((key) => !CURRENT_CACHES.includes(key)).map((key) => caches.delete(key)),
|
||||
),
|
||||
)
|
||||
.then(() => self.clients.claim()),
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener("fetch", (event) => {
|
||||
const request = event.request;
|
||||
if (request.method !== "GET") return;
|
||||
if (new URL(request.url).origin !== self.location.origin) return;
|
||||
|
||||
if (request.mode === "navigate") {
|
||||
event.respondWith(
|
||||
fetch(request).catch(() =>
|
||||
caches.match("/index.html", { cacheName: SHELL_CACHE }).then(
|
||||
(cached) => cached || Response.error(),
|
||||
),
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (STATIC_DESTINATIONS.includes(request.destination)) {
|
||||
event.respondWith(cacheFirst(request));
|
||||
}
|
||||
});
|
||||
|
||||
async function cacheFirst(request) {
|
||||
const cached = await caches.match(request);
|
||||
if (cached) return cached;
|
||||
const response = await fetch(request);
|
||||
if (response.ok && response.type === "basic") {
|
||||
const cache = await caches.open(RUNTIME_CACHE);
|
||||
await cache.put(request, response.clone());
|
||||
}
|
||||
return response;
|
||||
}
|
||||
Reference in New Issue
Block a user