Mobile App Features
Progressive web app capabilities for an app-like experience
Mobile App Features
The website works like a native app on your phone with install-to-home-screen, offline support, and push notifications.
Progressive Web App (PWA)
What Is a PWA?
A Progressive Web App:
- Works in your browser but feels like an app
- Can be "installed" to your home screen
- Works offline (limited functionality)
- Loads fast after first visit
- Supports push notifications
Benefits
- Instant access from home screen
- No app store download required
- Faster than opening browser
- Push notifications for order updates
- Works on all devices
Installing to Home Screen
On iPhone (Safari)
Step 1: Open the restaurant website in Safari
Step 2: Tap the Share button (square with arrow)
Step 3: Scroll down and tap Add to Home Screen
Step 4: Edit the name if desired
Step 5: Tap Add
Step 6: App icon appears on your home screen
On Android (Chrome)
Step 1: Open the restaurant website in Chrome
Step 2: Tap the menu button (three dots)
Step 3: Tap Add to Home Screen or Install App
Step 4: Confirm installation
Step 5: App icon appears on your home screen
Install Prompt
- Browser may automatically prompt to install
- "Add to Home Screen" banner appears
- Tap to install or dismiss
App-Like Experience
Full Screen Mode
When opened from home screen:
- No browser address bar
- Full screen interface
- Restaurant brand colors
- Feels like native app
Fast Loading
After first visit:
- Assets cached locally
- Pages load instantly
- Works on slow connections
- Smooth navigation
Offline Support
Without internet connection:
- Menu viewable (if cached)
- Previous orders visible
- Cart preserved
- Orders queue until online
Limitations
- Can't place new orders offline
- Real-time updates unavailable
- Some features require connection
Push Notifications
What You'll Receive
- Order confirmation
- "Order is being prepared"
- "Order is ready for pickup"
- "Order out for delivery"
- "Order delivered"
Enabling Notifications
Step 1: Browser asks for permission on first visit
Step 2: Tap Allow to enable notifications
Step 3: Notifications now active
Step 4: Manage in phone settings anytime
Notification Settings
Control what you receive:
- Order updates (recommended)
- Marketing messages (optional)
- Promotional offers (optional)
Mobile-Optimized Design
Touch Interface
- Large tap targets for easy interaction
- Swipe gestures supported
- Pull down to refresh
- Smooth scrolling
Responsive Layout
- Adapts to all screen sizes
- Portrait and landscape support
- Readable text on any device
- Images scale properly
Mobile Navigation
- Hamburger menu for easy access
- Bottom cart button always visible
- Sticky header for navigation
- Simplified checkout flow
Performance Features
Speed Optimizations
- Compressed images
- Lazy loading (images load as needed)
- Efficient code
- CDN delivery
Data Efficiency
- Minimal data usage
- Smart caching
- Only loads what's needed
- Battery efficient
Troubleshooting
Can't Install PWA
| Cause | Solution |
|---|---|
| Already installed | Check home screen |
| Wrong browser | Use Safari (iOS) or Chrome (Android) |
| Private browsing | Exit incognito mode |
| Old device | May not support PWA features |
Notifications Not Working
| Cause | Solution |
|---|---|
| Permission denied | Enable in device settings |
| Do Not Disturb | Check phone notification settings |
| PWA not installed | Install for better notification support |
Slow Performance
| Cause | Solution |
|---|---|
| Old cache | Clear browser data |
| Storage full | Free up device space |
| Weak connection | Find better signal |
Offline Not Working
| Cause | Solution |
|---|---|
| Never visited online | Need online visit first to cache |
| Cache cleared | Revisit while online |
| Not using PWA | Open from home screen icon |
App Icon Missing
| Cause | Solution |
|---|---|
| Not installed | Follow install steps above |
| Hidden | Search in app drawer |
| Moved | Check all home screen pages |