mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-09-15 18:12:30 +00:00
Merge pull request #96 from jcreek/fix/offline-data-usage
Fix/offline data usage
This commit is contained in:
Josh Creek
@@ -9,6 +9,7 @@ src/lib/helpers/pokeapi-pokemon.json
|
||||
static/sprites/pokemon.json
|
||||
src/lib/helpers/pokedex.json
|
||||
src/lib/helpers/sprites.json
|
||||
static/sprites-small/manifest.json
|
||||
|
||||
# Machine-local editor and tool settings.
|
||||
**/*.local.json
|
||||
|
||||
Generated
+67
-91
@@ -8,8 +8,8 @@
|
||||
"name": "livingdextracker",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@supabase/ssr": "^0.1.0",
|
||||
"@supabase/supabase-js": "^2.42.0",
|
||||
"@supabase/ssr": "^0.12.7",
|
||||
"@supabase/supabase-js": "^2.116.0",
|
||||
"nanoid": "^5.0.4",
|
||||
"sharp": "^0.33.4"
|
||||
},
|
||||
@@ -3728,103 +3728,120 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@supabase/auth-js": {
|
||||
"version": "2.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.89.0.tgz",
|
||||
"integrity": "sha512-wiWZdz8WMad8LQdJMWYDZ2SJtZP5MwMqzQq3ehtW2ngiI3UTgbKiFrvMUUS3KADiVlk4LiGfODB2mrYx7w2f8w==",
|
||||
"version": "2.116.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.116.0.tgz",
|
||||
"integrity": "sha512-Cmosty12gyKGK9N3bQb+lMmuAFev5nmUzaR1AsmZHqKOAGzqX1VQzmp49CNPwOx/pw0H9Qqk4rs9yhwTlKpfDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=22.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/functions-js": {
|
||||
"version": "2.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.89.0.tgz",
|
||||
"integrity": "sha512-XEueaC5gMe5NufNYfBh9kPwJlP5M2f+Ogr8rvhmRDAZNHgY6mI35RCkYDijd92pMcNM7g8pUUJov93UGUnqfyw==",
|
||||
"version": "2.116.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.116.0.tgz",
|
||||
"integrity": "sha512-E+VOc2QDcni/fySqkBFiZhnoB3SGydEdZgFI6/dEAGAHx6yEhB46TN9qb2wXs+E+RSzOBV0R6dasiSlw4xlZAA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=22.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/phoenix": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/phoenix/-/phoenix-0.4.5.tgz",
|
||||
"integrity": "sha512-aAn9H9ovVyeApKy11OWOrrOGq8DV68yWeH4ud2lN9fzn4aO8Zb5GLL9m1pUg9nLqIcT+ZDfAcsZe0E/nqdv2lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@supabase/postgrest-js": {
|
||||
"version": "2.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.89.0.tgz",
|
||||
"integrity": "sha512-/b0fKrxV9i7RNOEXMno/I1862RsYhuUo+Q6m6z3ar1f4ulTMXnDfv0y4YYxK2POcgrOXQOgKYQx1eArybyNvtg==",
|
||||
"version": "2.116.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.116.0.tgz",
|
||||
"integrity": "sha512-kGpVZTDHxFTJS3tu+rU0iTAZ+4U0bcLVjxwCk8f3gRhjw3qdCZjTBlgYvc4kGH2XccmAzbkKwXL/mrNHMGSc+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=22.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/realtime-js": {
|
||||
"version": "2.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.89.0.tgz",
|
||||
"integrity": "sha512-aMOvfDb2a52u6PX6jrrjvACHXGV3zsOlWRzZsTIOAJa0hOVvRp01AwC1+nLTGUzxzezejrYeCX+KnnM1xHdl+w==",
|
||||
"version": "2.116.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.116.0.tgz",
|
||||
"integrity": "sha512-MHAnlXxi2s6yiJsZsQMfs2B3RFxeVfQWxerqYhIMqcCQV/FuY3LIeouPEkXw/ah7wUWMLYwempF9MOCUScyddg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/phoenix": "^1.6.6",
|
||||
"@types/ws": "^8.18.1",
|
||||
"tslib": "2.8.1",
|
||||
"ws": "^8.18.2"
|
||||
"@supabase/phoenix": "0.4.5",
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=22.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/ssr": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.1.0.tgz",
|
||||
"integrity": "sha512-bIVrkqjAK5G3KjkIMKYKtAOlCgRRplEWjrlyRyXSOYtgDieiOhk2ZyNAPsEOa1By9OZVxuX5eAW1fitdnuxayw==",
|
||||
"version": "0.12.7",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/ssr/-/ssr-0.12.7.tgz",
|
||||
"integrity": "sha512-wiBtEie1KkRJi9RrZWY3R2imRhX1JY7qMyUCH2z9AUk15gQebNEplM+urbCKamdxaTJLXUU6LlpkJsaxhojCEg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^0.5.0",
|
||||
"ramda": "^0.29.0"
|
||||
"cookie": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@supabase/supabase-js": "^2.33.1"
|
||||
"@supabase/supabase-js": "^2.114.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/ssr/node_modules/cookie": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
|
||||
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
|
||||
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/express"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/storage-js": {
|
||||
"version": "2.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.89.0.tgz",
|
||||
"integrity": "sha512-6zKcXofk/M/4Eato7iqpRh+B+vnxeiTumCIP+Tz26xEqIiywzD9JxHq+udRrDuv6hXE+pmetvJd8n5wcf4MFRQ==",
|
||||
"version": "2.116.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.116.0.tgz",
|
||||
"integrity": "sha512-6/3hR6vccBP6oGM5B6RfbwZcTCKmQOodd/ZWQdsw8yJsU5zO/a//oBL6yLnmgxcjnHSrelW8rsO7hL5DPybyUQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"iceberg-js": "^0.8.1",
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=22.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/supabase-js": {
|
||||
"version": "2.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.89.0.tgz",
|
||||
"integrity": "sha512-KlaRwSfFA0fD73PYVMHj5/iXFtQGCcX7PSx0FdQwYEEw9b2wqM7GxadY+5YwcmuEhalmjFB/YvqaoNVF+sWUlg==",
|
||||
"version": "2.116.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.116.0.tgz",
|
||||
"integrity": "sha512-YyWmKXt2NspV9iO8FPnlswUFJIRnrLd3oTCb+3ZyYRuKZtBH0xCUDgnUqoyA0fGUxpM/UhfwDjYf/dht/9bp7g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@supabase/auth-js": "2.89.0",
|
||||
"@supabase/functions-js": "2.89.0",
|
||||
"@supabase/postgrest-js": "2.89.0",
|
||||
"@supabase/realtime-js": "2.89.0",
|
||||
"@supabase/storage-js": "2.89.0"
|
||||
"@supabase/auth-js": "2.116.0",
|
||||
"@supabase/functions-js": "2.116.0",
|
||||
"@supabase/postgrest-js": "2.116.0",
|
||||
"@supabase/realtime-js": "2.116.0",
|
||||
"@supabase/storage-js": "2.116.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=22.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opentelemetry/api": ">=1.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@opentelemetry/api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@surma/rollup-plugin-off-main-thread": {
|
||||
@@ -4016,16 +4033,12 @@
|
||||
"version": "20.12.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
|
||||
"integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/phoenix": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
|
||||
"integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/pug": {
|
||||
"version": "2.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
|
||||
@@ -4062,15 +4075,6 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
"integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz",
|
||||
@@ -9020,15 +9024,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/ramda": {
|
||||
"version": "0.29.1",
|
||||
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz",
|
||||
"integrity": "sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/ramda"
|
||||
}
|
||||
},
|
||||
"node_modules/randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@@ -10908,7 +10903,9 @@
|
||||
"node_modules/undici-types": {
|
||||
"version": "5.26.5",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
|
||||
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
|
||||
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/unicode-canonical-property-names-ecmascript": {
|
||||
"version": "2.0.0",
|
||||
@@ -12268,27 +12265,6 @@
|
||||
"node": "^20.17.0 || >=22.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.18.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
||||
"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xmlbuilder": {
|
||||
"version": "15.1.1",
|
||||
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
|
||||
|
||||
+3
-2
@@ -7,6 +7,7 @@
|
||||
"dev-generate": "GENERATE_SW=true npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
|
||||
"dev-generate-suppress-w": "GENERATE_SW=true SUPPRESS_WARNING=true npx tailwindcss -i ./static/input.css -o ./static/output.css && vite dev",
|
||||
"sprites:build": "node scripts/optimize-sprites.mjs",
|
||||
"sprites:manifest": "node scripts/sprite-manifest.mjs",
|
||||
"build-generate-sw": "npm run tailwind && GENERATE_SW=true vite build",
|
||||
"build-generate-sw-node": "npm run tailwind && NODE_ADAPTER=true GENERATE_SW=true vite build",
|
||||
"build": "npm run tailwind && vite build",
|
||||
@@ -78,8 +79,8 @@
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@supabase/ssr": "^0.1.0",
|
||||
"@supabase/supabase-js": "^2.42.0",
|
||||
"@supabase/ssr": "^0.12.7",
|
||||
"@supabase/supabase-js": "^2.116.0",
|
||||
"nanoid": "^5.0.4",
|
||||
"sharp": "^0.33.4"
|
||||
},
|
||||
|
||||
@@ -3,6 +3,7 @@ import path from 'node:path';
|
||||
import process from 'node:process';
|
||||
import { mkdir, readdir, rename } from 'node:fs/promises';
|
||||
import sharp from 'sharp';
|
||||
import { writeSpriteManifest } from './sprite-manifest.mjs';
|
||||
|
||||
const inputDir = process.env.SPRITE_INPUT_DIR ?? path.join(process.cwd(), 'static', 'sprites');
|
||||
const outputDir =
|
||||
@@ -69,4 +70,5 @@ for (const [index, file] of files.entries()) {
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Sprite optimization complete.');
|
||||
const manifest = await writeSpriteManifest(outputDir);
|
||||
console.log(`Sprite optimization complete. Manifest lists ${manifest.files.length} sprites.`);
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
#!/usr/bin/env node
|
||||
// Lists every sprite (all forms, shiny and female variants) with its size, so the offline worker can
|
||||
// save the complete set on request and tell whether anything is still missing.
|
||||
import path from 'node:path';
|
||||
import process from 'node:process';
|
||||
import { readdir, stat, writeFile } from 'node:fs/promises';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
export const SPRITE_MANIFEST_NAME = 'manifest.json';
|
||||
|
||||
async function walk(dir, files = []) {
|
||||
for (const entry of await readdir(dir, { withFileTypes: true })) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
if (entry.isDirectory()) await walk(fullPath, files);
|
||||
else if (entry.isFile() && entry.name.endsWith('.webp')) files.push(fullPath);
|
||||
}
|
||||
return files;
|
||||
}
|
||||
|
||||
/** Builds the manifest for `<spritesDir>/home`, with paths relative to that folder. */
|
||||
export async function buildSpriteManifest(spritesDir) {
|
||||
const homeDir = path.join(spritesDir, 'home');
|
||||
const files = await walk(homeDir);
|
||||
const entries = await Promise.all(
|
||||
files.map(async (file) => [
|
||||
path.relative(homeDir, file).split(path.sep).join('/'),
|
||||
(await stat(file)).size
|
||||
])
|
||||
);
|
||||
entries.sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
|
||||
return { version: 1, files: entries };
|
||||
}
|
||||
|
||||
export async function writeSpriteManifest(spritesDir) {
|
||||
const manifest = await buildSpriteManifest(spritesDir);
|
||||
await writeFile(path.join(spritesDir, SPRITE_MANIFEST_NAME), `${JSON.stringify(manifest)}\n`);
|
||||
return manifest;
|
||||
}
|
||||
|
||||
if (process.argv[1] === fileURLToPath(import.meta.url)) {
|
||||
const spritesDir =
|
||||
process.env.SPRITE_OUTPUT_DIR ?? path.join(process.cwd(), 'static', 'sprites-small');
|
||||
const manifest = await writeSpriteManifest(spritesDir);
|
||||
const bytes = manifest.files.reduce((total, [, size]) => total + size, 0);
|
||||
console.log(
|
||||
`Wrote ${manifest.files.length} sprites (${(bytes / 1048576).toFixed(1)} MB) to ${SPRITE_MANIFEST_NAME}`
|
||||
);
|
||||
}
|
||||
+8
-11
@@ -1,23 +1,20 @@
|
||||
import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
|
||||
import { createServerClient } from '@supabase/ssr';
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
import type { CookieSerializeOptions } from 'cookie';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
|
||||
cookies: {
|
||||
get: (key: string) => event.cookies.get(key),
|
||||
getAll: () => event.cookies.getAll(),
|
||||
/**
|
||||
* Note: You have to add the `path` variable to the
|
||||
* set and remove method due to sveltekit's cookie API
|
||||
* requiring this to be set, setting the path to an empty string
|
||||
* will replicate previous/standard behaviour (https://kit.svelte.dev/docs/types#public-types-cookies)
|
||||
* Note: You have to add the `path` variable to the set method due to sveltekit's cookie
|
||||
* API requiring this to be set, setting the path to '/' will replicate previous/standard
|
||||
* behaviour (https://kit.svelte.dev/docs/types#public-types-cookies)
|
||||
*/
|
||||
set: (key: string, value: string, options: CookieSerializeOptions) => {
|
||||
event.cookies.set(key, value, { ...options, path: '/' });
|
||||
},
|
||||
remove: (key: string, options: CookieSerializeOptions) => {
|
||||
event.cookies.delete(key, { ...options, path: '/' });
|
||||
setAll: (cookiesToSet) => {
|
||||
cookiesToSet.forEach(({ name, value, options }) => {
|
||||
event.cookies.set(name, value, { ...options, path: '/' });
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+128
-38
@@ -1,24 +1,46 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import { PUBLIC_USE_LOCAL_POKEMON_SPRITE_FOLDER } from '$env/static/public';
|
||||
import type { OfflineSnapshot } from '$lib/models/OfflineSnapshot';
|
||||
import { resolveSpriteUrl } from '$lib/utils/spriteUrl';
|
||||
import { resolveSpriteUrl, spriteRoot } from '$lib/utils/spriteUrl';
|
||||
|
||||
export type OfflineSyncStatus = {
|
||||
state: 'idle' | 'syncing' | 'ready' | 'partial' | 'error';
|
||||
state: 'idle' | 'syncing' | 'ready' | 'error';
|
||||
generatedAt: string | null;
|
||||
message: string | null;
|
||||
};
|
||||
|
||||
export type ArtworkDownloadStatus = {
|
||||
// unknown: not checked yet; missing: some sprites aren't saved; done: every sprite is saved.
|
||||
state: 'unknown' | 'missing' | 'downloading' | 'done' | 'error';
|
||||
missingBytes: number | null;
|
||||
message: string | null;
|
||||
};
|
||||
|
||||
export const offlineSyncStatus = writable<OfflineSyncStatus>({
|
||||
state: 'idle',
|
||||
generatedAt: null,
|
||||
message: null
|
||||
});
|
||||
|
||||
export const artworkDownloadStatus = writable<ArtworkDownloadStatus>({
|
||||
state: 'unknown',
|
||||
missingBytes: null,
|
||||
message: null
|
||||
});
|
||||
|
||||
const SYNC_EVENT = 'livingdex:offline-sync';
|
||||
const OFFLINE_CACHE_PREFIX = 'livingdex-offline-';
|
||||
const OFFLINE_META_CACHE = `${OFFLINE_CACHE_PREFIX}meta-v1`;
|
||||
const OFFLINE_META_URL = '/__offline/current';
|
||||
// Must match OFFLINE_META_FORMAT in static/offline-worker.js. Older copies are always re-synced so
|
||||
// the worker can migrate them (e.g. drop the full-size artwork cache).
|
||||
const OFFLINE_META_FORMAT = 2;
|
||||
// A page load reuses an offline copy this recent instead of downloading the whole collection again.
|
||||
// Changes made in the app request a sync explicitly, so this only delays picking up edits made on
|
||||
// another device.
|
||||
const SNAPSHOT_FRESH_MS = 15 * 60 * 1000;
|
||||
|
||||
type OfflineMeta = { userId: string; generatedAt?: string; format?: number };
|
||||
|
||||
async function workerMessage(
|
||||
message: unknown,
|
||||
@@ -50,6 +72,14 @@ export function requestOfflineSync(): void {
|
||||
if (typeof window !== 'undefined') window.dispatchEvent(new Event(SYNC_EVENT));
|
||||
}
|
||||
|
||||
async function readOfflineMeta(): Promise<OfflineMeta | null> {
|
||||
if (!('caches' in window)) return null;
|
||||
if (!(await caches.keys()).includes(OFFLINE_META_CACHE)) return null;
|
||||
const response = await (await caches.open(OFFLINE_META_CACHE)).match(OFFLINE_META_URL);
|
||||
const meta = await response?.json().catch(() => null);
|
||||
return typeof meta?.userId === 'string' ? meta : null;
|
||||
}
|
||||
|
||||
async function deleteOfflineCaches(): Promise<void> {
|
||||
if (typeof window === 'undefined' || !('caches' in window)) return;
|
||||
const names = await caches.keys();
|
||||
@@ -60,13 +90,9 @@ async function deleteOfflineCaches(): Promise<void> {
|
||||
|
||||
export async function claimOfflineData(userId: string): Promise<void> {
|
||||
if (typeof window === 'undefined') return;
|
||||
if ('caches' in window) {
|
||||
const names = await caches.keys();
|
||||
if (names.includes(OFFLINE_META_CACHE)) {
|
||||
const response = await (await caches.open(OFFLINE_META_CACHE)).match(OFFLINE_META_URL);
|
||||
const meta = await response?.json().catch(() => null);
|
||||
if (typeof meta?.userId !== 'string' || meta.userId !== userId) await deleteOfflineCaches();
|
||||
}
|
||||
if ('caches' in window && (await caches.keys()).includes(OFFLINE_META_CACHE)) {
|
||||
const meta = await readOfflineMeta();
|
||||
if (meta?.userId !== userId) await deleteOfflineCaches();
|
||||
}
|
||||
if ('serviceWorker' in navigator && (await navigator.serviceWorker.getRegistration())?.active) {
|
||||
await workerMessage({ type: 'CLAIM_OFFLINE_USER', userId }, 10_000, false);
|
||||
@@ -79,9 +105,69 @@ export async function clearOfflineData(): Promise<void> {
|
||||
if ('serviceWorker' in navigator && (await navigator.serviceWorker.getRegistration())?.active) {
|
||||
await workerMessage({ type: 'CLEAR_OFFLINE_DATA' }, 10_000, false);
|
||||
}
|
||||
// Sprites are kept across sign-out (they aren't account data), so the artwork status stays valid.
|
||||
offlineSyncStatus.set({ state: 'idle', generatedAt: null, message: null });
|
||||
}
|
||||
|
||||
function currentSpriteRoot(): string {
|
||||
return spriteRoot(PUBLIC_USE_LOCAL_POKEMON_SPRITE_FOLDER === 'true');
|
||||
}
|
||||
|
||||
function applyArtworkResult(result: Record<string, unknown>): void {
|
||||
const missing = Number(result.missing ?? 0);
|
||||
const failed = Number(result.failedArtwork ?? 0);
|
||||
if (failed > 0) {
|
||||
artworkDownloadStatus.set({
|
||||
state: 'error',
|
||||
missingBytes: Number(result.missingBytes ?? 0),
|
||||
message: `${failed} artwork files could not be saved`
|
||||
});
|
||||
} else {
|
||||
artworkDownloadStatus.set({
|
||||
state: missing > 0 ? 'missing' : 'done',
|
||||
missingBytes: Number(result.missingBytes ?? 0),
|
||||
message: null
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** Checks whether every sprite (all forms, shiny and female) is already saved on this device. */
|
||||
export async function checkArtworkStatus(): Promise<void> {
|
||||
if (typeof window === 'undefined') return;
|
||||
try {
|
||||
applyArtworkResult(
|
||||
await workerMessage({ type: 'ARTWORK_STATUS', spriteRoot: currentSpriteRoot() }, 30_000)
|
||||
);
|
||||
} catch (error) {
|
||||
// Leave the link hidden rather than offering a download that can't be checked.
|
||||
console.error('Unable to check saved artwork', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Artwork is normally cached as it is viewed. This saves every sprite that exists - all forms,
|
||||
* shiny and female variants, not just the saved dexes - skipping any that are already cached.
|
||||
*/
|
||||
export async function downloadAllArtwork(): Promise<void> {
|
||||
if (typeof window === 'undefined' || !navigator.onLine) return;
|
||||
artworkDownloadStatus.update((status) => ({ ...status, state: 'downloading', message: null }));
|
||||
try {
|
||||
// Generous timeout: the worker fetches each missing sprite with its own 15s limit.
|
||||
applyArtworkResult(
|
||||
await workerMessage(
|
||||
{ type: 'CACHE_ALL_ARTWORK', spriteRoot: currentSpriteRoot() },
|
||||
30 * 60 * 1000
|
||||
)
|
||||
);
|
||||
} catch (error) {
|
||||
artworkDownloadStatus.update((status) => ({
|
||||
...status,
|
||||
state: 'error',
|
||||
message: error instanceof Error ? error.message : String(error)
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
export function startOfflineSync(getUserId: () => string | null): () => void {
|
||||
let timer: number | null = null;
|
||||
let stopped = false;
|
||||
@@ -89,7 +175,7 @@ export function startOfflineSync(getUserId: () => string | null): () => void {
|
||||
let rerun = false;
|
||||
let lastGeneratedAt: string | null = null;
|
||||
|
||||
const synchronize = async () => {
|
||||
const synchronize = async (reuseFreshCopy: boolean) => {
|
||||
if (stopped || !navigator.onLine) return;
|
||||
if (running) {
|
||||
rerun = true;
|
||||
@@ -98,9 +184,24 @@ export function startOfflineSync(getUserId: () => string | null): () => void {
|
||||
const userId = getUserId();
|
||||
if (!userId || !('serviceWorker' in navigator)) return;
|
||||
running = true;
|
||||
offlineSyncStatus.set({ state: 'syncing', generatedAt: null, message: null });
|
||||
try {
|
||||
await claimOfflineData(userId);
|
||||
if (reuseFreshCopy) {
|
||||
const meta = await readOfflineMeta();
|
||||
const age = meta?.generatedAt ? Date.now() - Date.parse(meta.generatedAt) : Infinity;
|
||||
if (
|
||||
meta?.userId === userId &&
|
||||
meta.format === OFFLINE_META_FORMAT &&
|
||||
age >= 0 &&
|
||||
age < SNAPSHOT_FRESH_MS
|
||||
) {
|
||||
lastGeneratedAt = meta.generatedAt ?? null;
|
||||
offlineSyncStatus.set({ state: 'ready', generatedAt: lastGeneratedAt, message: null });
|
||||
void checkArtworkStatus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
offlineSyncStatus.set({ state: 'syncing', generatedAt: null, message: null });
|
||||
const response = await fetch('/api/offline-snapshot', {
|
||||
credentials: 'include',
|
||||
headers: { Accept: 'application/json' }
|
||||
@@ -109,32 +210,19 @@ export function startOfflineSync(getUserId: () => string | null): () => void {
|
||||
const snapshot = (await response.json()) as OfflineSnapshot;
|
||||
if (snapshot.userId !== userId) throw new Error('Snapshot owner did not match the session');
|
||||
const useLocal = PUBLIC_USE_LOCAL_POKEMON_SPRITE_FOLDER === 'true';
|
||||
const artworkUrls = Array.from(
|
||||
new Set(
|
||||
snapshot.pokedexes.flatMap(({ pokedex, entries }) =>
|
||||
entries.map(({ pokedexEntry }) => {
|
||||
const url = resolveSpriteUrl(pokedexEntry, pokedex.isShinyDex, useLocal);
|
||||
(
|
||||
pokedexEntry as typeof pokedexEntry & { offlineSpriteUrl: string }
|
||||
).offlineSpriteUrl = url;
|
||||
return url;
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
// The worker derives which artwork belongs to the collection from these URLs, and the offline
|
||||
// viewer renders them.
|
||||
for (const { pokedex, entries } of snapshot.pokedexes) {
|
||||
for (const { pokedexEntry } of entries) {
|
||||
(pokedexEntry as typeof pokedexEntry & { offlineSpriteUrl: string }).offlineSpriteUrl =
|
||||
resolveSpriteUrl(pokedexEntry, pokedex.isShinyDex, useLocal);
|
||||
}
|
||||
}
|
||||
if (getUserId() !== userId) throw new Error('Session changed during offline synchronization');
|
||||
const result = await workerMessage({
|
||||
type: 'SYNC_OFFLINE_SNAPSHOT',
|
||||
snapshot,
|
||||
artworkUrls
|
||||
});
|
||||
const failed = Number(result.failedArtwork ?? 0);
|
||||
offlineSyncStatus.set({
|
||||
state: failed > 0 ? 'partial' : 'ready',
|
||||
generatedAt: snapshot.generatedAt,
|
||||
message: failed > 0 ? `${failed} artwork files could not be cached` : null
|
||||
});
|
||||
await workerMessage({ type: 'SYNC_OFFLINE_SNAPSHOT', snapshot });
|
||||
offlineSyncStatus.set({ state: 'ready', generatedAt: snapshot.generatedAt, message: null });
|
||||
lastGeneratedAt = snapshot.generatedAt;
|
||||
void checkArtworkStatus();
|
||||
} catch (error) {
|
||||
offlineSyncStatus.set({
|
||||
state: 'error',
|
||||
@@ -150,19 +238,21 @@ export function startOfflineSync(getUserId: () => string | null): () => void {
|
||||
}
|
||||
};
|
||||
|
||||
const schedule = () => {
|
||||
const scheduleSync = (reuseFreshCopy: boolean) => {
|
||||
if (timer !== null) window.clearTimeout(timer);
|
||||
timer = window.setTimeout(() => {
|
||||
timer = null;
|
||||
void synchronize();
|
||||
void synchronize(reuseFreshCopy);
|
||||
}, 1_000);
|
||||
};
|
||||
// Explicit requests (edits, Retry, a new sign-in) and reconnecting always fetch a new copy.
|
||||
const schedule = () => scheduleSync(false);
|
||||
|
||||
// Best effort: ask the browser not to evict the offline artwork cache under storage pressure.
|
||||
void navigator.storage?.persist?.().catch(() => undefined);
|
||||
window.addEventListener(SYNC_EVENT, schedule);
|
||||
window.addEventListener('online', schedule);
|
||||
schedule();
|
||||
scheduleSync(true);
|
||||
return () => {
|
||||
stopped = true;
|
||||
if (timer !== null) window.clearTimeout(timer);
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
/** Folder holding every sprite; paths in static/sprites-small/manifest.json are relative to it. */
|
||||
export function spriteRoot(useLocalSprites: boolean): string {
|
||||
return useLocalSprites
|
||||
? '/sprites-small/home'
|
||||
: 'https://raw.githubusercontent.com/jcreek/LivingDexTracker/master/static/sprites-small/home';
|
||||
}
|
||||
|
||||
export function resolveSpriteUrl(
|
||||
entry: { pokedexNumber: number; form?: string; spriteKey?: string },
|
||||
shiny: boolean,
|
||||
@@ -34,9 +41,7 @@ export function resolveSpriteUrl(
|
||||
}
|
||||
}
|
||||
|
||||
let root = useLocalSprites
|
||||
? '/sprites-small/home'
|
||||
: 'https://raw.githubusercontent.com/jcreek/LivingDexTracker/master/static/sprites-small/home';
|
||||
let root = spriteRoot(useLocalSprites);
|
||||
if (shiny) root += '/shiny';
|
||||
if (/^female\b/i.test(form)) root += '/female';
|
||||
return `${root}/${key}.webp`;
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ locals: { safeGetSession } }) => {
|
||||
export const load: LayoutServerLoad = async ({ locals: { safeGetSession }, cookies }) => {
|
||||
const { session, user } = await safeGetSession();
|
||||
|
||||
return {
|
||||
session,
|
||||
user
|
||||
user,
|
||||
// The universal layout load rebuilds a server-side client from these during SSR.
|
||||
cookies: cookies.getAll()
|
||||
};
|
||||
};
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
import SignOut from '$lib/components/SignOut.svelte';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
|
||||
import {
|
||||
artworkDownloadStatus,
|
||||
claimOfflineData,
|
||||
clearOfflineData,
|
||||
downloadAllArtwork,
|
||||
offlineSyncStatus,
|
||||
requestOfflineSync,
|
||||
startOfflineSync
|
||||
@@ -65,14 +66,21 @@
|
||||
const {
|
||||
data: { subscription }
|
||||
} = supabase.auth.onAuthStateChange((event, session) => {
|
||||
const previousUserId = localUser?.id ?? null;
|
||||
if (session) {
|
||||
localUser = session.user;
|
||||
void claimOfflineData(session.user.id)
|
||||
.then(requestOfflineSync)
|
||||
.catch((error) => console.error('Unable to claim offline data', error));
|
||||
// SIGNED_IN also fires when a tab regains focus, so only a change of account fetches a new
|
||||
// offline copy. Page loads and token refreshes reuse the saved one while it is fresh.
|
||||
if (event === 'SIGNED_IN' && session.user.id !== previousUserId) {
|
||||
void claimOfflineData(session.user.id)
|
||||
.then(requestOfflineSync)
|
||||
.catch((error) => console.error('Unable to claim offline data', error));
|
||||
}
|
||||
} else {
|
||||
// Offline data is only cleared by the Sign Out button (or another account claiming it).
|
||||
// An expired or rejected session must not throw away artwork that would then have to be
|
||||
// downloaded again after signing back in.
|
||||
localUser = null;
|
||||
if (event === 'SIGNED_OUT') void clearOfflineData();
|
||||
}
|
||||
user.set(localUser);
|
||||
});
|
||||
@@ -90,6 +98,11 @@
|
||||
};
|
||||
});
|
||||
|
||||
function formatMegabytes(bytes: number) {
|
||||
const megabytes = bytes / 1048576;
|
||||
return megabytes < 1 ? '<1 MB' : `≈${Math.round(megabytes)} MB`;
|
||||
}
|
||||
|
||||
async function getUser() {
|
||||
const {
|
||||
data: { session }
|
||||
@@ -214,10 +227,12 @@
|
||||
<span>Offline copy could not be refreshed: {$offlineSyncStatus.message}</span>
|
||||
<button class="btn btn-sm" on:click={requestOfflineSync}>Retry</button>
|
||||
</div>
|
||||
{:else if localUser && $offlineSyncStatus.state === 'partial'}
|
||||
{:else if localUser && $artworkDownloadStatus.state === 'error'}
|
||||
<div class="alert alert-warning rounded-none" role="status">
|
||||
<span>Offline data is saved, but {$offlineSyncStatus.message}.</span>
|
||||
<button class="btn btn-sm" on:click={requestOfflineSync}>Retry</button>
|
||||
<span
|
||||
>Offline data is saved, but artwork could not be saved: {$artworkDownloadStatus.message}.</span
|
||||
>
|
||||
<button class="btn btn-sm" on:click={downloadAllArtwork}>Retry</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if isOnline && localUser && $offlineSyncStatus.state === 'syncing'}
|
||||
@@ -225,6 +240,15 @@
|
||||
{:else if isOnline && localUser && $offlineSyncStatus.generatedAt}
|
||||
<p class="bg-base-200 px-4 py-1 text-center text-xs" role="status">
|
||||
Offline copy updated {new Date($offlineSyncStatus.generatedAt).toLocaleString()}.
|
||||
{#if $artworkDownloadStatus.state === 'downloading'}
|
||||
Saving all artwork for offline…
|
||||
{:else if $artworkDownloadStatus.state === 'missing'}
|
||||
<button class="link" on:click={downloadAllArtwork}>
|
||||
Save all artwork for offline{#if $artworkDownloadStatus.missingBytes}{' '}({formatMegabytes(
|
||||
$artworkDownloadStatus.missingBytes
|
||||
)}){/if}
|
||||
</button>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
|
||||
+16
-23
@@ -1,7 +1,6 @@
|
||||
import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
|
||||
import type { LayoutLoad } from './$types';
|
||||
import { createBrowserClient, isBrowser, parse, serialize } from '@supabase/ssr';
|
||||
import type { CookieSerializeOptions } from 'cookie';
|
||||
import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr';
|
||||
|
||||
export const load: LayoutLoad = async ({ fetch, data, depends }) => {
|
||||
depends('supabase:auth');
|
||||
@@ -31,29 +30,23 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {
|
||||
return response;
|
||||
};
|
||||
|
||||
const supabase = createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
|
||||
global: {
|
||||
fetch: authFetch
|
||||
},
|
||||
cookies: {
|
||||
get(key: string) {
|
||||
if (!isBrowser()) {
|
||||
return JSON.stringify(data.session);
|
||||
// The browser client manages document.cookie itself, including removing stale session chunks.
|
||||
const supabase = isBrowser()
|
||||
? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
|
||||
global: {
|
||||
fetch: authFetch
|
||||
}
|
||||
|
||||
const cookie = parse(document.cookie);
|
||||
return cookie[key];
|
||||
},
|
||||
set(key: string, value: string, options: CookieSerializeOptions) {
|
||||
if (isBrowser()) document.cookie = serialize(key, value, { ...options, path: '/' });
|
||||
},
|
||||
remove(key: string, options: CookieSerializeOptions) {
|
||||
if (isBrowser()) {
|
||||
document.cookie = serialize(key, '', { ...options, path: '/', maxAge: 0 });
|
||||
})
|
||||
: createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
|
||||
global: {
|
||||
fetch
|
||||
},
|
||||
cookies: {
|
||||
getAll() {
|
||||
return data.cookies;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* It's fine to use `getSession` here, because on the client, `getSession` is
|
||||
|
||||
+98
-45
@@ -1,6 +1,16 @@
|
||||
const OFFLINE_CACHE_PREFIX = 'livingdex-offline-';
|
||||
const OFFLINE_META_CACHE = `${OFFLINE_CACHE_PREFIX}meta-v1`;
|
||||
const OFFLINE_META_URL = '/__offline/current';
|
||||
// Must match OFFLINE_META_FORMAT in src/lib/stores/offlineSync.ts. Bumped when artwork moved to the
|
||||
// shared sprite cache, so pages re-sync older copies instead of reusing them.
|
||||
const OFFLINE_META_FORMAT = 2;
|
||||
// Sprites never change at a given URL and aren't user data, so one cache serves every account and is
|
||||
// kept forever: it deliberately sits outside OFFLINE_CACHE_PREFIX, which sign-out, account changes
|
||||
// and sync cleanup all delete. Only bump the version if the files at existing URLs are replaced.
|
||||
const SPRITE_CACHE = 'livingdex-sprites-v1';
|
||||
// Every sprite file (all forms, shiny and female) with its size; generated by
|
||||
// scripts/sprite-manifest.mjs. Kept in SPRITE_CACHE, so it changes exactly when the sprites do.
|
||||
const SPRITE_MANIFEST_URL = '/sprites-small/manifest.json';
|
||||
const ARTWORK_FETCH_TIMEOUT_MS = 15_000;
|
||||
let offlineEpoch = 0;
|
||||
let offlineOperation = Promise.resolve();
|
||||
@@ -16,10 +26,50 @@ function dataCacheName(userId, generation) {
|
||||
return `${OFFLINE_CACHE_PREFIX}data-v1-${userId}-${generation}`;
|
||||
}
|
||||
|
||||
// Sprites never change at a given URL, so each user keeps one artwork cache that is topped up
|
||||
// incrementally instead of being rebuilt on every sync.
|
||||
function artworkCacheName(userId) {
|
||||
return `${OFFLINE_CACHE_PREFIX}art-v2-${userId}`;
|
||||
// The old per-user artwork caches hold full-size (or opaque, quota-padded) sprites.
|
||||
function isObsoleteArtworkCache(name) {
|
||||
return name.startsWith(`${OFFLINE_CACHE_PREFIX}art-`);
|
||||
}
|
||||
|
||||
async function deleteObsoleteArtworkCaches() {
|
||||
await Promise.all(
|
||||
(await caches.keys()).filter(isObsoleteArtworkCache).map((name) => caches.delete(name))
|
||||
);
|
||||
}
|
||||
|
||||
async function loadSpriteManifest(cache) {
|
||||
let response = await cache.match(SPRITE_MANIFEST_URL);
|
||||
if (!response) {
|
||||
response = await fetch(SPRITE_MANIFEST_URL);
|
||||
if (!response.ok) throw new Error(`Sprite list unavailable (HTTP ${response.status})`);
|
||||
await cache.put(SPRITE_MANIFEST_URL, response.clone());
|
||||
}
|
||||
const manifest = await response.json();
|
||||
if (manifest?.version !== 1 || !Array.isArray(manifest.files))
|
||||
throw new Error('Unsupported sprite list');
|
||||
return manifest.files;
|
||||
}
|
||||
|
||||
// Maps every sprite in the manifest to its absolute URL under `root` (the page's sprite folder).
|
||||
async function allSpriteSizes(cache, root) {
|
||||
const sizes = new Map();
|
||||
for (const [file, size] of await loadSpriteManifest(cache)) {
|
||||
const url = new URL(`${root}/${file}`, self.location.origin);
|
||||
if (!isSpriteUrl(url)) throw new Error('Invalid sprite location');
|
||||
sizes.set(url.href, size);
|
||||
}
|
||||
return sizes;
|
||||
}
|
||||
|
||||
async function missingSprites(cache, root) {
|
||||
const sizes = await allSpriteSizes(cache, root);
|
||||
const cached = new Set((await cache.keys()).map((request) => request.url));
|
||||
const missing = [...sizes.keys()].filter((url) => !cached.has(url));
|
||||
return {
|
||||
total: sizes.size,
|
||||
missing,
|
||||
missingBytes: missing.reduce((bytes, url) => bytes + sizes.get(url), 0)
|
||||
};
|
||||
}
|
||||
|
||||
// Covers both the local `/sprites-small/...` folder and the GitHub-hosted copy of it.
|
||||
@@ -46,23 +96,13 @@ async function notifyOfflineDataCleared() {
|
||||
for (const client of windows) client.postMessage({ type: 'OFFLINE_DATA_CLEARED' });
|
||||
}
|
||||
|
||||
async function cacheArtwork(cache, urls, isCurrent) {
|
||||
const wanted = new Set(urls.map((url) => new URL(url, self.location.origin).href));
|
||||
const cachedRequests = await cache.keys();
|
||||
const cached = new Set(cachedRequests.map((request) => request.url));
|
||||
await Promise.all(
|
||||
cachedRequests
|
||||
.filter((request) => !wanted.has(request.url))
|
||||
.map((request) => cache.delete(request))
|
||||
);
|
||||
const missing = [...wanted].filter((url) => !cached.has(url));
|
||||
|
||||
async function fetchSprites(cache, missing) {
|
||||
let next = 0;
|
||||
let failed = 0;
|
||||
const workers = Array.from({ length: Math.min(6, missing.length) }, async () => {
|
||||
for (;;) {
|
||||
const index = next++;
|
||||
if (index >= missing.length || !isCurrent()) return;
|
||||
if (index >= missing.length) return;
|
||||
const url = missing[index];
|
||||
const controller = new AbortController();
|
||||
const timeout = setTimeout(() => controller.abort(), ARTWORK_FETCH_TIMEOUT_MS);
|
||||
@@ -120,6 +160,32 @@ self.addEventListener('message', (event) => {
|
||||
);
|
||||
return;
|
||||
}
|
||||
// Sprites aren't account data, so these work for whoever is signed in and survive sign-out.
|
||||
if (event.data?.type === 'ARTWORK_STATUS' || event.data?.type === 'CACHE_ALL_ARTWORK') {
|
||||
const download = event.data.type === 'CACHE_ALL_ARTWORK';
|
||||
const root = String(event.data.spriteRoot ?? '');
|
||||
event.waitUntil(
|
||||
(async () => {
|
||||
const cache = await caches.open(SPRITE_CACHE);
|
||||
let status = await missingSprites(cache, root);
|
||||
let failedArtwork = 0;
|
||||
if (download && status.missing.length > 0) {
|
||||
failedArtwork = await fetchSprites(cache, status.missing);
|
||||
status = await missingSprites(cache, root);
|
||||
}
|
||||
reply({
|
||||
ok: true,
|
||||
total: status.total,
|
||||
missing: status.missing.length,
|
||||
missingBytes: status.missingBytes,
|
||||
failedArtwork
|
||||
});
|
||||
})().catch((error) =>
|
||||
reply({ ok: false, error: error instanceof Error ? error.message : String(error) })
|
||||
)
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (event.data?.type !== 'SYNC_OFFLINE_SNAPSHOT') return;
|
||||
const syncEpoch = offlineEpoch;
|
||||
const syncUserId = claimedUserId;
|
||||
@@ -140,13 +206,7 @@ self.addEventListener('message', (event) => {
|
||||
const previousMeta = await currentOfflineMeta();
|
||||
if (previousMeta?.userId && previousMeta.userId !== snapshot.userId)
|
||||
await clearOfflineData();
|
||||
// Per-sync artwork caches of opaque responses could fill the whole storage quota, so drop
|
||||
// them before writing anything new.
|
||||
await Promise.all(
|
||||
(await caches.keys())
|
||||
.filter((name) => name.startsWith(`${OFFLINE_CACHE_PREFIX}art-v1-`))
|
||||
.map((name) => caches.delete(name))
|
||||
);
|
||||
await deleteObsoleteArtworkCaches();
|
||||
|
||||
const timestamp = String(snapshot.generatedAt).replace(/[^0-9]/g, '');
|
||||
const generation = `${timestamp}-${crypto.randomUUID()}`;
|
||||
@@ -161,18 +221,15 @@ self.addEventListener('message', (event) => {
|
||||
if (!isCurrent())
|
||||
throw new Error('Offline synchronization was superseded by an account change');
|
||||
|
||||
// Commit the collection before any artwork so a slow or failing sprite download can never
|
||||
// prevent the offline copy from being saved.
|
||||
const artworkCache = artworkCacheName(snapshot.userId);
|
||||
const metaCache = await caches.open(OFFLINE_META_CACHE);
|
||||
await metaCache.put(
|
||||
OFFLINE_META_URL,
|
||||
new Response(
|
||||
JSON.stringify({
|
||||
format: OFFLINE_META_FORMAT,
|
||||
userId: snapshot.userId,
|
||||
generatedAt: snapshot.generatedAt,
|
||||
dataCache: nextData,
|
||||
artworkCache
|
||||
dataCache: nextData
|
||||
}),
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
@@ -192,19 +249,14 @@ self.addEventListener('message', (event) => {
|
||||
.filter(
|
||||
(name) =>
|
||||
name.startsWith(OFFLINE_CACHE_PREFIX) &&
|
||||
![OFFLINE_META_CACHE, nextData, artworkCache].includes(name)
|
||||
![OFFLINE_META_CACHE, nextData].includes(name)
|
||||
)
|
||||
.map((name) => caches.delete(name))
|
||||
);
|
||||
|
||||
const failedArtwork = await cacheArtwork(
|
||||
await caches.open(artworkCache),
|
||||
Array.from(new Set(event.data.artworkUrls ?? [])),
|
||||
isCurrent
|
||||
);
|
||||
if (!isCurrent())
|
||||
throw new Error('Offline synchronization was superseded by an account change');
|
||||
reply({ ok: true, failedArtwork });
|
||||
// Artwork is not downloaded here: the fetch handler caches sprites as they are viewed, and
|
||||
// CACHE_ALL_ARTWORK fetches the rest only when the user asks for it.
|
||||
reply({ ok: true });
|
||||
} catch (error) {
|
||||
if (!committed && nextData) await caches.delete(nextData).catch(() => undefined);
|
||||
reply({ ok: false, error: error instanceof Error ? error.message : String(error) });
|
||||
@@ -213,6 +265,10 @@ self.addEventListener('message', (event) => {
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(deleteObsoleteArtworkCaches());
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
const url = new URL(event.request.url);
|
||||
if (event.request.mode === 'navigate' && !['/offline', '/offline.html'].includes(url.pathname)) {
|
||||
@@ -227,17 +283,14 @@ self.addEventListener('fetch', (event) => {
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (event.request.destination !== 'image') return;
|
||||
if (event.request.destination !== 'image' || !isSpriteUrl(url)) return;
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
const meta = await currentOfflineMeta();
|
||||
if (!meta?.artworkCache) return fetch(event.request);
|
||||
const cache = await caches.open(meta.artworkCache);
|
||||
const cached = await cache.match(event.request, { ignoreSearch: true });
|
||||
// Cache-first with fill-on-miss for everyone, signed in or not: a sprite is downloaded once
|
||||
// and served from the cache from then on.
|
||||
const cache = await caches.open(SPRITE_CACHE);
|
||||
const cached = await cache.match(url.href, { ignoreSearch: true });
|
||||
if (cached) return cached;
|
||||
if (!isSpriteUrl(url)) return fetch(event.request);
|
||||
// Cache-first with fill-on-miss: a sprite shown online is stored once and served from the
|
||||
// cache from then on, so the bulk sync never has to download it again.
|
||||
try {
|
||||
const response = await fetch(url.href, {
|
||||
mode: url.origin === self.location.origin ? 'same-origin' : 'cors'
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,35 @@
|
||||
import { readFileSync } from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
// @ts-expect-error - plain ESM build script without type declarations
|
||||
import { buildSpriteManifest } from '../../scripts/sprite-manifest.mjs';
|
||||
import { resolveSpriteUrl, spriteRoot } from '$lib/utils/spriteUrl';
|
||||
|
||||
const spritesDir = path.join(process.cwd(), 'static', 'sprites-small');
|
||||
|
||||
describe('sprite manifest', () => {
|
||||
const committed = JSON.parse(readFileSync(path.join(spritesDir, 'manifest.json'), 'utf8'));
|
||||
|
||||
it('lists exactly the sprite files on disk, with their sizes', async () => {
|
||||
// "Save all artwork" downloads this list, so a stale manifest would miss or 404 sprites.
|
||||
expect(committed).toEqual(await buildSpriteManifest(spritesDir));
|
||||
});
|
||||
|
||||
it('covers forms, shiny and female variants', () => {
|
||||
const files: string[] = committed.files.map(([file]: [string, number]) => file);
|
||||
expect(files.some((file) => file.startsWith('shiny/'))).toBe(true);
|
||||
expect(files.some((file) => file.startsWith('female/'))).toBe(true);
|
||||
expect(files.some((file) => file.startsWith('shiny/female/'))).toBe(true);
|
||||
// Forms use either a "<number>-<form>" key or a 10000+ national-style number.
|
||||
expect(files.some((file) => /^\d+-[a-z0-9-]+\.webp$/.test(file))).toBe(true);
|
||||
expect(files.some((file) => /^10\d{3}\.webp$/.test(file))).toBe(true);
|
||||
});
|
||||
|
||||
it('uses the same folder that sprite URLs resolve into', () => {
|
||||
for (const useLocal of [true, false]) {
|
||||
expect(
|
||||
resolveSpriteUrl({ pokedexNumber: 25, form: '', spriteKey: '25' }, true, useLocal)
|
||||
).toBe(`${spriteRoot(useLocal)}/shiny/25.webp`);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user