Skip to content

Adding offline support to workflow's apps #37

@karntrehan

Description

@karntrehan

We should leverage service workers to:

Milestone 1 - Cache React Layers

  • Cache static react screens
  • Cache API responses rendering screens
  • Storing offline entered data into index DB
  • Syncing offline entered data when user online on subsequent app launch
  • Force updating the react app when a new release is made - Using service workers.
  • Keep elements online dependent - eg: Login
  • Offline location handling
  • Add installable option for PWA
  • Documentation

Milestone 2 - Render enketo offline

  • Cache the enketo form when opened for the first time in online mode.
  • Cache and prefill form - Text
  • Cache and prefill form - Image - Send to minio? Save in local?
  • Cache submission
  • Sync response to remote when user online
  • Clear prefilled form on custom logic
  • Display messages when user offline / online - When offline show dialog - "Queued response"
  • Offline location handling
  • Explore background submission (Naively implemented for now)
  • Rendering of form without iframe
  • Documentation

Milestone 3 - Offline Support next.js frontend screens - FamilyId

  • Project Setup of Family ID (1h)
  • Use a service worker library like Workbox or Next PWA to simplify the setup. (4h)
  • Cache important assets and data for offline access. (2h)
  • Implement data synchronization between the client and server when the app is online after one time login. (1d)
    • Store data locally using browser storage mechanisms like IndexedDB or localStorage.
  • Web app manifest file (manifest.json) that defines the PWA's metadata. (30m)
    • Include properties like the app name, icons, background color, and display mode.
  • Submitting of offline feedback (4h-8h)
  • Optimize the app's performance using techniques like code splitting, lazy loading, and image optimization. (1d)
  • Documentation (4+8h)
  • Integrate push notification functionality using the Push API and a push service like Firebase Cloud Messaging (FCM). - P2

Milestone 4 - Documenting & contributing

  • Contributing back to enketo - Open issue, Discuss approach & on agreement Plan a PR back:
    • Submitting to custom backend - #572
    • Image handling - #573
    • Event callbacks from enketo input -#574
    • Config for UI and icons - #575
  • Discuss to enketo - Open issue and discuss approach only:
    • Background submissions - #576
    • [Abandoned] Enketo queue UI Handling of offline resubmission.
    • Icon on offline form - #575
  • Documentation improvements
    • Define a lens - For external contributors or internal samagra folks.
    • Make it generic and take inspiration from nextjs, reactjs docs.
    • Quick setup instructions (video optionally)
  • Offline Sync Handler
    • Improve documentation
    • Retry handling
    • Success callbacks
    • Chaining calls
    • Unit Tests suite - Retry, different input types, different methods, all functionalities.
    • [Abandoned] Optionally create a PWA out of the box

Milestone 5 - Download enketo offline upfront - Community driven

  • Download offline forms in ghost component on app launch ( Current Approach )
  • Forms should be loaded in parallel
  • Config based form downloading
  • Config based UI rendering

Metadata

Metadata

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions