Progressive Web App (PWA)

Install your status page as a native-like app on any device. Users can access it instantly from their home screen without opening a browser, with offline support for basic information.

What is PWA?

Progressive Web App (PWA) allows users to install your status page like a native app:

  • Home Screen Icon - One tap to open, no typing URLs
  • App-Like Experience - Opens without browser UI (no address bar, tabs)
  • Offline Support - Last cached version available when offline
  • Faster Access - Instant launch, cached resources

Benefits:

  • Higher engagement - users check status more frequently
  • Professional appearance - branded app icon on devices
  • Better accessibility - especially useful during incidents

Setup

1. Enable PWA

  1. Navigate to Settings → PWA
  2. Enable PWA Enabled
  3. Configure:
    • Name: Full app name (e.g., "ACME Status Page")
    • Short Name: Max 12 characters (e.g., "ACME")
    • Display Mode: Standalone (recommended)
    • Theme Color: Browser UI color (e.g., #0F192A)
    • Background Color: Splash screen color (e.g., #FFFFFF)
  4. Save

2. Upload Icons

  1. Navigate to Settings → Appearance
  2. Upload both icon sizes:
    • PWA Icon 192×192 - Home screen icon
    • PWA Icon 512×512 - Splash screen icon
  3. Save

Icons must be exactly 192×192 and 512×512 pixels. Use square PNG images for best results.

Display Modes

Standalone (Recommended)

  • Looks like a native app, no browser UI
  • System status bar visible
  • Best for most use cases

Minimal UI

  • Minimal browser controls (back button only)
  • Compromise between web and app

Fullscreen

  • Uses entire screen, no UI at all
  • Use with caution - harder to navigate

Installation

Desktop (Chrome/Edge)

  1. Visit your status page
  2. Click "Install" button in address bar (⊕ icon)
  3. Confirm installation
  4. App appears in dock/taskbar

Android

  1. Visit status page in Chrome
  2. Tap "Add to Home Screen" or "Install app"
  3. Confirm installation
  4. Icon appears on home screen

iOS (Safari)

  1. Visit status page in Safari
  2. Tap Share button (□↑)
  3. Tap "Add to Home Screen"
  4. Tap "Add"

iOS requires manual installation via Share menu. No automatic install prompt.

Icon Guidelines

Requirements:

  • 192×192 pixels (home screen)
  • 512×512 pixels (splash screen)
  • PNG format with transparency
  • Square images (OS adds padding)

Best Practices:

  • ✅ High contrast - readable on any background
  • ✅ Simple design - recognizable when small
  • ❌ No text - hard to read at small sizes

Fallback: If no icons uploaded, LIVCK logo is used.

Offline Support

What works offline:

  • Open the app without internet
  • View last cached version
  • See basic service status

Limitations:

  • Real-time updates need internet
  • New incidents require connection
  • Status changes need online connection

The service worker caches resources automatically when PWA is enabled.

Troubleshooting

PWA Not Installing

  1. Check PWA is enabled in Settings → PWA
  2. Verify HTTPS is active (required except localhost)
  3. Confirm both icons are uploaded
  4. Test manifest: visit /manifest.json

Browser support:

  • Desktop: Chrome, Edge, Opera
  • Android: Chrome, Edge, Samsung Internet
  • iOS: Safari 11.3+ (manual only)

Icons Not Showing

  1. Verify exact sizes (192×192, 512×512)
  2. Check PNG format
  3. Clear browser cache
  4. Reinstall app

App Shows Old Content

  1. Uninstall PWA
  2. Clear browser cache
  3. Reinstall
  4. Service worker fetches fresh content

Security

HTTPS Required: PWAs need HTTPS for security (except localhost for development).

Privacy: All caching happens locally on user's device. No external data transmission.

Additional Resources