PWA Feature Demo

Interactive demos for A2HS, Background Sync, Periodic Sync, Push, Web Share, Badging & Cache

Registering Service Worker…
🔍

Browser Support

All Browsers

Feature detection for every PWA API in this browser right now.

📲

Add to Home Screen (A2HS)

All Browsers

Triggers the browser's native install prompt (beforeinstallprompt) to let users pin this app to their home screen or taskbar. Also detects if already running in standalone (installed) mode.

🔄

One-off Background Sync

Chromium

Queues a message in IndexedDB and registers a sync tag. The Service Worker fires flushPendingMessages() once the device is online — even if the tab is closed. Ideal for "send when online" patterns.

⏱

Periodic Background Sync

Chromium

Registers a recurring periodicsync tag (min interval: 1 hour). The SW calls refreshFeed() in the background on a schedule set by the browser, based on the app's site engagement score. Requires the app to be installed.

Feed content will appear here when SW sends FEED_UPDATED

  


  
  

    

      🔔
      
Push Notifications

      All Browsers
    

    

      Requests Notification permission, then shows a local notification via
      the SW registration. In production you'd subscribe with a VAPID key, send the
      endpoint to your server, and receive real server-sent push events.
    

    

      
      
    

    

  


  
  

    

      ↗️
      
Web Share API

      All Browsers
    

    

      Invokes the OS-native share sheet via navigator.share(). No custom
      share UI needed — users get all their installed apps. The second button uses
      navigator.canShare() to share a generated file.
    

    

      
      
    

    

  


  
  

    

      🔴
      
Badging API

      Partial
    

    

      Updates the app icon badge (the number bubble on home screen / taskbar) via
      navigator.setAppBadge(n). OS-rendered — no custom UI. Only visible
      when the app is installed. Currently unsupported in Firefox.
    

    

      Current badge count: 0
    

    

      
      
    

    

  


  
  

    

      💾
      
Cache API

      All Browsers
    

    

      The SW pre-caches static assets on install and serves them offline (cache-first
      strategy). Use these buttons to inspect or clear the cache stores managed by the
      Service Worker.