don’t disconnect me! the challenges of building offline-enabled web apps matthias oßwald,...
TRANSCRIPT
![Page 1: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/1.jpg)
Don’t Disconnect Me!
The challenges of building offline-enabled web apps
Matthias Oßwald, Christiane Kurz
@matthiaso, @learnui5
![Page 2: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/2.jpg)
https://twitter.com/wis_jurgen/status/646283381509095424
![Page 3: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/3.jpg)
![Page 4: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/4.jpg)
Murphy’s Law says: There will be no Connection when you need it
most.
![Page 5: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/5.jpg)
Web Apps going offline
App
Webserver
Resources / Assets
Remote DB
yes noOfflin
e?
RequestRequest
![Page 6: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/6.jpg)
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
![Page 7: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/7.jpg)
Use Cases – When you should care? Collaboration
- To-do lists
- Document handling
- CRM / Customer Care
- …
Multimedia
Shopping Carts
Timetables/Schedules
…
![Page 8: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/8.jpg)
Web Apps going offline
App
Webserver
Resources / Assets
Remote DB
yes noOfflin
e?
Local Cach
e
Local data
User Device
Request
![Page 9: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/9.jpg)
Real World Samples
![Page 10: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/10.jpg)
A basic To-Do App
![Page 11: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/11.jpg)
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
![Page 12: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/12.jpg)
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
![Page 13: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/13.jpg)
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
![Page 14: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/14.jpg)
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)
![Page 15: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/15.jpg)
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
![Page 16: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/16.jpg)
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
![Page 17: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/17.jpg)
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);
![Page 18: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/18.jpg)
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
![Page 19: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/19.jpg)
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 20: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/20.jpg)
Static Caching
![Page 21: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/21.jpg)
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
![Page 22: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/22.jpg)
Cache Data within “fetch” event
![Page 23: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/23.jpg)
Resolving Conflicts Increase revision number for each entry update
Updates need to include latest number
- Otherwise it returns a conflict
![Page 24: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/24.jpg)
Resolving Conflicts – Technical Solution
![Page 25: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/25.jpg)
https://jakearchibald.github.io/isserviceworkerready
![Page 26: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/26.jpg)
Questions, anyone?
![Page 27: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/27.jpg)
Resources Service Worker https://jakearchibald.github.io/isserviceworkerready/resources.html
OpenUI5 http://openui5.org
GitHub: http://sap.github.io/openui5
@OpenUI5, @matthiaso, learnui5
![Page 28: Don’t Disconnect Me! The challenges of building offline-enabled web apps Matthias Oßwald, Christiane Kurz @matthiaso, @learnui5](https://reader036.vdocuments.site/reader036/viewer/2022070413/5697bfa71a28abf838c98d57/html5/thumbnails/28.jpg)
Thanks for your attention!