Generate icons, manifest.json, and service worker for your Progressive Web App
Web App Information
The full name of your web application
Short name for home screen (optional, defaults to App Name)
The filename of your app's homepage (e.g., index.html, app.html)
Brief description of your app (optional)
⚠️ Important: Required HTML Elements
After downloading your PWA package, you must add these two elements to your home page:
1. In the <head> section: <link rel="manifest" href="./manifest.json">
2. At the end of the <body> section: <script>navigator.serviceWorker.register('./sw.js')</script>
📁
Click to upload or drag and drop
SVG or JPEG files accepted
Generated Icons
manifest.json
sw.js (Service Worker)
${'```'}
4. Serve your app over HTTPS (required for PWA and service workers)
- Note: localhost works without HTTPS for testing
- For production, you must use HTTPS
5. Test your PWA using Chrome DevTools (F12):
- Go to Application tab > Manifest (check for errors)
- Go to Application tab > Service Workers (verify it's registered)
- Check Console for any errors
## Troubleshooting PWA Installation
If Chrome doesn't show the install prompt, check:
1. **Service Worker Registration**: Open DevTools Console and verify you see:
"Service Worker registered: ..."
2. **HTTPS Requirement**: App must be served via HTTPS or localhost
3. **Manifest Validation**: In DevTools > Application > Manifest:
- Check that manifest loads without errors
- Verify all icon paths are correct
- Ensure name and start_url are set
4. **Wait Time**: Chrome may delay showing install prompt. You can manually install:
- Chrome menu (⋮) > "Install [App Name]"
- Or use DevTools > Application > Manifest > "Add to home screen"
5. **Common Issues**:
- Missing or incorrect icon file paths
- Service worker failed to register
- Manifest not linked correctly in HTML
- Not served over HTTPS (except localhost)
## Customization
You can customize the service worker caching strategy in sw.js and adjust
the manifest.json properties (theme colors, orientation, etc.) as needed.
---
**IMPORTANT:** You will need to add these two required elements to your home page:
1. Manifest link in the section:
2. Service worker registration script at the end of the body:
Generated with PWA and Icon Generator
`;
zip.file('README.md', readmeContent);
// Generate and download the ZIP file
const content = await zip.generateAsync({ type: 'blob' });
const url = URL.createObjectURL(content);
const a = document.createElement('a');
a.href = url;
const fileName = appName.toLowerCase().replace(/\s+/g, '-');
a.download = `${fileName}-pwa-package.zip`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
newImageBtn.addEventListener('click', () => {
fileInput.value = '';
previewSection.classList.remove('active');
generatedIcons = [];
});