feat(frontend): add PWA support (service worker, manifest, pwa util)
- src/service-worker.ts: cache-first app shell (build + static assets), network-only for /api/, offline fallback to SPA shell - static/manifest.webmanifest: name/short_name Tanabata, theme #312F45, standalone display, start_url /files, icon paths for 192/512/maskable - src/lib/utils/pwa.ts: resetPwa() — unregisters SW + clears all caches - app.html: link manifest, theme-color meta, Apple PWA metas - settings page: refactored to use resetPwa() from utils Note: add /static/images/icon-192.png, icon-512.png, icon-maskable-512.png for full installability. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
d6e9223f61
commit
c6e91c2eaf
@ -3,6 +3,12 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#312F45" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Tanabata" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest" />
|
||||||
<link rel="preload" href="/fonts/Epilogue-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
|
<link rel="preload" href="/fonts/Epilogue-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
14
frontend/src/lib/utils/pwa.ts
Normal file
14
frontend/src/lib/utils/pwa.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* Unregisters all service workers and clears all caches, then reloads.
|
||||||
|
* Use this when the app feels stale or to force a clean re-fetch of all assets.
|
||||||
|
*/
|
||||||
|
export async function resetPwa(): Promise<void> {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
const registrations = await navigator.serviceWorker.getRegistrations();
|
||||||
|
await Promise.all(registrations.map((r) => r.unregister()));
|
||||||
|
}
|
||||||
|
if ('caches' in window) {
|
||||||
|
const keys = await caches.keys();
|
||||||
|
await Promise.all(keys.map((k) => caches.delete(k)));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -3,6 +3,7 @@
|
|||||||
import { authStore } from '$lib/stores/auth';
|
import { authStore } from '$lib/stores/auth';
|
||||||
import { themeStore, toggleTheme } from '$lib/stores/theme';
|
import { themeStore, toggleTheme } from '$lib/stores/theme';
|
||||||
import { appSettings } from '$lib/stores/appSettings';
|
import { appSettings } from '$lib/stores/appSettings';
|
||||||
|
import { resetPwa as doPwaReset } from '$lib/utils/pwa';
|
||||||
import type { User, Session, SessionList } from '$lib/api/types';
|
import type { User, Session, SessionList } from '$lib/api/types';
|
||||||
|
|
||||||
// ---- Profile ----
|
// ---- Profile ----
|
||||||
@ -91,14 +92,7 @@
|
|||||||
pwaResetting = true;
|
pwaResetting = true;
|
||||||
pwaSuccess = false;
|
pwaSuccess = false;
|
||||||
try {
|
try {
|
||||||
if ('serviceWorker' in navigator) {
|
await doPwaReset();
|
||||||
const registrations = await navigator.serviceWorker.getRegistrations();
|
|
||||||
await Promise.all(registrations.map((r) => r.unregister()));
|
|
||||||
}
|
|
||||||
if ('caches' in window) {
|
|
||||||
const keys = await caches.keys();
|
|
||||||
await Promise.all(keys.map((k) => caches.delete(k)));
|
|
||||||
}
|
|
||||||
pwaSuccess = true;
|
pwaSuccess = true;
|
||||||
setTimeout(() => (pwaSuccess = false), 3000);
|
setTimeout(() => (pwaSuccess = false), 3000);
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
68
frontend/src/service-worker.ts
Normal file
68
frontend/src/service-worker.ts
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
/// <reference types="@sveltejs/kit" />
|
||||||
|
/// <reference lib="webworker" />
|
||||||
|
|
||||||
|
import { build, files, version } from '$service-worker';
|
||||||
|
|
||||||
|
declare const self: ServiceWorkerGlobalScope;
|
||||||
|
|
||||||
|
// Cache name is versioned so a new deploy invalidates the old shell.
|
||||||
|
const CACHE = `app-shell-${version}`;
|
||||||
|
|
||||||
|
// App shell: all Vite-emitted JS/CSS chunks + static assets (fonts, icons, manifest).
|
||||||
|
const SHELL = [...build, ...files];
|
||||||
|
|
||||||
|
// ---- Install: pre-cache the app shell ----
|
||||||
|
self.addEventListener('install', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(CACHE).then((cache) => cache.addAll(SHELL))
|
||||||
|
);
|
||||||
|
// Activate immediately without waiting for old tabs to close.
|
||||||
|
self.skipWaiting();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ---- Activate: remove stale caches from previous versions ----
|
||||||
|
self.addEventListener('activate', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys().then((keys) =>
|
||||||
|
Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
self.clients.claim();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ---- Fetch: cache-first for shell assets, network-only for API ----
|
||||||
|
self.addEventListener('fetch', (event) => {
|
||||||
|
const { request } = event;
|
||||||
|
const url = new URL(request.url);
|
||||||
|
|
||||||
|
// Only handle same-origin GET requests.
|
||||||
|
if (request.method !== 'GET' || url.origin !== self.location.origin) return;
|
||||||
|
|
||||||
|
// API and authentication calls must always go to the network.
|
||||||
|
if (url.pathname.startsWith('/api/')) return;
|
||||||
|
|
||||||
|
event.respondWith(respond(request));
|
||||||
|
});
|
||||||
|
|
||||||
|
async function respond(request: Request): Promise<Response> {
|
||||||
|
const cache = await caches.open(CACHE);
|
||||||
|
|
||||||
|
// Shell assets are pre-cached — serve from cache immediately.
|
||||||
|
const cached = await cache.match(request);
|
||||||
|
if (cached) return cached;
|
||||||
|
|
||||||
|
// Everything else (navigation, dynamic routes): network first.
|
||||||
|
try {
|
||||||
|
const response = await fetch(request);
|
||||||
|
// Cache successful responses for navigation so the app works offline.
|
||||||
|
if (response.status === 200) {
|
||||||
|
cache.put(request, response.clone());
|
||||||
|
}
|
||||||
|
return response;
|
||||||
|
} catch {
|
||||||
|
// Offline fallback: return the cached SPA shell for navigation requests.
|
||||||
|
const fallback = await cache.match('/');
|
||||||
|
if (fallback) return fallback;
|
||||||
|
return new Response('Offline', { status: 503 });
|
||||||
|
}
|
||||||
|
}
|
||||||
31
frontend/static/manifest.webmanifest
vendored
Normal file
31
frontend/static/manifest.webmanifest
vendored
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "Tanabata",
|
||||||
|
"short_name": "Tanabata",
|
||||||
|
"description": "Multi-user tag-based file manager",
|
||||||
|
"start_url": "/files",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"orientation": "portrait-primary",
|
||||||
|
"background_color": "#312F45",
|
||||||
|
"theme_color": "#312F45",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/images/icon-192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/images/icon-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "any"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/images/icon-maskable-512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user