christiane kurz - the new mobile challenge: offline-enablement for web applications
Post on 13-Apr-2017
602 Views
Preview:
TRANSCRIPT
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
top related