1. Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5

2. https://twitter.com/wis_jurgen/status/646283381509095424

4. Murphy’s Law says: There will be no Connection when you need it most.

5. Web Apps going offline App Webserver Resources / Assets Remote DB yesno Offline ? Request

6. Offline Enablement - Why should you care?  Having an offline-enabled app would just be so much better… -On the train / on a plane -In a building -Somewhere in the middle of nowhere -In another country (and you don’t have roaming enabled) -In your basement -In the middle of a large crowd -When your internet connection sucks for other reasons. -Because serving files from your own device is just faster

7. Use Cases – When you should care?  Collaboration -To-do lists -Document handling -CRM / Customer Care -…  Multimedia  Shopping Carts  Timetables/Schedules  …

8. Web Apps going offline App Webserver Resources / Assets Remote DB yesno Offline ? Local Cache Local data User Device Request

9. Real World Samples

10. A basic To-Do App

11. What you should care about  The Frontend – UX patterns for online/offline apps -  Don‘t treat offline as an error  Detecting online/offline  Caching the right resources – improving performance  Storing data offline  Syncing data when online  Resolving conflicts  Browser-specific limitations

12. UX Patterns  Signaling online/offline state to your users  Disabling actions in offline mode if necessary  Syncing and optionally highlighting new items  Showing and solving conflicts

13. UX Patterns – Online/Offline State  Create awareness: -Your users know their devices  Rely on signals already present, but: -If state changes during app usage  Signal to user something has happened

14. Syncing Data - Modes of Sync User InitiatedAutomatically Initiated Automatically trigger a sync when… there is network connectivity, the user is in an active browser session AND… A new record is created or an existing one is updated After a certain amount of time of use of the app A new page is called Trigger a sync when the user… Pulls to refresh in a list Presses a Sync Button in an Application (e.g. in a Search Container)

15. Resolving Conflicts – Check and Show  When?  On sync  What?  Versions of documents / data  How to react?  Signal conflict to the user, but: -Try to distract the user as little as possible! -Only notify if a user action is required

16. Resolving Conflicts – Offering Solutions  Users need to be able to solve conflicts by -Comparing their changes to the conflicting version -Accepting other users’ changes -Overwriting other users’ changes  needs to be supported properly on UI

17. Detecting Online/Offline  Reacting on status changes is necessary:  navigator.onLine is not always reliable  XMLHttpRequests can help detecting (health check) window.addEventListener("offline", function(e) { alert("offline"); }, false); window.addEventListener("online", function(e) { alert("online"); }, false);

18. Service Workers  Runs in a separate JavaScript thread  Controls the web page (intercepting requests, caching, indexedDB, …)  Allows to build an enhanced user experience  Installs silently on first page load

19. Caching / Data handling  Cache the GET response(s)  Update the cache when new data was loaded  Use it as fallback when offline  Store offline changes e.g. in indexedDB  Communicate with app via postMessage

20. Static Caching

21. Service Worker Offline Data Handling  Service Worker can “simulate” the server when offline  App behaves just like it would be online -can be done as “enhancement” for browsers supporting it  Background-Sync on mobile devices is possible even when App is not in use

22. Cache Data within “fetch” event

23. Resolving Conflicts  Increase revision number for each entry update  Updates need to include latest number -Otherwise it returns a conflict

24. Resolving Conflicts – Technical Solution

25. https://jakearchibald.github.io/isserviceworkerready

26. Questions, anyone?

27. Resources  Service Worker  https://jakearchibald.github.io/isserviceworkerready/resources.htmlhttps://jakearchibald.github.io/isserviceworkerready/resources.html  OpenUI5  http://openui5.orghttp://openui5.org  GitHub: http://sap.github.io/openui5http://sap.github.io/openui5 @OpenUI5, @matthiaso, learnui5

28. Thanks for your attention!