Skip to content

feat: add PWA update notifications and service worker update flow#330

Merged
RUKAYAT-CODER merged 1 commit into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/pwa-update-notifications
Apr 28, 2026
Merged

feat: add PWA update notifications and service worker update flow#330
RUKAYAT-CODER merged 1 commit into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/pwa-update-notifications

Conversation

@DeePrincipal-dev-lang
Copy link
Copy Markdown
Contributor

feat: PWA update notifications and service worker update flow

Summary

Users were not receiving notifications when a new version of the app was available, requiring manual
refresh to get updates.

Changes

  • public/sw.js – Service worker with skipWaiting, clientsClaim, and offline fallback
  • src/utils/registerSW.ts – Registration utility that detects a waiting SW and triggers the update
    callback; auto-reloads on controllerchange
  • src/components/UpdateBanner.tsx – Accessible update prompt banner (role="alert", aria-live="polite")
    with "Update Now" / "Later" actions using lucide icons
  • src/components/pwa/AppUpdateManager.tsx – Refactored to use UpdateBanner, removing duplicated markup
  • src/hooks/usePWA.tsx – Delegates to registerSW / applyUpdate utilities; removed manual event
    listener boilerplate

Update Flow

PWAManager registers SW on mount → registerSW detects waiting SW → updateAvailable = true →
UpdateBanner shown → user clicks "Update Now" → SKIP_WAITING posted → new SW activates → page reloads
automatically

Testing

  • Install the app as a PWA
  • Deploy a new version (bumps SW file)
  • Confirm the update banner appears without manual refresh
  • Click "Update Now" and confirm the page reloads with the new version

Closes #243

- Add public/sw.js with skipWaiting and clientsClaim
- Add src/utils/registerSW.ts with update detection logic
- Add src/components/UpdateBanner.tsx update prompt UI
- Refactor AppUpdateManager to use UpdateBanner
- Update usePWA to delegate to registerSW/applyUpdate utilities

Closes #issue
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Apr 28, 2026

@DeePrincipal-dev-lang Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER RUKAYAT-CODER merged commit d69fc04 into rinafcode:main Apr 28, 2026
1 of 2 checks passed
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.

Progressive Web App Updates

2 participants