Offline Mode
The Bemba application supports an offline mode allowing you to continue working without an internet connection, then synchronize data once the connection is restored.
Overview
┌─────────────────────────────────────────────────────────────────────────┐
│ OFFLINE MODE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ ONLINE │ --> │ OFFLINE │ --> │SYNCHRONIZATION│ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ Real-time Actions in Upload │
│ data queue modifications │
│ │
└─────────────────────────────────────────────────────────────────────────┘
How It Works
Connection Detection
The application automatically detects:
| State | Description | Indicator |
|---|---|---|
| Online | Active server connection | Green |
| Offline | No connection | Red |
| Slow connection | 2G or unstable network | Orange |
An indicator displays in the status bar:
┌─────────────────────────────────────────┐
│ 🟢 Online │ 🔴 Offline │
│ or │ Offline mode │
│ 🟠 Slow │ 5 modifications │
│ connection │ pending │
└─────────────────────────────────────────┘
Caching
The following data is automatically cached:
| Data | Duration | Refresh |
|---|---|---|
| Lists (households, beneficiaries) | 24h | Automatic |
| Viewed details | 1h | On demand |
| Geographic data | 7 days | Rare |
| Configuration | 24h | Automatic |
Queue
Offline modifications are stored locally:
- Storage: IndexedDB in browser
- Order: Modifications are timestamped
- Priority: Processed in order of recording
- Persistence: Kept even if browser is closed
Usage
Switching to Offline Mode
Offline mode activates automatically when:
- Internet connection is lost
- Server is unreachable
- Network is too slow
You can also force offline mode:
- Click the connection indicator
- Select Work offline
Available Actions Offline
| Action | Available | Notes |
|---|---|---|
| View lists | ✓ | Cached data |
| View details | ✓ | If previously viewed |
| Create a household | ✓ | Queued |
| Edit a household | ✓ | Queued |
| Create a complaint | ✓ | Queued |
| Add comment | ✓ | Queued |
| Advanced search | ✗ | Requires server |
| Excel export | ✗ | Requires server |
| Document upload | ✗ | Requires server |
Visual Indicators
In offline mode, you'll see:
- Red badge: Offline indicator
- Counter: Number of pending modifications
- Clock icon: On items awaiting sync
- Banner: Warning message at page top
Synchronization
Automatic Synchronization
When connection returns:
- Application detects reconnection
- Synchronization starts automatically
- Modifications are sent one by one
- Conflicts are flagged
Manual Synchronization
To force synchronization:
- Click the connection indicator
- Select Sync now
- Follow the progress
Progress
┌─────────────────────────────────────────────────────────────────┐
│ SYNCHRONIZATION IN PROGRESS │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ████████████████████░░░░░░░░░░ 60% │
│ │
│ ✓ Household MEN-2026-001 synchronized │
│ ✓ Household MEN-2026-002 synchronized │
│ ⟳ Complaint PLT-2026-003 in progress... │
│ ○ Comment pending │
│ ○ Household MEN-2026-004 pending │
│ │
│ 3/5 items synchronized │
│ │
└─────────────────────────────────────────────────────────────────┘
Conflict Management
A conflict occurs when:
- The same data was modified online and offline
- Data was deleted online
┌─────────────────────────────────────────────────────────────────┐
│ CONFLICT DETECTED │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Household MEN-2026-001 was modified on the server while you │
│ were offline. │
│ │
│ Your modifications: Server: │
│ - Name: Diallo Mamadou - Name: Diallo M. │
│ - Tel: +245955123456 - Tel: +245955999999 │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Keep my changes │ │ Use server data │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Resolution options:
| Option | Description |
|---|---|
| Keep my changes | Your changes overwrite the server |
| Use server data | Server data is kept |
| Merge | Choose field by field (if available) |
Local Storage
IndexedDB
Data is stored in IndexedDB:
| Store | Content |
|---|---|
sync_queue | Pending modifications |
cached_data | Viewed data |
sync_meta | Sync metadata |
Capacity
| Browser | Typical Limit |
|---|---|
| Chrome | Up to 80% of disk |
| Firefox | Up to 2 GB |
| Safari | 50-100 MB |
| Edge | Up to 80% of disk |
Cleanup
To free up space:
- Open application Settings
- Section Local storage
- Click Clear cache
Attention
Clearing the cache deletes unsynchronized data! Sync first.
Best Practices
Before Going Offline
- Synchronize: Make sure you have the latest data
- Browse: Open the forms you'll need
- Verify: Check that no modifications are pending
During Offline Mode
- Limit modifications: Avoid large volumes
- Note potential conflicts: Avoid editing shared data
- Check storage: Monitor available space
When Back Online
- Sync immediately: Don't delay
- Check conflicts: Resolve them quickly
- Confirm: Verify everything is synchronized
Limitations
Not Available Offline
- Global search
- Report export
- File upload
- Payment cycle creation
- Document validation
- Real-time notifications
Technical Limits
- Max size: ~50 MB of cached data
- Max duration: 7 days without synchronization
- Modifications: 100 items max in queue
Troubleshooting
Synchronization Fails
- Check your internet connection
- Try refreshing the page
- Clear cache and retry
- Contact support if problem persists
Missing Data in Offline Mode
- Data must have been viewed at least once
- Open needed forms before going offline
- Use "Download for offline" function if available
Browser Shows "Insufficient Storage"
- Clear cache from other sites
- Delete old application data
- Use a browser with more capacity
Compatibility
| Browser | Support |
|---|---|
| Chrome 90+ | ✓ Full |
| Firefox 85+ | ✓ Full |
| Safari 15+ | ✓ Limited |
| Edge 90+ | ✓ Full |
| Mobile Chrome | ✓ Full |
| Mobile Safari | ✓ Limited |
Progressive Web App
The application can be installed as a PWA for a better offline experience. See the PWA installation guide.