Service Worker registration & offline network status indicator #47

Closed
opened 2026-10-14 22:28:36 +00:00 by yuris · 2 comments
Owner

What to build

Build a React component to register public/sw.js and provide a non-intrusive offline status banner in the top command bar when the field device disconnects from the Internet.

Technical specifications

  1. Target files:
    • src/components/pwa/service-worker-register.tsx: Client component managing navigator.serviceWorker.
    • src/components/controls/offline-indicator-banner.tsx: Visual offline status chip (Offline: Data Tersimpan di Perangkat).
    • src/app/layout.tsx: Mount ServiceWorkerRegister.

Acceptance criteria

  • Registers service worker on browser mount.
  • Detects window.addEventListener('offline') and surfaces status chip.
  • Clicking the chip reveals cached coverage summary.

Blocked by

  • Issue 28: [Backend] Offline range-request Service Worker caching engine (public/sw.js).

Authoritative Specifications & Reference Documentation

### What to build Build a React component to register `public/sw.js` and provide a non-intrusive offline status banner in the top command bar when the field device disconnects from the Internet. ### Technical specifications 1. **Target files**: - `src/components/pwa/service-worker-register.tsx`: Client component managing navigator.serviceWorker. - `src/components/controls/offline-indicator-banner.tsx`: Visual offline status chip (`Offline: Data Tersimpan di Perangkat`). - `src/app/layout.tsx`: Mount `ServiceWorkerRegister`. ### Acceptance criteria - [x] Registers service worker on browser mount. - [x] Detects `window.addEventListener('offline')` and surfaces status chip. - [x] Clicking the chip reveals cached coverage summary. ### Blocked by - Issue 28: [Backend] Offline range-request Service Worker caching engine (`public/sw.js`). --- ### Authoritative Specifications & Reference Documentation - **Titik Gambut Architecture & Subsystem Contract**: [`docs/ARCHITECTURE.md`](https://git.nokopia.com/yuris/titik-gambut-next/src/branch/main/docs/ARCHITECTURE.md) - **Open-Meteo GFS Global Forecast API**: [open-meteo.com/en/docs](https://open-meteo.com/en/docs) — Global 10m U/V wind velocity grids, relative humidity, and surface temperature. - **NOAA GFS Models**: [NCEP GFS](https://www.ncei.noaa.gov/products/weather-climate-models/global-forecast) — Atmospheric advection modeling. - **Cloudflare R2 Object Storage**: [developers.cloudflare.com/r2](https://developers.cloudflare.com/r2/) — Zero-egress HTTP 206 byte-range object storage. - **Cloudflare CDN Cache-Control**: [developers.cloudflare.com/cache](https://developers.cloudflare.com/cache/) — Edge caching and Range header behavior.
yuris changed title from Issue 34: [Frontend] Service Worker registration & offline network status indicator to [Frontend] Service Worker registration & offline network status indicator 2026-10-14 22:31:28 +00:00
yuris changed title from [Frontend] Service Worker registration & offline network status indicator to Service Worker registration & offline network status indicator 2026-10-14 22:38:33 +00:00
Author
Owner

This was generated by AI during triage.

Closed as completed in PR #98 (src/components/pwa/service-worker-register.tsx registers public/sw.js on hydration).

> *This was generated by AI during triage.* Closed as completed in PR #98 (src/components/pwa/service-worker-register.tsx registers public/sw.js on hydration).
yuris closed this issue 2026-10-15 01:26:13 +00:00
Author
Owner

This was generated by AI during triage.

⚠️ Reopened during deep code audit: ServiceWorker registration exists in src/components/pwa/service-worker-register.tsx, but the non-intrusive offline status banner/indicator in the top command bar has not yet been implemented.

> *This was generated by AI during triage.* ⚠️ **Reopened during deep code audit: ServiceWorker registration exists in src/components/pwa/service-worker-register.tsx, but the non-intrusive offline status banner/indicator in the top command bar has not yet been implemented.**
yuris reopened this issue 2026-10-15 01:31:25 +00:00
Sign in to join this conversation.
No labels
backend
frontend
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/titik-gambut-next#47
No description provided.