App Configuration
App Identity
URLs
Appearance
Category
Service Worker
Advanced Features
App Icon
Drop your icon here or
PNG, JPEG or WebP • Recommended 512×512pxLive Preview
Preview updates in real time as you configure
Manifest Preview
// Fill in the configuration to see your manifest.json preview...PWA Readiness
- App Name is set
- Short Name is set (≤12 chars)
- Start URL configured
- 512×512 icon uploaded
- Theme & background color set
- Service worker strategy selected
Complete Usage Guide
Configure Your App
Fill in the App Name (shown in splash screens & install prompts), Short Name (shown on the home screen, max 12 chars), description, and your app's Start URL.
Design the Appearance
Pick a Theme Color (title bar color in standalone mode) and Background Color (splash screen background). Select Display Mode (Standalone is recommended) and Orientation lock.
Upload Your 512×512 Icon
Upload a high-quality square icon. The tool uses the HTML5 Canvas API to auto-generate all required PWA icon sizes: 512×512, 192×192, and 144×144 without any loss of quality.
Choose Service Worker Strategy
Select a caching strategy. Cache First loads blazing fast from cache; Network First always tries to get fresh content. Either strategy includes a full offline fallback page.
Generate & Download ZIP
Click the Generate & Download PWA ZIP button. JSZip bundles your manifest.json, sw.js, offline.html, and /icons folder into a single .zip file, downloaded instantly.
Deploy to Your Website Root
Extract the ZIP to your website's root folder (same level as index.html). Then add the two code snippets below to your <head> and just before </body> respectively.
<head>
<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#10b981"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="/icons/icon-192x192.png">
</body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW error:', err));
}
</script>
manifest.json Generator
Generates a spec-compliant manifest.json including all required fields: name, short_name, icons, start_url, display, theme_color, background_color, and advanced fields like categories, lang, and screenshots.
Smart Service Worker
The generated sw.js implements your chosen caching strategy with a complete offline fallback. It precaches the offline.html page and serves it automatically when the network is unavailable — no extra configuration needed.
Canvas Icon Resizer
Upload one 512×512 image. The HTML5 Canvas API resizes it to all required PWA icon dimensions (512×512, 192×192, 144×144) as PNG blobs — entirely in your browser, pixel-perfect, zero quality loss.
Web Share Target API
When enabled, your manifest.json includes the share_target field, allowing users to share content (URLs, text, files) directly into your installed PWA from the native system share sheet.
App Badging API
Enabling this adds app_badge capability to your manifest, allowing your PWA to display numeric badges on its home screen icon — perfect for unread message counts and notifications, supported on Chrome, Edge, and Safari.
One-Click ZIP Export
JSZip bundles all generated assets — manifest.json, sw.js, offline.html, and the complete /icons folder — into a single ready-to-deploy pwa-package.zip. Just extract it into your site root.
Frequently Asked Questions
Is this tool 100% free and private?
Yes, completely. PWA Studio PRO MAX runs entirely in your browser. Your icon image, configuration data, and generated files never leave your device. There are no accounts, no server calls, and no data collection. Your data stays 100% private.
What icon size should I upload?
Upload a 512×512 pixel PNG with a transparent background for best results. The tool will automatically generate the 192×192 and 144×144 variants using the Canvas API. Avoid JPEGs if your icon has a transparent background, as JPEG does not support transparency.
Where do I put the extracted files on my server?
Extract the ZIP and place all files in the root directory of your website — the same folder that contains your index.html. The manifest.json and sw.js must be at the root level for the service worker scope to cover your entire site. The /icons folder goes in the root as well.
What is the difference between Cache First and Network First?
Cache First tries to serve a cached response first, falling back to the network if not cached. This results in instant load times for repeat visits but may serve stale content. Network First always tries to fetch the latest content from the network first, falling back to the cache if offline. Choose Cache First for speed-critical apps; Network First for apps that need up-to-date data. Stale While Revalidate serves from cache immediately while updating the cache in the background — the best of both worlds for non-critical content.
My PWA doesn't show an install prompt. Why?
The browser shows the install prompt when all PWA criteria are met: (1) the site is served over HTTPS, (2) a valid manifest.json is linked in <head>, (3) a service worker is registered, and (4) the manifest includes a 192×192 icon. Verify all four conditions. On iOS Safari, users must manually use Share → Add to Home Screen since Safari does not auto-prompt.
What is the Web Share Target API?
The Web Share Target API registers your installed PWA as a "share target" in the operating system. Once installed, your app will appear in the native share sheet when a user shares a URL, text, or file from any other app. Your manifest.json must include the share_target field, and your server must handle the incoming share request at the configured URL.
Does this work for WordPress, Shopify, or other CMS platforms?
Yes! The generated files are platform-agnostic plain files. For WordPress, place the files in the theme root and use a plugin or functions.php to add the <link rel="manifest"> tag. For Shopify, add the manifest link in your theme's layout/theme.liquid. Note that on some platforms, service worker registration may require root-level file access — check your platform's documentation.
Initializing secure discussion portal...