Mobile App Guide

Mobile PWA (Progressive Web App)

Installation: Add to Home Screen
Platforms: iOS, Android, Desktop
Access Level: All D4D Users

Overview

The D4D system is built as a Progressive Web App (PWA) - giving you a native app experience without the App Store. Install D4D on your home screen for instant access, offline capability, and app-like performance.

What is a PWA?

Progressive Web App Benefits

App-Like Experience:

  • 📱 Installs on home screen
  • 🚀 Launches like native app
  • 🎨 Full-screen interface
  • 🔔 Push notifications
  • 📡 Works offline
  • ⚡ Fast loading

Better than Native Apps:

  • ✅ No App Store approval delays
  • ✅ Instant updates (no download)
  • ✅ Smaller file size
  • ✅ Works on all platforms
  • ✅ No separate iOS/Android versions
  • ✅ Always latest version

Better than Mobile Web:

  • ✅ No browser UI (more screen space)
  • ✅ Home screen icon
  • ✅ Faster performance
  • ✅ Better offline support
  • ✅ Native features (camera, GPS)
  • ✅ Push notifications

Installing D4D PWA

iPhone/iPad Installation

Step-by-Step:

  1. Open Safari browser

    • Must use Safari (not Chrome)
    • Navigate to D4D URL

  2. Tap Share button

    • Icon: Square with arrow up
    • Located at bottom (iPhone) or top (iPad)

  3. Scroll and tap "Add to Home Screen"

    • In the share menu options
    • May need to scroll right

  4. Customize (optional)

    • Edit name (default: "D4D")
    • See preview of icon
    • Tap "Add" in top right

  5. Launch from Home Screen

    • New icon appears on home screen
    • Tap to launch
    • Opens full-screen, no browser

iOS Tips:

  • Works on iOS 11.3+
  • iPad works same way
  • Can organize in folders like apps
  • Long-press icon for quick actions

Android Installation

Method 1: Chrome Install Prompt

  1. Open Chrome browser

    • Navigate to D4D URL
    • Wait 3-5 seconds

  2. Tap "Install" banner

    • Appears at bottom of screen
    • Or prompt popup

  3. Tap "Install" in dialog

    • Confirms installation
    • Downloads PWA resources

  4. Launch from Home Screen

    • Icon added automatically
    • Opens full-screen app

Method 2: Manual Installation

  1. Open Chrome browser

    • Navigate to D4D URL

  2. Tap menu (⋮) top right

    • Three vertical dots

  3. Tap "Add to Home screen"

    • Or "Install app"

  4. Tap "Add" to confirm

    • Customize name if desired

  5. Launch from Home Screen

Android Tips:

  • Works on Chrome, Edge, Samsung Internet
  • Android 5.0+ supported
  • Also appears in app drawer
  • Can pin to taskbar (Android 10+)

Desktop Installation

Chrome/Edge (Windows, Mac, Linux):

  1. Open browser

    • Navigate to D4D URL

  2. Click install icon

    • Location: Address bar (right side)
    • Icon: Computer with down arrow
    • Or prompt at top

  3. Click "Install"

    • Confirmation dialog appears
    • Downloads resources

  4. Launch like desktop app

    • Desktop shortcut created
    • Or from Start Menu (Windows)
    • Or from Applications (Mac)

Desktop Benefits:

  • Separate window (not browser tab)
  • Windows taskbar/Mac dock
  • Keyboard shortcuts
  • Better multitasking

PWA Features

Full-Screen Experience

No Browser UI:

  • No address bar
  • No browser buttons
  • More screen space for content
  • Immersive experience

Custom Interface:

  • D4D navigation always visible
  • Optimized for touch/click
  • Platform-specific design
  • Native feel

Offline Functionality

Works Without Internet:

  • View cached leads
  • Capture new leads
  • Follow downloaded routes
  • Access offline maps
  • All data syncs when reconnected

See Offline Mode Guide for details.

Push Notifications

Get Alerts For:

  • New team leads
  • Route reminders
  • Follow-up notifications
  • Achievement unlocks
  • Gamification updates
  • System announcements

Notification Settings:

  • Settings → Notifications
  • Choose which alerts to receive
  • Quiet hours
  • Do Not Disturb mode

Native Features Access

Device Capabilities:

  • 📷 Camera (photos/video)
  • 📍 GPS location
  • 🎤 Microphone (voice notes)
  • 📂 File system
  • 📞 Phone dialer
  • 📧 Email client
  • 🗓️ Calendar
  • 💾 Local storage

Automatic Updates

Always Current:

  • Updates download in background
  • Automatically installs
  • No manual update needed
  • Refresh page if prompt appears
  • Never outdated

Using the PWA

Launching the App

