service workers and apex
TRANSCRIPT
![Page 1: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/1.jpg)
Dimitri Gielis
Service Workers & APEX
www.apexRnD.be dgielis.blogspot.com @dgielis [email protected]
![Page 2: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/2.jpg)
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, …)
![Page 3: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/3.jpg)
https://www.apexofficeprint.com
Workshop - tomorrow 4.15 pm (Jazz 1)
![Page 4: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/4.jpg)
http://dgielis.blogspot.com @dgielis
![Page 5: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/5.jpg)
Rich offline experience
Periodic background syncs
Push notifications
Geofencing
![Page 6: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/6.jpg)
Agenda
❖ What are Service Workers
❖ What do they solve
❖ Service Worker Life Cycle
❖ Example of a Service Worker
❖ Use cases in APEX
![Page 7: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/7.jpg)
Service Workers
![Page 8: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/8.jpg)
A service worker is a script that stands between
your website and the network
![Page 9: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/9.jpg)
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/
![Page 10: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/10.jpg)
Rich offline experience
Periodic background syncs
Push notifications
Geofencing
![Page 11: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/11.jpg)
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
![Page 12: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/12.jpg)
JavaScript Promises
❖ JavaScript is single threaded
❖ We want multithreaded
❖ Async success/failure
http://www.html5rocks.com/en/tutorials/es6/promises/
![Page 13: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/13.jpg)
JavaScript Promises
http://www.html5rocks.com/en/tutorials/es6/promises/
![Page 14: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/14.jpg)
Service Workers solve
❖ Offline usage (Offline-first)
❖ Programmable cache control
❖ Custom response
❖ Background processing
❖ Push notifications
❖ BackgroundSync
❖ Alarms (Task Scheduler)
![Page 15: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/15.jpg)
![Page 16: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/16.jpg)
Service Worker Life Cycle
![Page 17: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/17.jpg)
Register
![Page 18: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/18.jpg)
Using Service Worker
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
![Page 19: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/19.jpg)
Register a Service Worker
![Page 20: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/20.jpg)
Register
![Page 21: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/21.jpg)
Install a Service Worker
![Page 22: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/22.jpg)
Register
![Page 23: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/23.jpg)
Fetch a Service Worker
![Page 24: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/24.jpg)
Register
![Page 25: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/25.jpg)
Update & Activate a Service Worker
![Page 26: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/26.jpg)
Register
![Page 27: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/27.jpg)
Viewing/Debug a Service Worker
(old: chrome://serviceworker-internals/)chrome://inspect/#service-workers
![Page 28: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/28.jpg)
Demo SW in APEX
![Page 29: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/29.jpg)
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
![Page 30: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/30.jpg)
Browser Support?
![Page 31: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/31.jpg)
Browser Support
http://caniuse.com/#feat=serviceworkers
![Page 32: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/32.jpg)
Browser Support
https://jakearchibald.github.io/isserviceworkerready/
![Page 33: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/33.jpg)
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/
![Page 34: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/34.jpg)
Recap
❖ What are Service Workers
❖ What do they solve
❖ Service Worker Life Cycle
❖ Example of a Service Worker
❖ Use cases in APEX
![Page 35: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/35.jpg)
Q&A www.apexRnD.be dgielis.blogspot.com @dgielis [email protected]
![Page 36: Service Workers and APEX](https://reader031.vdocuments.site/reader031/viewer/2022022414/5871ac571a28abda6a8b5abb/html5/thumbnails/36.jpg)
❖ Looking for consulting, training and development in Oracle Application Express (APEX)?
❖ Contact : www.apexRnD.be
❖ Mail : [email protected]
Consulting, Development, Training