Skip to content

windows_setup_guide.md

Latest commit

 

History

History
133 lines (106 loc) · 4.26 KB

windows_setup_guide.md

File metadata and controls

133 lines (106 loc) · 4.26 KB

Windows PWA Installation Guide

🪟 Windows-Specific Features Added

Your PWA is now optimized for Windows installation with these enhancements:

Windows Integration Features

  • Window Controls Overlay: Custom title bar for native Windows look
  • Edge Side Panel: Optimized for Microsoft Edge side panel
  • Launch Handler: Prevents multiple instances
  • Windows 11 Design: Follows Microsoft Fluent Design principles
  • Desktop Shortcuts: Creates shortcuts in Start Menu and Desktop

🚀 Installation Methods

Method 1: Microsoft Edge (Recommended)

  1. Open your PWA in Microsoft Edge
  2. Click the "Install" button in the address bar
  3. Or go to Settings menu (⋯) → Apps → Install this site as an app
  4. The app will be installed with Windows integration

Method 2: Google Chrome

  1. Open your PWA in Google Chrome
  2. Click the "Install" button in the address bar
  3. Or go to Settings menu (⋮) → More tools → Create shortcut
  4. Check "Open as window" for app-like experience

Method 3: Microsoft Store (Advanced)

For distribution through Microsoft Store, you'll need:

🛠️ Development & Testing

Local Development

# Serve with HTTPS (required for PWA features)
npx serve --ssl-cert
# or
python -m http.server 8000 --bind 127.0.0.1

Testing Windows Features

  1. Edge DevTools: F12 → Application → Manifest
  2. Installation: Look for install button in address bar
  3. Window Controls: Test custom title bar in installed app
  4. Offline Mode: Network tab → Offline checkbox

📱 Windows-Specific Optimizations

Manifest Enhancements

  • display_override: Enables window controls overlay
  • edge_side_panel: Optimized width for Edge side panel
  • launch_handler: Prevents multiple app instances
  • orientation: "any": Works in any orientation on desktop

CSS Improvements

  • Segoe UI font: Native Windows font
  • Titlebar support: Custom draggable title bar
  • Windows 11 dark mode: Respects system theme
  • Desktop responsive: Larger screens optimization

Icon Requirements for Windows

Required sizes:
- 192x192px (minimum)
- 310x310px (recommended)
- 44x44px (taskbar, optional)
- 150x150px (Start menu, optional)

🎯 Windows Integration Benefits

When installed on Windows, your PWA will:

✅ Appear in Start Menu with your app icon
✅ Create Desktop shortcut (optional)
✅ Run in dedicated window (not browser tab)
✅ Show in taskbar as separate app
✅ Support Windows notifications with action center
✅ Work offline with full functionality
✅ Auto-update when you update the web version
✅ Integrate with Windows 11 design language

🔧 Production Deployment

HTTPS Requirement

Deploy to any HTTPS-enabled host:

  • GitHub Pages: Free, easy setup
  • Netlify: Automatic deployments
  • Vercel: Instant deployments
  • Azure Static Web Apps: Microsoft integration

Domain Considerations

  • Use your own domain for professional appearance
  • Ensure HTTPS certificate is valid
  • Consider using a subdomain like app.yourdomain.com

Performance Tips

  • Keep total bundle size under 2MB
  • Optimize images (use WebP format)
  • Minimize JavaScript and CSS
  • Use service worker caching effectively

📊 Testing Checklist

Before deploying:

  • PWA installs successfully in Edge
  • PWA installs successfully in Chrome
  • App works offline completely
  • Custom title bar displays correctly
  • Icons appear in Start Menu
  • Notifications work properly
  • App launches in dedicated window
  • Responsive design works on desktop
  • Lighthouse PWA score is 100%

🎨 Customization Tips

Windows 11 Styling

  • Use Microsoft Fluent Design principles
  • Implement acrylic/glass effects
  • Support light/dark theme switching
  • Use Windows 11 color palette

Enhanced Features

  • Add keyboard shortcuts (Ctrl+N, Ctrl+S, etc.)
  • Implement file handling for specific file types
  • Add Windows-specific context menus
  • Support Windows drag-and-drop

Your PWA is now ready for Windows installation with native app-like experience! 🚀