Mobile & PWA Features
Progressive web app capabilities for app-like ordering experience
Mobile & PWA Features
The QR ordering app works like a native app on your phone with fast loading, push notifications, and offline support.
Progressive Web App (PWA)
What Is a PWA?
A Progressive Web App:
- Works in your browser
- Feels like a native app
- No app store download needed
- Loads instantly
- Works offline (limited)
Benefits
- Fast, responsive experience
- No storage taken up on device
- Always up-to-date
- Push notifications
- Works on all devices
Installing to Home Screen
On iPhone (Safari)
Step 1: Open the QR ordering page in Safari
Step 2: Tap the Share button (square with arrow)
Step 3: Scroll and tap Add to Home Screen
Step 4: Name it and tap Add
Step 5: Icon appears on home screen
On Android (Chrome)
Step 1: Open the QR ordering page in Chrome
Step 2: Tap menu (three dots)
Step 3: Tap Add to Home Screen or Install App
Step 4: Confirm installation
Step 5: Icon appears on home screen
App-Like Experience
Full Screen Mode
When opened from home screen:
- No browser address bar
- Full screen interface
- Restaurant branding
- Feels like native app
Fast Loading
- Pages load instantly
- Cached after first visit
- Works on slow connections
- Smooth animations
Offline Support
Without internet:
- Menu viewable (if cached)
- Cart preserved
- Limited functionality
- Orders queue until online
Online Required For
- Placing new orders
- Processing payments
- Real-time updates
- Call waiter feature
Push Notifications
What You Receive
- Order confirmation
- "Being prepared" updates
- "Ready for pickup"
- Order delivered
Enabling Notifications
Step 1: Browser prompts for permission
Step 2: Tap Allow
Step 3: Notifications enabled
Step 4: Manage in phone settings
Managing Notifications
- Toggle in device settings
- Per-app controls
- Disable marketing if wanted
Mobile-Optimized Design
Touch Interface
- Large tap targets
- Easy scrolling
- Swipe gestures
- Pull to refresh
Responsive Layout
- Adapts to screen size
- Portrait and landscape
- Works on all phones
- Tablet optimized too
Mobile Navigation
- Bottom tab bar for dine-in
- Floating cart button
- Easy back navigation
- Clear action buttons
Performance
Speed Optimizations
- Compressed images
- Lazy loading
- Minimal data usage
- Efficient code
Battery Efficient
- Optimized for mobile
- No background drain
- Socket connections managed
- Low power impact
Camera Integration
QR Scanning
- Built-in scanner option
- Uses phone camera
- Quick code detection
- Auto-redirects to menu
Location Services
If permitted:
- Auto-detect nearest restaurant
- Suggest delivery address
- Calculate delivery zones
Sharing
Share from the app:
- Restaurant link
- Specific menu items
- Share with friends
Troubleshooting
PWA Not Installing
| Cause | Solution |
|---|---|
| Already installed | Check home screen |
| Wrong browser | Use Safari (iOS) or Chrome (Android) |
| Private browsing | Exit incognito mode |
Notifications Not Working
| Cause | Solution |
|---|---|
| Not permitted | Enable in device settings |
| Do Not Disturb | Check phone settings |
| Not installed | Install for better support |
Offline Not Working
| Cause | Solution |
|---|---|
| Never visited online | Need initial online visit |
| Cache cleared | Revisit while online |
| Too long offline | Re-scan QR when online |
Slow Performance
| Cause | Solution |
|---|---|
| Old cache | Clear browser data |
| Storage full | Free up device space |
| Weak connection | Find better signal |
Camera Not Working for QR
| Cause | Solution |
|---|---|
| Permission denied | Enable camera in settings |
| No HTTPS | Must be secure connection |
| Browser incompatible | Try Safari or Chrome |