iPX opens and reads without a connection (#389)
With no network the home-screen app showed nothing: no service worker, and the lists the page had fetched, full text included, lived only in its memory. A service worker (web/sw/sw.ts, TypeScript checked against a worker's globals by tsconfig.sw.json, built by swc to /sw.js) goes to the network first for the page and every API read and keeps the answers, so online nothing is an old copy and #388's version check works as before; offline the kept copy answers. Scripts named by hash come from what is kept. Reads, flags and places in an episode that cannot reach the server wait in an outbox, sent in order when the connection is back (and new ones queue behind them meanwhile, so none lands out of turn); a kept list served offline shows the reads waiting there. Pictures: a worker cannot keep another site's pictures sensibly, since browsers count each opaque answer as megabytes. ipx now remembers the picture addresses in item text it sends (bounded, in memory) and /api/art fetches those as it does artwork, through the guarded client; the worker keeps them, for unread items, under a 200 MB budget, and serves them offline in place of the publisher's. Online, pictures still come from their publisher. Sign-out, or another account signing in on the device, clears what was kept. The browser suite blocks the worker except in the offline tests, since it answers before page.route can. The fixture JPEGs are placeholders a browser cannot draw; the offline test uses a real PNG. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -24,7 +24,7 @@ const WEB_VERSION = JSON.parse(fs.readFileSync(path.join(here, '..', 'package.js
|
||||
// The files are one script, concatenated in this order, not modules: they share one top-level
|
||||
// scope, as the single inline script did, and code that runs at load needs what came before it.
|
||||
const PAGES = {
|
||||
'index.html': { script: 'app.js', src: ['util', 'theme', 'feeds', 'feedpage', 'items', 'player', 'dialogs', 'signals', 'gestures', 'events', 'native'] },
|
||||
'index.html': { script: 'app.js', src: ['util', 'theme', 'feeds', 'feedpage', 'items', 'player', 'dialogs', 'signals', 'gestures', 'offline', 'events', 'native'] },
|
||||
'admin.html': { script: 'admin.js', src: ['util', 'theme', 'admin'] },
|
||||
'login.html': { script: 'login.js', src: ['login'] },
|
||||
};
|
||||
@@ -73,6 +73,17 @@ export function buildStyle({ minify = true } = {}) {
|
||||
return out;
|
||||
}
|
||||
|
||||
/// The offline service worker (#389), web/sw/sw.ts made JavaScript, at the top of the site.
|
||||
export function buildWorker({ minify = true } = {}) {
|
||||
const src = fs.readFileSync(path.join(here, 'sw', 'sw.ts'), 'utf8');
|
||||
return swc.transformSync(src, {
|
||||
filename: 'sw.ts',
|
||||
jsc: { parser: { syntax: 'typescript' }, target: 'es2022', minify: minify ? { compress: true, mangle: true } : undefined },
|
||||
isModule: false,
|
||||
minify,
|
||||
}).code;
|
||||
}
|
||||
|
||||
/// The page and its script, built: { html, js, script }, where script is the file's name.
|
||||
export function buildPage(name, { minify = true } = {}) {
|
||||
const { script, src: files } = PAGES[name];
|
||||
@@ -116,6 +127,7 @@ if (process.argv[1] === fileURLToPath(import.meta.url)) {
|
||||
const out = process.argv[2] || path.join(here, 'dist');
|
||||
fs.mkdirSync(out, { recursive: true });
|
||||
fs.writeFileSync(path.join(out, STYLE), buildStyle());
|
||||
fs.writeFileSync(path.join(out, 'sw.js'), buildWorker());
|
||||
fs.writeFileSync(path.join(out, 'hls.js'), HLS);
|
||||
// Served as they are, under the names the pages and the stylesheet use. /favicon.ico is the
|
||||
// PNG, for a browser that asks for that on its own; iOS asks for the precomposed touch icon
|
||||
|
||||
Reference in New Issue
Block a user