H1K0-dev/tanabata
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): add PWA support (service worker, manifest, pwa util)

Browse Source 
- 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:
Masahiko AMANO 2026-04-07 01:02:53 +03:00
parent d6e9223f61
commit c6e91c2eaf
5 changed files with 121 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app.html
View File

@ -3,6 +3,12 @@
<head>
<meta charset="utf-8" />
<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" />
%sveltekit.head%
</head>

14
frontend/src/lib/utils/pwa.ts Normal file
View 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)));
}
}

10
frontend/src/routes/settings/+page.svelte
View File

@ -3,6 +3,7 @@
import { authStore } from '$lib/stores/auth';
import { themeStore, toggleTheme } from '$lib/stores/theme';
import { appSettings } from '$lib/stores/appSettings';
import { resetPwa as doPwaReset } from '$lib/utils/pwa';
import type { User, Session, SessionList } from '$lib/api/types';
// ---- Profile ----
@ -91,14 +92,7 @@
pwaResetting = true;
pwaSuccess = false;
try {
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)));
}
await doPwaReset();
pwaSuccess = true;
setTimeout(() => (pwaSuccess = false), 3000);
} finally {

68
frontend/src/service-worker.ts Normal file
View 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
View 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"
}
]
}