Service Worker & Workbox

standalone service worker for the frontend caching

Transcript

1. Service Worker & Workbox PRESENTED BY Jaydev Bhatt
2. Agenda • What are Service Workers • What is Workbox • Workbox - Strategies • Project Implementation • Questions 2
3. Service Workers • Service workers are specialized JavaScript assets that act as proxies between web browsers and web servers. They aim to improve reliability by providing offline access, as well as boost page performance. • Used to improve performance for slow network connections. 3
4. Service Workers • Cached every assets for e.g. images, JS / CSS request, font awesome and many more. • It will be terminated when not in use, and restarted when its next needed. 4
5. Why are we using service workers ? • It is Programmable network proxy allowing you to control how network request from your page are handled. • Optimizing JS script execution • Reducing main thread load time 5
6. Workbox • Workbox is a set of modules that simplify common service worker routing and caching. • Each module available addresses a specific aspect of service worker development. 6
7. Workbox-Strategies • Stale-While-Revalidate 7
8. Workbox-Strategies • NetWork First ( Network First Falling Back to Cache ) 8
9. Workbox-Strategies • Network Only 9
10. Workbox-Strategies • Cache Only 10
11. Project Implementations • Use the NPM Packages • npm install --save-dev workbox-precaching • npm install --save-dev workbox-cli • npm install --save-dev esbuild 11
12. Project Implementations • Create a sw.ts file inside the theme. [ Add the code Snippet ] 12
13. Project Implementations • Create Manifest file - • npx workbox-cli wizard --injectionManifest 13
14. Project Implementations • Update Package.json - In the build command attach this command • esbuild --outfile=sw.js --bundle sw.ts && workbox injectManifest • In this sw.js path should be root of our web application. • Run the command - npm run build 14
15. Project Implementations • Register the Service worker by adding below code in html.html.twig file. 15
16. Project Implementations 16
17. Project Implementations 17
19. References • https://developer.chrome.com/docs/workbox/modules/workbox- strategies/ • https://developer.chrome.com/docs/workbox/ • https://www.youtube.com/watch?v=sOq92prx00w&themeRefresh=1 19