PWA Manifest Generator - Online Create app.webmanifest
Fill in your PWA details to generate a valid manifest.json file. Include icons, theme color, display mode.
UD5 Toolkit
Control how your PWA launches when users click links. Configure client_mode,
test launch behavior visually, and generate production-ready manifest configurations.
Drag or click to reorder — browser tries each mode in sequence:
Define path patterns for different launch behaviors:
| Browser | Support | Version | Notes |
|---|---|---|---|
| Chrome | Full Support | 98+ | All client_mode values + route_to (110+) |
| Edge | Full Support | 98+ | Same as Chromium |
| Opera | Full Support | 84+ | Chromium-based |
| Samsung Internet | Partial | 20+ | Basic client_mode support |
| Firefox | Not Supported | — | No launch_handler implementation |
| Safari | Not Supported | — | No PWA launch handling |
Data as of 2024. For the latest, check Can I Use or Chrome Developers.
Prevent multiple player instances. Clicking a song link focuses the existing player window instead of opening a new one.
Reuse the open chat window and navigate to the new conversation. Keeps only one app instance.
Allow multiple documents open simultaneously. Each link opens a fresh window for side-by-side editing.
Route product links to existing window, but open help/support links in new windows for comparison.
launch_handler field in your manifest.json.
You can also specify an array like ["focus-existing", "navigate-new"] for fallback behavior.
Add the launch_handler field to your manifest.json:
{
"name": "My App",
"start_url": "/",
"display": "standalone",
"launch_handler": {
"client_mode": "focus-existing"
}
}
For advanced routing (Chrome 110+), use route_to with pathname patterns. Use the configuration generator above to build your manifest interactively.
launch_handler field is simply ignored, and the browser falls back to its default launch behavior. This makes it safe to include as a progressive enhancement. Check the compatibility table above for detailed version information.
route_to (available in Chrome 110+) allows you to define URL-path-based rules for different launch behaviors. Each rule has a pathname pattern (using simple glob matching with *) and a corresponding client_mode. Optionally, you can specify a target_url to redirect the launch to a different URL.
Example pattern: /play/* matches /play/song/123 but not /playlist. The * wildcard matches any sequence of characters within a path segment.
launch_handler configurations. The app must have a valid manifest with display set to standalone, fullscreen, or minimal-ui and be installed by the user.
localhost).chrome://launch-handler internal testing).client_mode setting.scope in your manifest defines which URLs are considered "within" your PWA. Launch Handler only applies to URLs that fall inside your app's scope. If a user clicks a link outside your scope, the browser handles it normally. Ensure your scope is correctly set (defaults to the directory of start_url) for Launch Handler to work as expected.
Fill in your PWA details to generate a valid manifest.json file. Include icons, theme color, display mode.
Learn how to register your PWA to handle custom URL protocols. See the manifest entry and test.
Compress and decompress text using the browser's native Compression Streams API. See the binary output size.
Check if the browser has captured the beforeinstallprompt event. Understand why your PWA is (or isn't) installable.
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.
Unified input demo: see pressure, tilt, and type from any pointer. Compare pointerType values. Essential for drawing apps.
Toggle a screen wake lock to prevent the device from dimming or sleeping. See the lock state and learn the API.
Check if your page triggers the beforeinstallprompt event. Simulate the install flow. Debug PWA installability.
Decode an image progressively using the ImageDecoder API. See partial results and metadata. Modern alternative to <img>.
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
Experiment with the Federated Credential Management API. Simulate a sign‑in flow without third‑party cookies. Privacy‑first.
Request HID devices and list them. Read input reports and send output. For custom hardware and controllers.
Request permission and detect when the user is idle (away from keyboard). See screen lock state. For native‑like apps.
Demonstrate how the Web OTP API automatically reads one‑time codes from SMS (mobile). Simulation with a fake SMS input.
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Register a periodic background sync to fetch fresh data even when the tab is closed. Understand the API and limits.
Connect a gamepad and see all button presses and axis movements visually. Check that every input is detected correctly.
Trigger different vibration patterns on mobile devices. Test if your phone supports haptic feedback. Simple demo.
See your device's battery level, charging status, and discharge time using the Battery Status API. Fun utility.
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Experiment with the Async Clipboard API: read/write text and images from the clipboard. Verify permissions and see demo code.
Test the Web Share API by sharing text, links, and files directly from the browser. Check compatibility and see example code.
Enter an API URL and quickly check its HTTP status code and response time. See response headers and body. Browser fetch.
Pick a method, URL, headers, and body, then send an HTTP request directly from your browser. Debug APIs easily.
Find safe mixing ratios for the classic elephant toothpaste demonstration. Volume adjustments for different container sizes.