I'll create a comprehensive PWA install prompt UX that provides a smooth user experience across different platforms and browsers.
I've created a comprehensive PWA install prompt UX with two different approaches:
Key Features:
1. Smart Detection
- Detects different platforms (iOS, Android, Desktop)
- Identifies if the app is already installed
- Handles the
beforeinstallpromptevent for supported browsers
2. Two Install Prompt Styles
PWAInstallPrompt - A card-based prompt that appears in the bottom corner:
- Platform-specific icons and instructions
- Special iOS instructions with visual cues
- Dismissible with "Not Now" and permanent dismiss options
- Smooth animations
InstallBanner - A top banner for more prominent display:
- Gradient background for visual appeal
- Compact design that doesn't interfere with content
- Quick install and dismiss actions
3. Platform-Specific UX
- iOS Safari: Shows manual instructions with share button and "Add to Home Screen" steps1
- Chrome/Edge: Uses native install prompt with custom trigger
- Other browsers: Graceful fallback with manual instructions
4. User Experience Considerations
- Respects user choice with localStorage persistence
- Delayed appearance to avoid interrupting initial page load
- "Not Now" option that re-prompts after 24 hours
- Permanent dismiss option for users who don't want the app
5. Responsive Design
- Works on mobile and desktop
- Proper sizing and positioning
- Accessible with proper ARIA labels
The components automatically handle cross-platform compatibility and provide a smooth installation experience that follows PWA best practices1. Users will see appropriate prompts based on their device and browser capabilities.
Based on the Haustidy e-commerce site, I'd recommend a subtle, contextual approach that doesn't interfere with the shopping experience. Here's my suggested UX strategy:
My UX Recommendations for Haustidy:
1. Primary Strategy: Contextual Bottom Sheet
- When: After user shows engagement (scrolled + clicked)
- Where: Bottom-right corner on mobile, doesn't block content
- Why: Non-intrusive, appears when user is already engaged
2. Subtle Header Integration
- When: Available immediately but hidden on mobile
- Where: Next to account/cart icons in header
- Why: Always accessible but doesn't compete with main actions
3. Cart-Triggered Prompt
- When: User adds items to cart (shows purchase intent)
- Where: Top banner, contextually relevant
- Why: Perfect timing - user is invested in shopping
Key UX Principles for E-commerce:
- Timing is Everything: Wait for engagement signals before showing prompts
- Value Proposition: Focus on shopping benefits (faster checkout, notifications)
- Non-Intrusive: Never block the shopping flow or product discovery
- Contextual: Show prompts when they make sense (cart items, return visits)
- Respectful: Easy dismiss options and reasonable re-prompt timing
The design matches Haustidy's clean aesthetic while providing clear value propositions specific to e-commerce users.