feat: offline-fähige PWA mit IndexedDB-Sync für Durchsichten

Service Worker (public/sw.js) cached die App-Shell für Seiten-GETs
(network-first, cache-fallback). Durchsichten, die offline gespeichert
werden, landen in einer IndexedDB-Warteschlange (idb) statt zu
scheitern und werden automatisch synchronisiert, sobald wieder
Netzwerk verfügbar ist (Mount + online-Event), mit manuellem Retry
über ein Badge im App-Header. Ein modulweiter In-Flight-Lock in
sync.ts verhindert doppelte Synchronisierung bei gleichzeitigen
Aufrufen (gefunden über React-StrictMode-Doppel-Mount, das ohne den
Lock dieselbe Durchsicht zweimal anlegte).
This commit is contained in:
Nick Szaunig committed 2026-08-25 01:14:18 +02:00
1 parent 20239885b4
commit eb66c4bd53
11 files changed
+319 -2

No files matched your search

+52
View File
@@ -0,0 +1,52 @@
import { openDB, DBSchema, IDBPDatabase } from "idb";
import { CreateInspectionInput } from "@/lib/inspections/types";
interface OfflineDB extends DBSchema {
"pending-inspections": {
key: number;
value: PendingInspection;
};
}
export interface PendingInspection {
id: number;
input: CreateInspectionInput;
queuedAt: string;
}
const DB_NAME = "apicore-offline";
const DB_VERSION = 1;
const STORE_NAME = "pending-inspections";
let dbPromise: Promise<IDBPDatabase<OfflineDB>> | null = null;
function getDb(): Promise<IDBPDatabase<OfflineDB>> {
if (!dbPromise) {
dbPromise = openDB<OfflineDB>(DB_NAME, DB_VERSION, {
upgrade(db) {
db.createObjectStore(STORE_NAME, { keyPath: "id", autoIncrement: true });
},
});
}
return dbPromise;
}
export async function queueInspection(input: CreateInspectionInput): Promise<void> {
const db = await getDb();
await db.add(STORE_NAME, { input, queuedAt: new Date().toISOString() } as PendingInspection);
}
export async function getPendingInspections(): Promise<PendingInspection[]> {
const db = await getDb();
return db.getAll(STORE_NAME);
}
export async function removePendingInspection(id: number): Promise<void> {
const db = await getDb();
await db.delete(STORE_NAME, id);
}
export async function countPendingInspections(): Promise<number> {
const db = await getDb();
return db.count(STORE_NAME);
}