📱 PWA Maker
Turn any responsive website into an installable mobile app. Fill in the details below, upload your logo, and generate a complete PWA package.
App Identity
Appearance
App Logo
Click or drag & drop your logo here
PNG recommended, at least 512x512 pixels
Advanced Options
🎨 Icon Preview
Preview all generated icon sizes. Upload a logo on the Configure page first.
Generated Icons
No logo uploaded yet. Go to Configure to upload your app logo.
Icon Requirements
- Square (1:1 aspect ratio)
- PNG format for best compatibility
- Minimum 512x512 for high-quality results
- Clear and recognizable at small sizes
Generated sizes: 72, 96, 128, 144, 152, 192, 384, and 512 pixels — covering all major platforms (Android, iOS, Windows, Chrome OS).
Maskable icons are also generated with safe-area padding so the icon looks great with any shape mask (circle, squircle, etc.) applied by the OS.
📲 Live Preview
See how your PWA will look on a mobile device.
Preview Notes
- Splash Screen: Shown briefly when the app launches. Uses your background color and app icon.
- Home Screen: How your app icon and name appear on the device home screen.
- In-App: The standalone app view with your theme color in the status/title bar.
📦 Generate & Download
Generate your complete PWA package and download as a ZIP file.
Package Contents
- manifest.json Web App Manifest
- sw.js Service Worker
- pwa-icons/ (8 sizes + maskable) 72px – 512px
- install-snippet.html HTML tags to add
- README.txt Setup instructions
Manifest Preview
📚 PWA Setup Guide
Step-by-step instructions for adding PWA support to your website.
Step 1: Upload Files
After generating and downloading the ZIP file, extract it and upload the following files to the root directory of your website:
your-website.com/
├── manifest.json
├── sw.js
└── pwa-icons/
├── icon-72x72.png
├── icon-96x96.png
├── icon-128x128.png
├── icon-144x144.png
├── icon-152x152.png
├── icon-192x192.png
├── icon-384x384.png
├── icon-512x512.png
├── maskable-192x192.png
└── maskable-512x512.pngStep 2: Add HTML Tags
<link rel="manifest"> tags (e.g. site.webmanifest) from your HTML. Duplicate manifest links will cause the PWA to fail silently.
Add these tags inside the <head> section of your HTML pages. The generated install-snippet.html file contains the exact code for your configuration:
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0f2042">
<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="default">
<link rel="apple-touch-icon" href="/pwa-icons/icon-192x192.png">Step 3: Register Service Worker
</body>, NOT inside <head>. Keep it separate from the Step 2 tags.
Add this script before the closing </body> tag to register the service worker:
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js');
});
}
</script>Step 4: HTTPS Required
PWAs require HTTPS to work. Make sure your website uses SSL/TLS. Most hosting providers offer free SSL through Let's Encrypt. Service workers will not register on HTTP (except localhost for testing).
Step 5: Test Your PWA
Open Chrome DevTools (F12) and go to the Application tab. Check:
- Manifest: Verify your app name, icons, and settings are loaded correctly
- Service Workers: Confirm the service worker is registered and active
- Installability: Look for the install prompt in Chrome's address bar
- Lighthouse: Run a Lighthouse PWA audit for a full compatibility check
iOS Notes
iOS (Safari) has limited PWA support compared to Android. Key differences:
- No install prompt — users must use "Add to Home Screen" from the share menu
- Push notifications require iOS 16.4+ and user must add to home screen first
- Storage is limited to ~50MB and may be cleared after 7 days of inactivity
- No background sync support
The generated package includes Apple-specific meta tags for the best possible iOS experience.
Troubleshooting
"Manifest does not contain name" — Your server may be serving manifest.json with the wrong Content-Type. Add this to your .htaccess (Apache):
For Nginx, add to your server block:
"Cache addAll failed" — One or more URLs in the service worker's cache list returned a 404. Verify that /pwa-icons/icon-192x192.png and /pwa-icons/icon-512x512.png are accessible at those exact paths on your site.
"Manifest does not contain name" (but it does) — Check for duplicate <link rel="manifest"> tags in your HTML. If you have an older site.webmanifest link, remove it. The browser only reads the first manifest link it finds.
No install prompt? — Chrome requires: (1) a valid manifest with name and 192px + 512px icons, (2) an active service worker with a fetch handler, (3) HTTPS, and (4) the user must engage with the site for ~30 seconds. The prompt may not appear on the first visit. Try the browser menu > "Install app" instead.
Changes not taking effect? — Unregister the old service worker in DevTools > Application > Service Workers, then hard-refresh (Ctrl+Shift+R). Or use Application > Storage > "Clear site data".
💾 Saved Configurations
Save and load PWA configurations for different projects.
Save Current Configuration
Saved Configurations
No saved configurations yet.