Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications
-
Upload
codemotion -
Category
Technology
-
view
602 -
download
0
Transcript of Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications
![Page 1: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/1.jpg)
MILAN 20/21.11.2015
The new Mobile Challenge: Offline-Enablement for Web Applications
Christiane Kurz – SAP SE
![Page 2: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/2.jpg)
MILAN 20/21.11.2015
Christiane Kurz
SAP SE, Walldorf
@learnui5
![Page 3: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/3.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 4: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/4.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Murphy’s Law says: There will be no Connection
when you need it most.
![Page 5: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/5.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
App
Webserver
Resources / Assets
Remote DB
yes noOfflin
e?
RequestRequest
![Page 6: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/6.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 7: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/7.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 8: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/8.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 9: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/9.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
App
Webserver
Resources / Assets
Remote DB
yes noOfflin
e?
Local Cache
Local data
User Device
Request
![Page 10: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/10.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Always.
Offline Enablement – when do you need it?
![Page 11: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/11.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 12: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/12.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 13: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/13.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
What Apps Currently Do…
![Page 14: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/14.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
![Page 15: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/15.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Thinks to Take Care of
![Page 16: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/16.jpg)
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
![Page 17: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/17.jpg)
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
![Page 18: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/18.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
User Initiated Automatically Initiated
UX Patterns for Syncing Data - Modes of Sync
![Page 19: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/19.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
UX Patterns - Resolving Conflicts
![Page 20: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/20.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Detecting Online/Offline
• Browser Online Detection
• Reacting on status changes is necessary
• XMLHttpRequests are more reliable
![Page 21: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/21.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Service Worker
• Separate JavaScript thread
• Controls the web page
• Installs silently on first page load
![Page 22: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/22.jpg)
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
![Page 23: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/23.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Static Caching
![Page 24: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/24.jpg)
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
![Page 25: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/25.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Storing Data
![Page 26: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/26.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Syncing and Technical Conflict Handling
![Page 27: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/27.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Browser Limitations
![Page 28: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/28.jpg)
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/
![Page 29: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/29.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Questions, anyone?
![Page 30: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/30.jpg)
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
![Page 31: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/31.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Thanks for your attention!
![Page 32: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/32.jpg)
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>
![Page 33: Christiane Kurz - The new Mobile Challenge: Offline-Enablement for Web Applications](https://reader035.fdocuments.net/reader035/viewer/2022070521/58ef9da51a28abaa678b45a5/html5/thumbnails/33.jpg)
MILAN 20/21.11.2015 - Christiane Kurz
Leave your feedback on Joind.in!https://m.joind.in/event/codemotion-milan-2015