Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald,

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

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

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

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

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

Real World Samples

A basic To-Do App

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

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

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

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)

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

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

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);

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

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

Static Caching

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

Cache Data within “fetch” event

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

Resolving Conflicts – Technical Solution

Questions, anyone?

Resources  Service Worker   OpenUI5   learnui5

Thanks for your attention!