Progressive Web App
Install your status page as a native app
Progressive Web App (PWA) allows users to install your status page directly to their home screen or desktop, providing an app-like experience without an app store.
Clean Build Default: PWA is disabled by default. Enable it in Admin → Settings → Features.
Why Enable PWA?
Installable
Add to home screen like a native app
Offline Support
View cached status without internet
Push Notifications
Get updates even when app is closed
Fast Loading
Cached assets load instantly
Enabling PWA
- Navigate to Admin Panel → Settings → Features
- Enable the
enablePWAtoggle - Save settings
Once enabled, users will see an install prompt when visiting your status page.
Browser Support
| Browser | Installation Method |
|---|---|
| Chrome/Edge | Install button in address bar + banner prompt |
| Firefox | Install from browser menu |
| Safari/iOS | Share → Add to Home Screen |
| Samsung Internet | Install banner appears automatically |
Service Worker Features
ATStatus includes a service worker that handles:
- Asset caching - Static files cached for offline access
- Offline page - Shows cached status when offline
- Background sync - Syncs data when connection restored
- Push notifications - Receives and displays updates
Push Notifications
When PWA is enabled, users can subscribe to push notifications:
- User visits your status page
- User is prompted to enable notifications
- On accepting, they receive status updates even when not viewing the page
Requirements: Push notifications require HTTPS and a valid VAPID key configured in your environment variables.
VAPID Key Setup
# Generate VAPID keys
npx web-push generate-vapid-keys
# Add to .env file
NEXT_PUBLIC_VAPID_PUBLIC_KEY=your-public-key
VAPID_PRIVATE_KEY=your-private-key
VAPID_EMAIL=mailto:admin@example.comOffline Experience
When users lose internet connectivity, the PWA displays a cached version of the status page. This includes:
- Last known status of all components
- Timestamp of when data was last updated
- Visual indicator that they're viewing cached data
- Automatic refresh when connection is restored