feat(offline): ride out short connection drops instead of losing the save
A save made while the connection blips for a few seconds is retried rather than reverted: the request layer keeps trying a network failure for a fifteen-second window, waking the instant the OS reports a link again, and only falls back to the existing error path if the drop outlasts it. A quiet "reconnecting" pill appears if the wait passes about a second, and leaves the moment it heals — so a two-second blip is felt as nothing at all. This is deliberately not offline mode: the app is a live view of a shared list, so there is no cache to work in with no server and no write log to reconcile. It is only the blip, ridden out. A server error (4xx/5xx) is the server answering and is not retried; an aborted request (a superseded search) is left to propagate. Kristian: an offline function for when the net drops for short periods, seconds. Shared items stay server-authoritative — nothing is edited against a stale copy for longer than the blip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
kristianwind
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
8dc601d09a
commit
b2fcc0b104
+58
-14
@@ -23,6 +23,57 @@ export class ApiError extends Error {
|
||||
}
|
||||
|
||||
import { t } from './i18n.svelte.js';
|
||||
import { connectivity, sleepOrOnline } from './connectivity.svelte.js';
|
||||
|
||||
/**
|
||||
* How long a request keeps retrying a network failure before giving up.
|
||||
*
|
||||
* This is the whole of the "offline" feature and its whole limit: it rides out a
|
||||
* blip of a few seconds so a save is not lost to it, and then — because the app is
|
||||
* a live view of a shared list, not a local database — it stops and says so rather
|
||||
* than holding an edit for a network that is not coming back. Fifteen seconds is
|
||||
* long enough for a handover or a tunnel and short enough that a real outage fails
|
||||
* while the user is still looking at what they did.
|
||||
*/
|
||||
const RETRY_WINDOW_MS = 15000;
|
||||
|
||||
/** Backoff between attempts: 0.5s, 1s, 2s, then 3s, capped. A waiting sleep also
|
||||
* wakes the instant the OS reports a link again, so most blips end on the first. */
|
||||
const backoff = (attempt) => Math.min(500 * 2 ** attempt, 3000);
|
||||
|
||||
/**
|
||||
* Runs `send` (a fetch), retrying only network failures for a short window.
|
||||
*
|
||||
* A network failure is fetch rejecting — no HTTP status ever arrived. An HTTP
|
||||
* error (4xx/5xx) is the server answering, so it is returned, not retried: retrying
|
||||
* a 400 just asks the same wrong question again. An abort is the caller changing
|
||||
* its mind (a superseded search), so it is left to propagate.
|
||||
*
|
||||
* Retrying is not free of risk: a create whose request reached the server but whose
|
||||
* response was lost would be made twice. For a drop of seconds that is rare, and the
|
||||
* alternative — losing the save every time the network hiccups — is the thing this
|
||||
* exists to stop. A server-side idempotency key would remove even that; it is a
|
||||
* larger change noted for later.
|
||||
*/
|
||||
async function withRetry(send, noRetry = false) {
|
||||
const deadline = Date.now() + (noRetry ? 0 : RETRY_WINDOW_MS);
|
||||
let attempt = 0;
|
||||
for (;;) {
|
||||
try {
|
||||
const res = await send();
|
||||
connectivity.reachable();
|
||||
return res;
|
||||
} catch (e) {
|
||||
if (e?.name === 'AbortError') throw e;
|
||||
if (Date.now() >= deadline) {
|
||||
connectivity.lost();
|
||||
throw new ApiError(0, 'offline', 'ingen forbindelse');
|
||||
}
|
||||
connectivity.retrying();
|
||||
await sleepOrOnline(backoff(attempt++));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The key for each code the API can return.
|
||||
@@ -110,14 +161,10 @@ async function request(method, path, body, options = {}) {
|
||||
init.body = JSON.stringify(body);
|
||||
}
|
||||
|
||||
let res;
|
||||
try {
|
||||
res = await fetch(`/api/v1${path}`, init);
|
||||
} catch (e) {
|
||||
// A network failure is not an HTTP status; give it one the app can handle
|
||||
// the same way as everything else.
|
||||
throw new ApiError(0, 'offline', 'ingen forbindelse');
|
||||
}
|
||||
// Retries a network failure for a few seconds so a short drop does not lose the
|
||||
// call; `withRetry` turns an exhausted window into the same `offline` error the
|
||||
// app already handles. `options.noRetry` opts a call out — used by nothing yet.
|
||||
const res = await withRetry(() => fetch(`/api/v1${path}`, init), options.noRetry);
|
||||
|
||||
if (res.status === 204) return null;
|
||||
|
||||
@@ -157,12 +204,9 @@ async function upload(path, file, field = 'file') {
|
||||
const form = new FormData();
|
||||
form.append(field, file);
|
||||
|
||||
let res;
|
||||
try {
|
||||
res = await fetch(`/api/v1${path}`, { method: 'POST', body: form, credentials: 'same-origin' });
|
||||
} catch {
|
||||
throw new ApiError(0, 'offline', 'ingen forbindelse');
|
||||
}
|
||||
const res = await withRetry(() =>
|
||||
fetch(`/api/v1${path}`, { method: 'POST', body: form, credentials: 'same-origin' })
|
||||
);
|
||||
|
||||
const text = await res.text();
|
||||
let payload = null;
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Connectivity, as the app experiences it — not as the browser reports it.
|
||||
*
|
||||
* This is for short drops: a few seconds of lost Wi-Fi, a tunnel, a base station
|
||||
* handing over. It is deliberately NOT offline support. The app is already loaded
|
||||
* and its data is already in memory, so there is nothing to cache and nothing to
|
||||
* open from cold; what a blip needs is for the save you just made to survive it,
|
||||
* not for the whole app to run without a server.
|
||||
*
|
||||
* The request layer drives this: it retries a failed request for a short window
|
||||
* (see api.js) and tells this store while it is trying, so the interface can say
|
||||
* "reconnecting" rather than reverting the change under the user's hands. If the
|
||||
* window runs out it is a real outage, and then the normal error path takes over.
|
||||
*
|
||||
* `navigator.onLine` is only a hint — it goes false when the machine has no route,
|
||||
* but it stays true for a dead gateway or a server that is down, so it cannot be
|
||||
* the source of truth. It is used here only to wake a waiting retry the moment the
|
||||
* OS sees a link again, which is the one thing it is reliable for.
|
||||
*/
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
class Connectivity {
|
||||
/** 'online' — every recent request reached the server.
|
||||
* 'retrying' — a request failed on the network and is being retried.
|
||||
* 'lost' — a request gave up after the retry window; a real outage. */
|
||||
status = $state('online');
|
||||
|
||||
/** A request reached the server. The network is up, whatever it was doing. */
|
||||
reachable() {
|
||||
this.status = 'online';
|
||||
}
|
||||
|
||||
/** A request failed on the network and is about to be tried again. */
|
||||
retrying() {
|
||||
if (this.status !== 'lost') this.status = 'retrying';
|
||||
}
|
||||
|
||||
/** A request used up its retry window without reaching the server. */
|
||||
lost() {
|
||||
this.status = 'lost';
|
||||
}
|
||||
}
|
||||
|
||||
export const connectivity = new Connectivity();
|
||||
|
||||
if (browser) {
|
||||
// The OS lost its link: say so at once rather than waiting for the next request
|
||||
// to fail. It does not, on its own, mean the server is unreachable — but with no
|
||||
// route there is nothing a save can do but wait, and the honest thing is to show
|
||||
// it waiting.
|
||||
window.addEventListener('offline', () => connectivity.retrying());
|
||||
}
|
||||
|
||||
/**
|
||||
* Sleeps for `ms`, but wakes early the moment the OS reports a link again — so a
|
||||
* retry that is biding its time does not sit out the last two seconds of a blip
|
||||
* that has already ended.
|
||||
*/
|
||||
export function sleepOrOnline(ms) {
|
||||
return new Promise((resolve) => {
|
||||
let timer;
|
||||
const done = () => {
|
||||
clearTimeout(timer);
|
||||
if (browser) window.removeEventListener('online', done);
|
||||
resolve();
|
||||
};
|
||||
timer = setTimeout(done, ms);
|
||||
if (browser) window.addEventListener('online', done, { once: true });
|
||||
});
|
||||
}
|
||||
@@ -130,6 +130,8 @@ export const da = {
|
||||
'nav.toggleTheme': 'Skift mellem lyst og mørkt tema',
|
||||
'nav.offline': 'Offline',
|
||||
'nav.offlineHint': 'Ændringer fra andre vises ikke lige nu',
|
||||
'net.reconnecting': 'Genopretter forbindelse…',
|
||||
'net.offline': 'Ingen forbindelse',
|
||||
'nav.doItToday': 'Gør det i dag',
|
||||
|
||||
// --- the sidebar's own sections ------------------------------------------------
|
||||
|
||||
@@ -126,6 +126,8 @@ export const en = {
|
||||
'nav.toggleTheme': 'Switch between light and dark',
|
||||
'nav.offline': 'Offline',
|
||||
'nav.offlineHint': 'Changes from other people are not showing right now',
|
||||
'net.reconnecting': 'Reconnecting…',
|
||||
'net.offline': 'No connection',
|
||||
'nav.doItToday': 'Do it today',
|
||||
|
||||
// --- the sidebar's own sections ------------------------------------------------
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
import { app, theme, sidebar } from '$lib/stores.svelte.js';
|
||||
import { connectivity } from '$lib/connectivity.svelte.js';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import Sidebar from '$lib/components/Sidebar.svelte';
|
||||
@@ -14,6 +15,29 @@
|
||||
let paletteOpen = $state(false);
|
||||
let sidebarOpen = $state(false);
|
||||
|
||||
/**
|
||||
* Whether to show the "reconnecting" pill.
|
||||
*
|
||||
* Held back seven tenths of a second while merely retrying, so a blip that ends
|
||||
* on the first retry never flashes a pill nobody needed to see. A retry that has
|
||||
* already given up ('lost') is a real error and shown at once — the delay is only
|
||||
* for the hopeful case.
|
||||
*/
|
||||
let showNet = $state(false);
|
||||
$effect(() => {
|
||||
const s = connectivity.status;
|
||||
if (s === 'online') {
|
||||
showNet = false;
|
||||
return;
|
||||
}
|
||||
if (s === 'lost') {
|
||||
showNet = true;
|
||||
return;
|
||||
}
|
||||
const timer = setTimeout(() => (showNet = true), 700);
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
|
||||
/**
|
||||
* The two pages that arrive by email, and are for somebody who is not signed in.
|
||||
*
|
||||
@@ -204,6 +228,16 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- A short drop, said quietly: it appears only if a save is still retrying after
|
||||
the better part of a second, and leaves the moment the connection is back — so
|
||||
a two-second blip that heals itself is felt as nothing at all. -->
|
||||
{#if showNet}
|
||||
<div class="netstatus" class:lost={connectivity.status === 'lost'} role="status">
|
||||
<span class="net-dot" aria-hidden="true"></span>
|
||||
{connectivity.status === 'lost' ? t('net.offline') : t('net.reconnecting')}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
@@ -378,6 +412,62 @@
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* The reconnecting pill: at the top, small, centred. Not a toast — a toast is a
|
||||
thing that happened and is over, this is a thing still happening. */
|
||||
.netstatus {
|
||||
position: fixed;
|
||||
top: calc(var(--s3) + env(safe-area-inset-top));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s2);
|
||||
padding: var(--s1) var(--s3);
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line-strong);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.net-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
flex: none;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-amber);
|
||||
animation: net-pulse 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Given up: an amber pulse becomes a still red, the same red a failed toast
|
||||
carries, so "still trying" and "gave up" do not look alike. */
|
||||
.netstatus.lost {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.netstatus.lost .net-dot {
|
||||
background: var(--p1);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes net-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.net-dot {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user