WFDASH-WEBAPP/public/sw-rep.js
Dave c8b7e1f51b feat(rep): visit check-in PWA — phone GPS, offline outbox
The rep app: open it on site, it finds who's around you, tick who you
saw, done. Third instance of the per-route-group PWA pattern already
running here (/m boss phone, /counter), so it reuses MobileAuthGate and
gets its own manifest + service worker.

Phone GPS is the primary position source, not the vehicle tracker. The
tracker knows where the bakkie is; the phone knows where the rep is,
and those diverge by a few hundred metres once the rep walks into the
plant. GPS also needs no network, which matters because mine shafts
have poor signal. The tracker is the secondary path
(GET /api/v1/visits/position) for when location is denied or
unavailable. The independently-collected vehicle trail corroborates
check-ins afterwards, so honesty doesn't depend on the phone.

Matching runs on the phone, not the server. The app caches a compact
customer snapshot and runs rankNearbyCustomers locally, so there's one
code path that behaves identically online and off — rather than a
server path plus an offline fallback that only gets exercised in the
places it's hardest to debug.

- (rep)/rep/            layout, page, check-in view, outbox
- visits-service.ts     getCustomerSnapshot, recordVisits
- POST /api/v1/visits           record a check-in
- GET  /api/v1/visits/customers snapshot for the offline cache
- GET  /api/v1/visits/position  tracker fallback
- public/manifest-rep.json, public/sw-rep.js, pickSwPath() branch

These routes authenticate with the browser session, not AGENT_API_KEY —
the caller is a logged-in rep. The rep id comes from the validated
session rather than the request body, so a client can't log a visit as
someone else.

The outbox uses localStorage rather than IndexedDB deliberately: the
payloads are tiny and localStorage is synchronous, which matters when
the rep hits Save and immediately pockets the phone. Entries are only
removed once the server acknowledges them, so a failed flush retries
instead of dropping a visit — duplicates are preferred over loss, and
surfaced rather than merged. Permanently-rejected entries (4xx other
than 401/408/429) are dropped so one bad row can't wedge the queue.

recordVisits writes each visit independently: a stale customer id
shouldn't cost the other four visits in a queued batch.

BLOCKED until one PB admin change: rep_visits.position_source does not
yet allow "phone" — verified against the live instance, PB returns
400 "Invalid value phone". Add it to the select. Separately,
accuracy_m is silently accepted and discarded (PB ignores unknown
fields), so GPS accuracy is thrown away until that number field is
added; not blocking.

47 new tests. Verified on :4001: /rep serves 200 with the right
metadata, manifest-rep.json and sw-rep.js are served.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-06 21:09:27 +02:00

102 lines
3.2 KiB
JavaScript

// Service worker for the /rep visit-logging PWA.
//
// Unlike the boss-phone SW, this one exists primarily so the app SHELL
// loads with no signal. A rep at a mine shaft has GPS but often no
// data, and the whole check-in flow is built to complete offline: the
// customer list is cached in localStorage, matching runs on the phone,
// and the submission sits in an outbox until there's a connection.
//
// So the shell must open from cache, every time, or none of that is
// reachable.
const CACHE_NAME = "wfdash-rep-v1";
const OFFLINE_URL = "/offline";
const PRECACHE_ASSETS = [
"/rep",
"/manifest-rep.json",
"/offline",
"/android-chrome-192x192.png",
"/android-chrome-512x512.png",
"/apple-touch-icon.png",
];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_ASSETS))
);
self.skipWaiting();
});
self.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then((keys) =>
Promise.all(
keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))
)
)
);
self.clients.claim();
});
self.addEventListener("fetch", (event) => {
const { request } = event;
if (request.method !== "GET") return;
const url = new URL(request.url);
// Never cache API traffic. Serving a stale customer snapshot would
// hide newly-added customers from a rep standing in front of one,
// and the app maintains its own snapshot cache in localStorage where
// it can reason about the age of the data.
if (url.pathname.startsWith("/api/")) return;
// Navigations: cache-first for the shell. The opposite of the boss
// dashboard's network-first, and deliberately so — the boss wants
// fresh numbers, the rep wants the app to open at all. Freshness
// comes from the snapshot refresh once there's signal.
if (request.mode === "navigate") {
event.respondWith(
caches
.match(request)
.then((cached) => {
if (cached) {
// Refresh in the background for the next launch.
event.waitUntil(
fetch(request)
.then((response) =>
caches
.open(CACHE_NAME)
.then((cache) => cache.put(request, response.clone()))
)
.catch(() => {})
);
return cached;
}
return fetch(request).then((response) => {
const clone = response.clone();
caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
return response;
});
})
.catch(async () => {
const shell = await caches.match("/rep");
return shell || caches.match(OFFLINE_URL);
})
);
return;
}
// Static assets: stale-while-revalidate.
event.respondWith(
caches.match(request).then((cached) => {
const networkFetch = fetch(request)
.then((response) => {
const clone = response.clone();
caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
return response;
})
.catch(() => cached);
return cached || networkFetch;
})
);
});