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:
1 parent
20239885b4
commit
eb66c4bd53
11 files changed
+319
-2
No files matched your search
@@ -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);
|
||||
}
|
||||
Reference in new issue
Block a user