An offline-first Progressive Web App for capturing geotagged field notes, photos, and audio.
FieldKit is the companion project for an article series exploring what modern PWAs can really do, with an honest look at browser support and how each capability compares to Electron. Related capabilities are grouped into a single article where it makes sense, so the number of articles isn't fixed.
| Capability | State |
|---|---|
| Offline-first & background sync | ✅ built |
| Installable (manifest + install prompt) | ✅ built |
| Capture & play media (photo + audio) | ✅ built |
| Push notifications | ✅ built (local demo; server-side push documented) |
| Open, edit & save files | ✅ built |
| Location-based experiences + sensors | ✅ built |
| Native sharing (Web Share + Share Target) | ✅ built |
| Passkeys & biometric auth | ✅ built (client-side lock; server verification documented) |
| Payments | 📄 documented (Payment Request API + limitations) |
FieldKit is plain HTML/CSS/JS with no build step. Serve it over localhost (service workers require a secure context):
git clone https://github.com/JohnJunior/FieldKit.git
cd FieldKit
npx serve .
# then open http://localhost:3000To test offline: open DevTools → Application → Service Workers → tick Offline, add some notes, and refresh. Untick to watch them sync.
- Vanilla JS (ES modules) — no framework, so the code maps 1:1 to the articles
- Service Worker + Cache API for the offline app shell
- IndexedDB for local entry storage
- Background Sync (Chromium) with an
online-event fallback (Safari/Firefox)
MIT — use it, learn from it, send PRs.