Martin Dvorak
374752c59e
Mobile only (<=639px / coarse pointers); desktop keeps its behaviour. Foundation - lib/motion.ts owns the spring presets (snappy/gentle/sheet), durations, easings and variants (screens, tabs, wizard steps, list stagger). - Native-feel CSS: press feedback scales every button, card, chip, tab, row and summary to 0.96 with a spring-like cubic-bezier on transform (scoped to phones/coarse pointers), tap-highlight off, touch-action manipulation, chrome text non-selectable, reduced motion drops it. - App shell fades in once on launch; the study feed fades in on phones. Applied - Tab bar: sliding active pill (shared layoutId) + icon bounce. - Study Decks/Homework, language toggle, difficulty and size pickers: the same gliding highlight, gated so desktop keeps the old styling. - Route content enters direction-aware (deeper = from the right, back = from the left, same-depth = crossfade) via RouteTransition on the library/create/homework content columns; library tab switches crossfade; wizard steps slide forward/backward (reduced motion safe). - Library: cards fade up in a capped stagger on first load, glide with layout animations and shrink away on delete (AnimatePresence). - Study feed: correct feedback pulses, wrong shakes, the progress bar settles with a spring curve, score and XP count up on the results. - Settings sheet uses the sheet spring; the drawer now follows the finger and closes on release velocity, like the sheet. - Generation progress: the stage message fades/slides between stages; the icon keeps its gentle wobble; the feed fades in on hand-off. Skipped, on purpose: LazyMotion (the sliding highlights need layout animations = domMax, same features the current import already has); route exit animations (the App Router unmounts the outgoing page — exits are handled by in-page AnimatePresence); replacing the study feed's native scroll-snap with finger-follow drag (would fight the platform scroller); finger-follow height animation for native <details> expanders. Verified: animation suite 8/8 (reduced motion + 4x-CPU-throttled trace: no long tasks, CLS 0.0000), regression 74/74, mobile 52/52, declutter 116/116, i18n 25/25. Lint + build clean. SW freezmo-v21.
97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
/**
|
|
* Freezmo service worker (production only).
|
|
*
|
|
* Strategy, deliberately conservative:
|
|
* - API routes are never cached and never intercepted.
|
|
* - Navigations: network first, falling back to the cached shell, then /offline.
|
|
* - /_next/static + icons: stale-while-revalidate (fast, self-healing).
|
|
* - Everything else: straight to the network.
|
|
*
|
|
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
|
*/
|
|
const CACHE_VERSION = "freezmo-v21";
|
|
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
|
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
|
|
|
const SHELL_ASSETS = [
|
|
"/",
|
|
"/offline",
|
|
"/manifest.webmanifest",
|
|
"/icons/icon-192.png",
|
|
"/icons/icon-512.png",
|
|
"/icons/apple-touch-icon.png",
|
|
];
|
|
|
|
self.addEventListener("install", (event) => {
|
|
event.waitUntil(
|
|
(async () => {
|
|
const cache = await caches.open(SHELL_CACHE);
|
|
await Promise.allSettled(SHELL_ASSETS.map((url) => cache.add(new Request(url, { cache: "reload" }))));
|
|
await self.skipWaiting();
|
|
})(),
|
|
);
|
|
});
|
|
|
|
self.addEventListener("activate", (event) => {
|
|
event.waitUntil(
|
|
(async () => {
|
|
const names = await caches.keys();
|
|
await Promise.all(
|
|
names.filter((name) => !name.startsWith(CACHE_VERSION)).map((name) => caches.delete(name)),
|
|
);
|
|
await self.clients.claim();
|
|
})(),
|
|
);
|
|
});
|
|
|
|
function isCacheableAsset(url) {
|
|
return (
|
|
url.pathname.startsWith("/_next/static/") ||
|
|
url.pathname.startsWith("/icons/") ||
|
|
url.pathname === "/manifest.webmanifest" ||
|
|
/\.(?:css|js|png|jpg|jpeg|svg|webp|woff2?)$/.test(url.pathname)
|
|
);
|
|
}
|
|
|
|
self.addEventListener("fetch", (event) => {
|
|
const request = event.request;
|
|
if (request.method !== "GET") return;
|
|
|
|
const url = new URL(request.url);
|
|
if (url.origin !== self.location.origin) return;
|
|
// Never touch the API: keys, notes and generated decks must always be live.
|
|
if (url.pathname.startsWith("/api/")) return;
|
|
|
|
if (request.mode === "navigate") {
|
|
event.respondWith(
|
|
(async () => {
|
|
try {
|
|
const response = await fetch(request);
|
|
const cache = await caches.open(SHELL_CACHE);
|
|
cache.put("/", response.clone()).catch(() => {});
|
|
return response;
|
|
} catch {
|
|
const cache = await caches.open(SHELL_CACHE);
|
|
return (await cache.match("/")) ?? (await cache.match("/offline")) ?? Response.error();
|
|
}
|
|
})(),
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (isCacheableAsset(url)) {
|
|
event.respondWith(
|
|
(async () => {
|
|
const cache = await caches.open(ASSET_CACHE);
|
|
const cached = await cache.match(request);
|
|
const network = fetch(request)
|
|
.then((response) => {
|
|
if (response.ok) cache.put(request, response.clone()).catch(() => {});
|
|
return response;
|
|
})
|
|
.catch(() => cached);
|
|
return cached ?? network;
|
|
})(),
|
|
);
|
|
}
|
|
});
|