📘 PWA Generator Documentation

This guide will help you understand how to use PWA Generator, integrate the generated files into your project, and make your website a fully functional Progressive Web App.

🪄 Step 1: Generate Your Files

Visit the Generator page and fill out the form:

  • App name, short name, and description
  • Theme color and background color
  • Start URL and display mode
  • App icons (upload or link)

Click Generate — your manifest.json and sw.js files will be ready for download.

📂 Step 2: Add Files to Your Project

  1. Place manifest.json and sw.js in your project root.
  2. Link the manifest in your <head> section: 
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1a73e8">

Make sure your icons are in the correct folder if referenced in the manifest.

⚙️ Step 3: Register the Service Worker

Add this script at the bottom of your index.html file: 

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker registered:', reg.scope))
      .catch(err => console.error('Service Worker failed:', err));
  });
}
</script>

🔒 Step 4: Use HTTPS

Service workers only work on secure origins (https:// or localhost). If you’re testing locally, use a local dev server like: 

npx http-server -S

✅ Step 5: Test Your PWA

  • Open Chrome DevTools → Application → Manifest to verify details.
  • Use Lighthouse (in DevTools) to audit your PWA score.
  • Try installing your app and using it offline.

💡 Pro Tips

  • Keep your sw.js simple at first, then add caching strategies later.
  • Use descriptive names and icons for better installability.
  • Update your service worker version when you change cached files.