Configuration
⚡ 5 min readConfigure Web App Kit settings for your PWA. The Configuration panel has three tabs: Basic, Advanced, and Shortcuts
Basic
| Field | Description | Example |
|---|---|---|
| App Name | The full name of the app displayed in install prompts | transcode |
| Short Name | A shorter version of the app name used when space is limited | transcode |
| Description | A brief explanation of what your app does | transcode |
| Web Domain URL | Site launch URL (e.g. https://example.com, http://localhost:3000) | http://localhost:5180 |
| Scope | Scope of the PWA (e.g. /, /main) | / |
| App ID | A unique identifier for your web application. Automatically generated after save. | Read-only |
Advanced
| Field | Description | Example |
|---|---|---|
| Service Worker Path | The URL path where your sw.js file is hosted | /sw.js |
| Service Worker Scope | The scope of URLs the service worker controls | / |
| Display Mode | How the app should be displayed when opened | Standalone |
| Orientation | Preferred orientation for the app | Any |
| Theme Color | Primary color for the app’s interface | Color picker |
| Background Color | Background color for the app | Color picker |
| Prefer Native Apps | Prefer related native apps if available | Toggle |
| Enable Debug Logging | Display debug log messages in the browser console | Toggle |
Display Mode Options
- Standalone - App runs in its own window, looks like a native app
- Fullscreen - Hides browser UI
- Minimal-UI - Minimal browser controls
- Browser - Standard browser tab
Orientation Options
- Any - No preferred orientation
- Portrait - Portrait only
- Landscape - Landscape only
Shortcuts
Shortcuts let users jump to specific pages when they long-press your app icon on the home screen
| Field | Description | Example |
|---|---|---|
| Name | The full name of the shortcut | Dashboard |
| Short Name | A shorter name for limited space (e.g. home screen) | Dash |
| Web Page Url Shortcut | The URL path or full URL the shortcut leads to | /dashboard or https://example.com/revenue |
Managing Shortcuts
- Add Shortcut - Click ”+ Add Shortcut” to create a new entry
- Delete - Click the trash icon to remove a shortcut
Shortcuts appear when users long-press your PWA icon on their home screen, providing quick access to key pages
Next Steps
- Installation Guide - Initial setup
- App Icons - Configure app icons
- Widget - Widget configuration
Last updated on