service workers and apex
TRANSCRIPT
Dimitri Gielis
Service Workers & APEX
www.apexRnD.be dgielis.blogspot.com @dgielis [email protected]
Dimitri Gielis
❖ Founder & CEO of APEX R&D
❖ 18+ years of Oracle Experience (OCP & APEX Certified)
❖ Oracle ACE Director
❖ “APEX Developer of the year 2009” by Oracle Magazine
❖ “Oracle Developer Choice award (ORDS)” in 2015
❖ Author Expert Oracle Application Express
❖ Presenter at Oracle Conferences (OOW, ODTUG, OGh, UKOUG, …)
https://www.apexofficeprint.com
Workshop - tomorrow 4.15 pm (Jazz 1)
http://dgielis.blogspot.com @dgielis
Rich offline experience
Periodic background syncs
Push notifications
Geofencing
Agenda
❖ What are Service Workers
❖ What do they solve
❖ Service Worker Life Cycle
❖ Example of a Service Worker
❖ Use cases in APEX
Service Workers
A service worker is a script that stands between
your website and the network
A service worker is a script that is run by your
browser in the background, separate from a web
page, opening the door to features which don't
need a web page or user interaction.
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Rich offline experience
Periodic background syncs
Push notifications
Geofencing
What is a Service Worker
❖ It's a JavaScript Worker, so it can't access the DOM directly
❖ Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.
❖ It will be terminated when not in use, and restarted when it's next needed
❖ Service Workers have access to the IndexedDB API
❖ Service workers are asynchronous and make extensive use of promises
❖ Service workers require content to be served via https
JavaScript Promises
❖ JavaScript is single threaded
❖ We want multithreaded
❖ Async success/failure
http://www.html5rocks.com/en/tutorials/es6/promises/
JavaScript Promises
http://www.html5rocks.com/en/tutorials/es6/promises/
Service Workers solve
❖ Offline usage (Offline-first)
❖ Programmable cache control
❖ Custom response
❖ Background processing
❖ Push notifications
❖ BackgroundSync
❖ Alarms (Task Scheduler)
Service Worker Life Cycle
Register
Using Service Worker
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Register a Service Worker
Register
Install a Service Worker
Register
Fetch a Service Worker
Register
Update & Activate a Service Worker
Register
Viewing/Debug a Service Worker
(old: chrome://serviceworker-internals/)chrome://inspect/#service-workers
Demo SW in APEX
Lessons learned
❖ JavaScript knowledge important (Promise)
❖ Get sample working locally first
❖ Replicate in Oracle APEX
❖ Unregister SW and close tab
❖ Use Chrome Dev Tools to debug
Browser Support?
Browser Support
http://caniuse.com/#feat=serviceworkers
Browser Support
https://jakearchibald.github.io/isserviceworkerready/
References
❖ https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
❖ http://www.html5rocks.com/en/tutorials/service-worker/introduction/
❖ https://www.talater.com/upup/?utm_source=the-webdesigner.co&utm_medium=newsletter
❖ https://www.smashingmagazine.com/2016/02/making-a-service-worker/
❖ https://css-tricks.com/serviceworker-for-offline/
❖ https://developers.google.com/web/fundamentals/getting-started/
❖ https://aarontgrogg.com/blog/2015/07/20/the-difference-between-service-workers-web-workers-and-websockets/
❖ https://jakearchibald.github.io/isserviceworkerready/
Recap
❖ What are Service Workers
❖ What do they solve
❖ Service Worker Life Cycle
❖ Example of a Service Worker
❖ Use cases in APEX
Q&A www.apexRnD.be dgielis.blogspot.com @dgielis [email protected]
❖ Looking for consulting, training and development in Oracle Application Express (APEX)?
❖ Contact : www.apexRnD.be
❖ Mail : [email protected]
Consulting, Development, Training