tasko/frontend/PWA_SETUP.md

PWA Installation Guide

Your Tasko app is now a Progressive Web App (PWA)! Users can install it on their phones and use it like a native app.

What's Been Added

1. manifest.json

• App name, icons, and theme colors
• Tells the browser how to install the app

2. Service Worker

• Enables offline functionality
• Caches app resources for faster loading

3. Install Prompt

• Beautiful bottom banner prompts users to install
• Shows on mobile devices automatically

4. App Icons

• Multiple sizes for different devices (72px to 512px)

Setting Up Icons

Option 1: Use the Icon Generator (Easiest)

1. Open frontend/generate-icons.html in your browser
2. Icons will auto-generate
3. Right-click each icon and "Save image as..."
4. Save them in frontend/public/ with exact filenames shown

Option 2: Create Custom Icons

1. Create PNG images in these sizes:
   • 72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512
2. Name them as: icon-{size}x{size}.png
3. Place in frontend/public/ folder

Option 3: Use an Online Tool

• PWA Asset Generator
• RealFaviconGenerator

Testing the PWA

On Mobile:

1. Build and deploy your app (or use npm run dev --host)
2. Open the app in Chrome/Safari on your phone
3. You'll see the install prompt at the bottom
4. Tap "Install" to add to home screen

On Desktop (Chrome):

1. Open DevTools (F12)
2. Go to Application > Manifest
3. Click "Add to home screen" to test

Testing Install Prompt:

# In Chrome DevTools Console:
localStorage.removeItem('installPromptDismissed')
# Then refresh the page

Features Users Get

✅ Home Screen Icon - App appears on phone like any other app ✅ Splash Screen - Beautiful loading screen with your branding ✅ Standalone Mode - Runs without browser UI (feels native) ✅ Offline Support - Works without internet (basic functionality) ✅ Fast Loading - Cached resources load instantly

How It Works

Install Flow:

1. User visits your app on mobile
2. After a few seconds, install banner appears
3. User taps "Install"
4. App is added to home screen
5. User can launch from home screen like a native app

Browser Support:

• ✅ Chrome/Edge (Android & Desktop)
• ✅ Safari (iOS 11.3+)
• ✅ Samsung Internet
• ✅ Firefox (Android)

Customization

Change App Name:

Edit manifest.json:

{
  "name": "Your App Name",
  "short_name": "ShortName"
}

Change Colors:

Edit manifest.json:

{
  "theme_color": "#667eea",
  "background_color": "#667eea"
}

Update Icons:

Replace the icon files in public/ folder

Deployment

For Production:

1. Build your app: npm run build
2. Serve with HTTPS (required for PWA)
3. Icons and manifest will be included automatically

HTTPS Requirement:

PWAs require HTTPS (except localhost). Use:

• Vercel
• Netlify
• GitHub Pages
• Any hosting with SSL certificate

Troubleshooting

Install prompt not showing?

• Clear browser cache
• Remove: localStorage.removeItem('installPromptDismissed')
• Make sure you're on HTTPS (or localhost)
• Some browsers show it after 2-3 visits

Icons not appearing?

• Check file names match exactly: icon-192x192.png
• Verify they're in public/ folder
• Clear cache and rebuild

Service worker not registering?

• Check browser console for errors
• Make sure service-worker.js is in public/ folder
• Try hard refresh (Ctrl+Shift+R)

Next Steps

1. Generate/add your app icons
2. Test on a real mobile device
3. Deploy to a hosting service with HTTPS
4. Share the link with users!

Users will now see an install banner and can add your app to their home screen! 🎉