PWA Capabilities — Interactive Demo

The browser fires a `beforeinstallprompt` event when the PWA is eligible. iOS controls "Add to Home Screen" via share sheet (manual).

// Example: listen for beforeinstallprompt
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // show your install UI
});
document.getElementById('btnPrompt').addEventListener('click', async () => {
  if(deferredPrompt){ await deferredPrompt.prompt(); let res = await deferredPrompt.userChoice; console.log(res); }
});
    

This demo can attempt to register a temporary worker. For full offline caching, download the provided service-worker.js and serve it from the same folder.

// Simplified service worker caching flow (service-worker.js)
self.addEventListener('install', event => {
  event.waitUntil(caches.open('demo-v1').then(c => c.addAll(['/','/pwa-demo.html'])));
});
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});
    

IndexedDB demo also included (small wrapper). Use it for larger structured storage.

// localStorage usage
localStorage.setItem('demoKey','demoValue');
let v = localStorage.getItem('demoKey');
    

// getUserMedia
const stream = await navigator.mediaDevices.getUserMedia({video:true,audio:true});
video.srcObject = stream;
    

iOS shows a permission dialog. Background tracking while closed is not available in PWAs on iOS.

// Geolocation
navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords));
    

Server required for real push. On iOS Safari it uses APNs behind the scenes. Use the provided snippet to subscribe and send a test push from a server.

// client: subscribe (example)
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({userVisibleOnly:true,applicationServerKey: '...VAPID key...'});
// send `sub` to your server and call push via web-push / APNs.
    

// Web Share
if(navigator.canShare) await navigator.share({title:'Hello',text:'Share from demo'});
    

// Vibration
navigator.vibrate([200,100,200]);
    

// Web Bluetooth (desktop Chromium)
// const dev = await navigator.bluetooth.requestDevice({filters:[{services:['battery_service']}]});
    

// WebSocket simple
// const ws = new WebSocket('wss://echo.websocket.org/');
// ws.onmessage = e => console.log(e.data);