From Home Screen:

  • iOS: Tap icon (like any app)
  • Android: Tap icon or from app drawer
  • Desktop: Desktop shortcut or Start Menu

App Behavior:

  • Opens in full-screen
  • Remembers login state
  • Restores last page
  • Offline-ready immediately

Switching Between Devices

Seamless Sync:

  • Login on any device
  • Data syncs automatically
  • Shared leads/routes
  • Consistent experience
  • Real-time updates

Best Practices:

  • Install on all devices you use
  • Sync before offline work
  • Log out on shared devices

Multitasking

iOS:

  • Double-click home to switch apps
  • Swipe up to app switcher (newer iPhones)
  • D4D appears like native app

Android:

  • Recent apps button
  • Gesture navigation
  • Split-screen supported

Desktop:

  • Alt+Tab / Cmd+Tab to switch
  • Taskbar/Dock for quick access
  • Multiple windows if needed

PWA Settings & Management

iOS Management

View Installed PWAs:

  • Settings → Safari → Advanced
  • Or check home screen

Remove PWA:

  • Long-press icon on home screen
  • Tap "Remove App"
  • Or "Delete App"
  • Doesn't affect account/data

Storage Management:

  • Settings → General → iPhone Storage
  • Find D4D
  • View storage used
  • Offload or Delete if needed

Android Management

View Installed PWAs:

  • Settings → Apps
  • D4D listed with other apps

Remove PWA:

  • Long-press icon
  • Drag to "Uninstall"
  • Or Settings → Apps → D4D → Uninstall

Storage & Permissions:

  • Settings → Apps → D4D
  • View/manage:
    • Storage used
    • Permissions (camera, location, etc.)
    • Notifications
    • Battery usage

Desktop Management

Chrome Apps:

  • chrome://apps/
  • Right-click D4D → Manage
  • Or Settings → Apps → Manage apps

Remove PWA:

  • Right-click icon → Uninstall
  • Or through browser settings

Storage:

  • chrome://settings/content/all
  • Find D4D domain
  • View/clear storage

Troubleshooting

Install Prompt Not Appearing

iOS (Safari):

  • Issue: Share → "Add to Home Screen" missing
  • Fix:
    • Must use Safari (not Chrome/Firefox)
    • iOS 11.3+ required
    • Private browsing disables PWA
    • Try regular browsing mode

Android (Chrome):

  • Issue: Install banner doesn't show
  • Fix:
    • Wait 3-5 seconds on page
    • Scroll a bit to trigger
    • Use manual method (menu → Add to Home)
    • Clear browser data and retry

Desktop:

  • Issue: Install icon not in address bar
  • Fix:
    • Refresh page
    • Check browser version (update if old)
    • Look for notification bar at top
    • Try incognito/private mode first

PWA Won't Launch

Symptoms: Tapping icon does nothing or crashes

Solutions:

  1. Restart device

    • Simple but often works
    • Clears temporary issues

  2. Reinstall PWA

    • Delete from home screen
    • Clear browser cache
    • Reinstall fresh

  3. Check storage

    • Device may be full
    • Free up space (1-2 GB)
    • Try again

  4. Update OS

    • Old OS may have bugs
    • Update to latest version

Offline Mode Not Working

Symptoms: PWA requires internet, won't work offline

Solutions:

  1. Content not downloaded

  2. Storage cleared

    • Device may have auto-cleared
    • Re-download offline content
    • Check storage settings

  3. First time launch

    • Must be online first time
    • Initial resources download
    • After that, works offline

Notifications Not Working

iOS:

  • Issue: Not receiving notifications
  • Fix:
    • Settings → D4D → Notifications → Allow
    • Must enable in app AND iOS settings
    • Check Do Not Disturb mode off

Android:

  • Issue: No notifications
  • Fix:
    • Settings → Apps → D4D → Notifications → On
    • Check notification channels enabled
    • Battery saver may block

Camera/GPS Not Working

Symptoms: Can't take photos or get location

Solutions:

  1. Check permissions

    • iOS: Settings → D4D → Allow Camera/Location
    • Android: Settings → Apps → D4D → Permissions

  2. Grant when prompted

    • Must allow when first asked
    • If denied, revoke and try again

  3. Location services

    • Must be enabled at device level
    • Settings → Privacy → Location Services → On

PWA vs Native App

Why PWA Instead of Native?

Development:

  • One codebase for all platforms
  • Faster feature releases
  • Instant bug fixes
  • No app store approval delays

User Benefits:

  • Always latest version
  • Smaller install size
  • No updates to download
  • Works everywhere (phone, tablet, desktop)

Performance:

  • Modern PWAs as fast as native
  • Efficient caching
  • Background sync
  • Native-like animations

