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

4. “Everything is obvious, once you know the answer.”

5. #FFCC00
src: http://philip.greenspun.com/images/200206-michigan/sorry-no-internet-today-1.jpg

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

7. #FFCC00

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

9. “What is the circumference of the Earth?”

10. #FFCC00
src: http://www.deluxebattery.com/wp-content/uploads/2014/08/albert-einstein-intriging-questions-01.jpg

11. “Do you still need internet for your app to work?”

12. History of Hardware & Software
• Big machines
• Integrated with the machine
• Desktops & Laptops
• Standalone applications (offline)
• Browsers for online
• Mobiles & Tablets
• Apps
• Cloud
• Wearables
• Apps evolving

13. Offline first
“Write your app as if it has no internet
connection.”

14. Google Trends 2003 - 2015

15. Benefits
• Seamless access
• Faster
• No data loss
of offline first

16. Hospital system for low
resource settings
An easy to use open source EMR & hospital system

17. “The story of Community Health Workers.”

18. Patient records in paper form at JSS

19. Bahmni Architecture

20. Bahmni Architecture - Simpler version

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

27. Cache First First from cache, the update from network

28. Request strategy
• Network first
• Cache first
• Fastest
• Cache only
• Network only

29. 1. Static Data
1. Browser cache
2. App cache - Demo
3. Service workers - Demo
4. Bundling

30. 2. Transactional Data

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.

36. 7. SQLite
• SQL like DB for browsers

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

38. 3. REST: Pull & Push

39. 3. REST: WebWorkers

40. 4. UI & UX
http://github.hubspot.com/offline/docs/welcome/
No difference between online and offline

41. 5. Security
1. Encrypted all local data with SQLCipher
2. SSL
3. Forward hashed the password
4. Regular logout

42. Solution
1.Static Data - Bundling
2.Transactional Data
1. lovefield for chrome
2. SQLite for android
3.REST calls - WebWorkers
4.UI and UX - Seamless
5. Security - Encrypt, SSL, and forward hash password

45. “Thank you.”