Service Worker Example

Service Workers (SWs) are a poweful tool to handle network requests separate from a web page, as scripts running in the background. They are well known to handle push notifications and background syncronization.

With service-worker builder, we can allow an app to expose its own implementation of a Service Worker, enabling VTEX stores to use such Service Worker into their scope.

Service Workers allow us to introduce 6 different event handlers, which can be implemented inside the service-workers/ folder:

1. activate → activate.js
2. fetch → fetch.js
3. install → install.js
4. message → message.js
5. push → push.js
6. sync → sync.js

Whatever is outside those 6 files, should be implemented in header.js. The implementation result in the VTEX store DevTools should be as follows:

Each function can be tested according to the behavior of each event handler. When triggering such event handler, the function body will be executed as follows:

An example is provided in this app for exploration purposes.