PWA Limitations

Current Limitations:

  • iOS: Some background features limited
  • No access to some hardware APIs
  • Can't list in App Store (by design)
  • Less discovery (no app store search)

D4D Workarounds:

  • Critical features all work
  • Graceful fallbacks for unsupported features
  • Progressive enhancement approach
  • Clear documentation (this guide!)

Best Practices

🎯 Installation Tips

  1. Install on primary device first

    • Your main phone/tablet
    • Test features
    • Get comfortable

  2. Install on all devices

    • Desktop for planning
    • Tablet for passenger seat
    • Phone for quick capture

  3. Bookmark before installing

    • Easier to find later
    • Share URL with team
    • Fallback if PWA issues

  4. Test offline immediately

    • Download test route
    • Go offline (airplane mode)
    • Verify everything works
    • Confidence for field use

📱 Daily Usage Tips

  1. Launch from home screen

    • Not from browser
    • Better experience
    • Proper offline support

  2. Keep logged in

    • Saves time
    • Better performance
    • Auto-sync works

  3. Background operation

    • Don't force close
    • Let it run in background
    • Syncs automatically
    • Notifications work

  4. Regular sync

    • Open app daily
    • Let sync complete
    • Keeps data current
    • Prevents conflicts

🔧 Maintenance Tips

  1. Monitor storage

    • Check weekly
    • Clear old content
    • Keep 1-2 GB free
    • Better performance

  2. Update when prompted

    • "New version available" → Refresh
    • Takes 2 seconds
    • Gets latest features
    • Fixes bugs

  3. Report issues

    • Use in-app feedback
    • Describe device/OS
    • Include screenshots
    • Helps improve for everyone

Advanced Features

Add Multiple Accounts

Use Cases:

  • Personal + team account
  • Multiple teams
  • Test account
  • Backup account

How:

  • Install PWA
  • Log out
  • "Add to Home Screen" again (shows as D4D (2))
  • Log in with different account
  • Each has separate icon

Custom Domain

If organization uses custom domain:

  • Install from your company URL
  • Same PWA, branded
  • Custom icon/name
  • All features identical

Manifest Customization

Admin/Developer:

  • manifest.json controls PWA
  • Customize icon, name, colors
  • Theme color for status bar
  • Display mode options

Platform-Specific Tips

iOS Specific

Strengths:

  • Great camera integration
  • Smooth animations
  • Excellent Safari PWA support

Limitations:

  • Must use Safari to install
  • Some background limits
  • Max 50 MB initial cache

Tips:

  • Add to home screen from Safari only
  • Grant all permissions when asked
  • Keep app running in background
  • Use Low Power Mode wisely (can affect sync)

Android Specific

Strengths:

  • Better background sync
  • More notification options
  • Flexible permissions
  • Chrome PWA support excellent

Limitations:

  • Varies by manufacturer
  • Battery optimization can interfere

Tips:

  • Disable battery optimization for D4D
  • Allow all permissions
  • Use Chrome for best experience
  • Check notification channels enabled

Desktop Specific

Strengths:

  • Large screen for planning
  • Keyboard shortcuts
  • Multi-window support
  • Fast typing

Best For:

  • Route planning
  • Lead research
  • Bulk operations
  • Analytics review
  • Training/onboarding

Tips:

  • Install as desktop app
  • Pin to taskbar/dock
  • Use keyboard shortcuts
  • Second monitor for map + list

Integration with Other Features

Offline Mode

  • PWA required for full offline support
  • Service worker handles caching
  • Background sync when reconnected

Push Notifications

  • PWA enables notifications
  • Real-time team updates
  • Route reminders
  • Achievement notifications

Native Features

  • Camera for photos
  • GPS for location
  • Phone dialer for calls
  • Share sheet for sharing

Tips & Tricks

🎯 Efficiency Tips

  1. Quick launch - Swipe to D4D icon position
  2. Voice shortcuts - "Hey Siri/Google, open D4D"
  3. Widget - Add D4D widget to home screen (if available)
  4. Shortcuts - iOS Shortcuts app automation

📱 Mobile Tips

  1. Landscape mode - Better for driving passenger
  2. Do Not Disturb - Focus while driving
  3. Car integration - Android Auto / CarPlay (future)
  4. Battery saver - When low battery, still works

🖥️ Desktop Tips

  1. Keyboard shortcuts - Faster navigation
  2. Multiple windows - Map + list side-by-side
  3. Copy/paste - Easier on desktop
  4. Bulk operations - More efficient with mouse

Related Guides

← Back to Offline Mode | Next: FAQ →

Was this guide helpful?

New to the strategy behind the product? Read the complete driving for dollars guide on drivingfordollars.pro.