📱 Progressive Web App Example

Offline support with Service Workers + Stimulus + Opal

🟢 You are online

📊 PWA Status

Service Worker: Checking...
Install Status: Not installed
Online Status: Online
Last Update: Never

📝 Offline Notes

Create notes that work offline! Your notes are saved to localStorage and will sync when online.

💾 Cache Management

The app caches resources for offline use. Clear the cache to download fresh content.

Cached Resources: 0

✨ PWA Features Demonstrated

🔄 Service Worker

Background script for offline functionality and caching

📲 Installable

Add to home screen for app-like experience

⚡ Offline Support

Works without internet connection using cached resources

💾 Local Storage

Notes persist across sessions in localStorage

🔔 Status Detection

Real-time online/offline status monitoring

🎨 Native Feel

Theme color, splash screen, standalone display mode

🎯 How to Test PWA Features

  1. Install the app: Click the install button that appears in the browser or use the browser's install option
  2. Test offline mode: Open DevTools → Network tab → Set throttling to "Offline"
  3. Check Service Worker: Open DevTools → Application tab → Service Workers
  4. View cached resources: Open DevTools → Application tab → Cache Storage
  5. Add notes offline: Go offline and add notes - they'll still work!
  6. Test on mobile: Open on mobile device for the best PWA experience