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:
44
web/src/offline.ts
Normal file
44
web/src/offline.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
/* ---------------- offline (#389) ---------------- */
|
||||
// The service worker (web/sw.js) keeps the page, what it read from the API and the pictures in
|
||||
// unread items' text, and holds reads, flags and places made offline until the connection is
|
||||
// back. Only in a secure context: over plain HTTP on a LAN address there is none, and iPX is as
|
||||
// it was.
|
||||
const worker=('serviceWorker' in navigator) ? navigator.serviceWorker : null;
|
||||
worker?.register('/sw.js').catch(()=>{});
|
||||
const toWorker=(msg: object)=>worker?.controller?.postMessage(msg);
|
||||
/// What waited for the connection goes now: on its return, and when the live stream comes back.
|
||||
function flushOutbox(){ toWorker({flush:true}); }
|
||||
window.addEventListener('online',flushOutbox);
|
||||
window.addEventListener('offline',()=>toast('You are offline. What iPX has saved still opens, and what you read is sent when you are back.'));
|
||||
|
||||
/// The pictures in the text of the unread items among `entries`, as their HTML names them.
|
||||
function textPictures(entries: Entry[]): string[]{
|
||||
const out=new Set<string>();
|
||||
for(const e of entries){
|
||||
if(e.read) continue;
|
||||
for(const html of [e.description,e.markdown_html]){
|
||||
for(const m of (html||'').matchAll(/<img\b[^>]*?\ssrc="([^"]+)"/g)){
|
||||
const src=m[1]!.replace(/"/g,'"').replace(/ /g,' ').replace(/&/g,'&');
|
||||
if(/^https?:\/\//.test(src)) out.add(src);
|
||||
}
|
||||
}
|
||||
}
|
||||
return [...out];
|
||||
}
|
||||
/// Asks the worker to keep, through ipx, the pictures of a list's unread items for offline.
|
||||
function savePictures(entries: Entry[]){
|
||||
const p=textPictures(entries);
|
||||
if(p.length) toWorker({pictures:p});
|
||||
}
|
||||
|
||||
/// Everything kept for offline, gone: at sign-out, and when another account signs in here.
|
||||
async function clearOffline(){
|
||||
try{ for(const k of await caches.keys()) if(k.startsWith('ipx-')) await caches.delete(k); }catch{}
|
||||
}
|
||||
function offlineOwner(name: string){
|
||||
try{
|
||||
const was=localStorage.getItem('ipx.owner');
|
||||
if(was!==null&&was!==name) clearOffline();
|
||||
localStorage.setItem('ipx.owner',name);
|
||||
}catch{}
|
||||
}
|
||||
Reference in New Issue
Block a user