Adding offline support to workflow's apps

[karntrehan]

We should leverage service workers to:

Milestone 1 - Cache React Layers

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

Milestone 2 - Render enketo offline

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

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

• [x] Project Setup of Family ID (1h)
• [x] Use a service worker library like Workbox or Next PWA to simplify the setup. (4h)
• [x] Cache important assets and data for offline access. (2h)
• [x] Implement data synchronization between the client and server when the app is online after one time login. (1d)
  • [x] Store data locally using browser storage mechanisms like IndexedDB or localStorage.
• [x] Web app manifest file (manifest.json) that defines the PWA's metadata. (30m)
  • [x] Include properties like the app name, icons, background color, and display mode.
• [x] Submitting of offline feedback (4h-8h)
• [x] Optimize the app's performance using techniques like code splitting, lazy loading, and image optimization. (1d)
• [x] 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

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

[abhay-samagra]

@karntrehan - Could we prioritize this ticket in the remaining part of the sprint? I can help in deprioritising other stuff in lieu of this ticket.

[Shruti3004]

Pre-requisites:

• [ ] Setup of enketo repository and ratings application on the local machine of everyone in the team.
• [ ] Detailed Code KT

Action Items for week (May 29 - June 2)

• [x] Cache static react screens
• [x] Cache API responses rendering screens
• [x] Storing offline entered data into index DB
• [x] 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.
• [x] Offline location handling

[Shurtu-gal]

@karntrehan @amit-s19 @Shruti3004 I would love to work upon this. Can you guide me a little?

[Shruti3004]

{
    "summary": {}, 
    "benefits": {}
}

OR

[
   { "name": "Summary", "endpoint": "", "data": ""}
   { "name": "Benefits", "endpoint": "", "data": ""}
   { "name": "Transaction", "endpoint": "", "data": ""}
]

[amit-s19]

Issues creted in Enketo Express for contributing

https://github.com/enketo/enketo/issues/940 https://github.com/enketo/enketo/issues/939 https://github.com/enketo/enketo/issues/938 https://github.com/enketo/enketo/issues/937 https://github.com/enketo/enketo/issues/936