Skip to content

feat: Progressive Web App with iPhone push notification support#55

Draft
quyen082 with Copilot wants to merge 3 commits into
mainfrom
copilot/build-pwa-with-push-notifications
Draft

feat: Progressive Web App with iPhone push notification support#55
quyen082 with Copilot wants to merge 3 commits into
mainfrom
copilot/build-pwa-with-push-notifications

Conversation

Copilot AI commented Mar 29, 2026

Copy link
Copy Markdown
Contributor

Adds full PWA capabilities to the Mekong frontend, enabling iOS users to install the app to their Home Screen and receive Web Push notifications (iOS 16.4+ standalone required).

Frontend

  • Manifest & service workerpublic/manifest.webmanifest declares app identity/icons; public/sw.js implements stale-while-revalidate caching for the app shell, network-first for /api/*, and handles push / notificationclick / pushsubscriptionchange events
  • Icons — PNG icons at 72–512 px generated and copied to dist/ via CopyRspackPlugin in modern.config.ts
  • iOS meta tagshtml.ejs updated with apple-mobile-web-app-capable, apple-touch-icon, theme-color, viewport-fit=cover
  • src/lib/pwa.ts — SW registration, subscribeToPush / unsubscribeFromPush utilities with server sync and error handling, isInstalledPWA helper
  • InstallPrompt — native beforeinstallprompt on Android/Chrome; iOS Safari falls back to in-app instructions ("Share → Add to Home Screen")
  • PushNotificationManager — bell icon in the header; detects iOS non-standalone mode and nudges install via the existing NotificationSystem rather than alert()

Backend

  • web-push added as dependency; VAPID details configured from env vars
  • /api/push/* routessubscribe, unsubscribe, vapid-public-key, and send (guarded by x-api-key when API_KEY is set)
  • In-memory Map stores subscriptions; intended for replacement with PostgreSQL in production
  • VAPID_PUBLIC_KEY / VAPID_PRIVATE_KEY / VAPID_SUBJECT documented in env.example; NEXT_PUBLIC_VAPID_PUBLIC_KEY exposed to the frontend build via modern.config.ts define

Docs

PWA.md covers iOS installation steps, push notification setup, VAPID key generation, local testing workflow, and a browser support matrix.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Add PWA with iPhone push notification support feat: Progressive Web App with iPhone push notification support Mar 29, 2026
Copilot AI requested a review from quyen082 March 29, 2026 10:44

@quyen082 quyen082 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot add automation test for UI using playwright

Agent-Logs-Url: https://github.com/grokking-vietnam/playground/sessions/d836823e-0232-48c6-885a-e872fd79091e

Co-authored-by: quyen082 <193709075+quyen082@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Build a Progressive Web App (PWA) with iPhone Push Notification Support

2 participants