We live in connected world -- till the internet connections can be flakey and non-existent. That should not disturb the user experience. "No internet connection" is a network problem and not the application problem.
With Bahmni (http://www.bahmni.org/) an easy to use open source hospital system, when thousands of community health workers were taking the patient data in physical papers (where the internet is not available), we are building offline capabilities for Bahmni. The tablets that the community health workers use are of very low hardware capabilities and we had to take most of the design decisions to enable offline capabilities with these limitations.
The talk is about the importance of "offline first applications", the technologies that enable that to happen, and our design, solution, and methodology -- to enable offline capabilities for Bahmni with the hardware limitations.
All Time Service Available Call Girls Mg Road 👌 ⏭️ 6378878445
Offline First Applications
1. Offline first
Do you need internet for your app to work?
Ran.ga.na.than B @ran_than
2. “What is the World population?”
“Can you explain BigBang theory in 1
sentence?”
3. Cognitive Prosthesis
The Internet Makes You Think
You’re Smarter Than You Are
src: https://hbr.org/2015/07/the-internet-makes-you-think-youre-smarter-than-you-are
6. 60% of the world is still
without internet
Over 4 billion people are offline around the world
src: http://www.independent.co.uk/news/world/60-of-the-world-is-still-without-internet-9927824.html
8. –washingtonpost
“In India, for instance, roughly 45 percent of the
population lives without electricity, making
Internet access all the more unthinkable.”
src: https://www.washingtonpost.com/news/wonk/wp/2014/10/02/4-4-billion-people-around-the-world-still-dont-have-internet-heres-w
23. The power of the device
1GB RAM
600MB internal storage
5.62GB SD card
Arm cortex a9 1.4ghz dual core
24. Technical Constraints
• Network – we would be catering to devices on intermittent
at best 2G networks.
• Disk space – devices are very low on disk space.
• Battery
• People using this will not be tech savvy (UX).
25. Anatomy of our Application
1. Static Data (JS, HTML, CSS, Images, etc)
2. Transactional Data (customer data)
3. REST calls
4. UI and UX
5. Security
26. 1. Static Data
1. Browser cache
2. App cache - Demo
3. Service workers - Demo
4. Bundling
31. 1.Cookies
• 300 cookies in total
• 4096 bytes per cookie
• 20 cookies per domain
• 20 cookies of max size 4096 = 81920 bytes per
domain
• Good for state management
32. 2, 3.)WebStorage/localstorage
• Sessionstorage
• available per origin
• alive till page is closed
• Localstorage
• per origin
• lasts till localStorage.clear(); or localStorage.remove(‘key');
• By default, the limit is 5MB per domain
33. 4. Web SQL Database
• queried using a variant of SQL
• ceased working on spec November 2010, since SQLite
was only backend
• By default, the limit is 5MB per domain
34. 5. FileSystem API
• Request quota access and use file system
• April 2014, W3C stopped standardizing.
• chrome is supporting
35. 6. indexedDB
• async
• API(query and code) not cool. But we have wrappers.
• Dexie.js
• db.js
• PouchDB
• IDBWrapper
• Lovefield (Google)
• If using temp(default), when space becomes low, chrome/firefox will clear out an IDB
data based on a LRU policy.
• 5MB (mobile), 50MB (desktop) are free, can remove the restriction with grant permission.
37. 2.Transactional Data
1. Cookies
2. Web Storage
3. Local Storage
4. Web SQL
5. FileSystem API
6. indexedDB (lovefield wrapper) for chrome
7. SQLite for android