MILAN 20/21.11.2015

The new Mobile Challenge: Offline-Enablement for Web Applications

Christiane Kurz – SAP SE

MILAN 20/21.11.2015

Christiane Kurz

SAP SE, Walldorf

@learnui5

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

Murphy’s Law says: There will be no Connection

when you need it most.

MILAN 20/21.11.2015 - Christiane Kurz

App

Webserver

Resources / Assets

Remote DB

yes noOfflin

e?

RequestRequest

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

App

Webserver

Resources / Assets

Remote DB

yes noOfflin

e?

Local Cache

Local data

User Device

Request

MILAN 20/21.11.2015 - Christiane Kurz

Always.

Offline Enablement – when do you need it?

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

What Apps Currently Do…

MILAN 20/21.11.2015 - Christiane Kurz

MILAN 20/21.11.2015 - Christiane Kurz

Thinks to Take Care of

MILAN 20/21.11.2015 - Christiane Kurz

• 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

MILAN 20/21.11.2015 - Christiane Kurz

• Create awareness!

– Your users know their devices Rely on signals already present

– If state changes during app usage Signal to user something

has happened

UX Patterns – Online/Offline State

MILAN 20/21.11.2015 - Christiane Kurz

User Initiated Automatically Initiated

UX Patterns for Syncing Data - Modes of Sync

MILAN 20/21.11.2015 - Christiane Kurz

UX Patterns - Resolving Conflicts

MILAN 20/21.11.2015 - Christiane Kurz

Detecting Online/Offline

• Browser Online Detection

• Reacting on status changes is necessary

• XMLHttpRequests are more reliable

MILAN 20/21.11.2015 - Christiane Kurz

Service Worker

• Separate JavaScript thread

• Controls the web page

• Installs silently on first page load

MILAN 20/21.11.2015 - Christiane Kurz

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

MILAN 20/21.11.2015 - Christiane Kurz

Static Caching

MILAN 20/21.11.2015 - Christiane Kurz

Service Worker: Offline Data Handling

• Service Worker can “simulate” the server when offline

• App behaves just like it would be online

• Background-Sync on mobile devices is possible even when App is not in use

MILAN 20/21.11.2015 - Christiane Kurz

Storing Data

MILAN 20/21.11.2015 - Christiane Kurz

Syncing and Technical Conflict Handling

MILAN 20/21.11.2015 - Christiane Kurz

Browser Limitations

MILAN 20/21.11.2015 - Christiane Kurz

IndexedDB Storage Limits

http://www.raymondcamden.com/2015/04/17/indexeddb-and-limits

http://demo.agektmr.com/storage/

http://w3c.github.io/filesystem-api/

MILAN 20/21.11.2015 - Christiane Kurz

Questions, anyone?

MILAN 20/21.11.2015 - Christiane Kurz

Service Worker: •https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers•https://jakearchibald.github.io/isserviceworkerready/resources.html•http://www.w3.org/TR/service-workers/•http://caniuse.com/#search=Service%20Workers

IndexedDB:•http://www.w3.org/TR/IndexedDB/•http://caniuse.com/#feat=indexeddb

OpenUI5:•http://openui5.org•http://sap.github.io/openui5

learnui5, OpenUI5

Resources

MILAN 20/21.11.2015 - Christiane Kurz

Thanks for your attention!

MILAN 20/21.11.2015 - Christiane Kurz

<div>Icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed under <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></div>

MILAN 20/21.11.2015 - Christiane Kurz

Leave your feedback on Joind.in!https://m.joind.in/event/codemotion-milan-2015