Don’t Disconnect Me!

The challenges of building offline-enabled web apps

Matthias Oßwald, Christiane Kurz

@matthiaso, @learnui5

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

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

most.

Web Apps going offline

App

Webserver

Resources / Assets

Remote DB

yes noOfflin

e?

RequestRequest

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

yes noOfflin

e?

Local Cach

e

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 Initiated Automatically 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

https://jakearchibald.github.io/isserviceworkerready

Questions, anyone?

Resources Service Worker https://jakearchibald.github.io/isserviceworkerready/resources.html

OpenUI5 http://openui5.org

GitHub: http://sap.github.io/openui5

@OpenUI5, @matthiaso, learnui5

Thanks for your attention!