How to Use the Demos on What PWA Can Do Today
What PWA Can Do Today is itself a Progressive Web App, so the most reliable way to use it is to install it first, then open the demos from your home screen or desktop. Installing matters because several capabilities (installation prompts, shortcuts, notifications, offline behavior) only appear in an installed or standalone context. If you just want a quick look, you can browse the demos in a normal browser tab, but expect some features to be unavailable or behave differently.
Step 1: Install the site as an app
- Open whatpwacando.today in a browser that supports PWA installation.
- Look for the Add to home screen button on the page. The site notes that this button becomes enabled when your browser and device support installation.
- Trigger it and confirm the native install dialog.
- Launch the app from your home screen or desktop rather than the browser tab.
Expected result: the site opens in its own window or app shell, and capabilities that depend on installed mode become testable.
Common snag: if the button never enables, your browser or platform doesn't support the install flow in that context. Try a different browser or device before assuming the demo is broken.
Step 2: Browse the live demos
The site hosts 40+ live demos, each demonstrating one web capability usable in a PWA. Scroll to the PWA App Demos section and tap any demo to run it on your own device.
Capabilities covered include, based on the site's own list:
| Capability | What the demo shows |
|---|---|
| Installation | Native install dialog via the beforeinstallprompt event |
| Offline support | Service Worker enabling offline use |
| Notifications | Notifications API, including when the app isn't active |
| Declarative Web Push | Push notifications without a service worker |
| Shortcuts | Quick access to app pages from the app icon |
| View Transitions | App-like transitions between pages |
| Incoming Call Notifications | Call-style notifications in a web app |
| Geolocation | Sharing location with the web app |
| Media capture | Camera and microphone access |
| Media Capability Elements | Camera/mic access via browser-controlled elements |
| AirPlay | Streaming video from a PWA to an Apple TV on iOS/macOS |
Step 3: Read the demo info
Each demo has a Show demo info / Hide demo info toggle. Use it to see what the demo is testing and which API or browser feature it relies on. This is the fastest way to connect a visible behavior to the underlying capability, which helps when you later try to reproduce it in your own app.
Step 4: Check what your device actually supports
The PWA capabilities checklist shows which capabilities are supported on your current device. Run this before or after the demos to separate "the demo failed" from "my device doesn't support this."
A practical workflow:
- Open the capabilities checklist.
- Note which items are supported.
- Run only those demos first.
- For unsupported items, switch device or browser and re-check.
If something doesn't work
The site points to a free pwa-check tool for identifying and fixing implementation issues, and a PWA Runtime Audit for integrating checks into a CI/CD pipeline. Those are aimed at developers building PWAs rather than at people just trying demos, but they're the right next step if a capability you need keeps failing.
When this approach fits
Use the install-first method if you want to test real PWA behavior, especially installation, notifications, shortcuts, and offline support. Skip installation if you only want to read about capabilities or see a demo's UI — but treat any failure in a plain browser tab as inconclusive rather than a verdict on the feature.