The Service Worker builder is responsible for fetching service workers exported by the account's installed apps and bundling them in a single file.
Working as JavaScript files, Service Workers sit between web apps, the browser, and the network to enable effective offline experiences. They can intercept, cache, and modify navigation, providing you control over your web app behavior once the network is not available.
Thanks to the builder's bundling feature, stores can leverage from the generated file and simultaneously work with several service workers at once without needing to stick to a single one and deactivate others as essential to the operation.
Find below the instructions on how to generate an app using the Service Worker builder.
Step by step
VTEX IO CLI offers the
vtex init
command which can quickly copy the Service Worker Example app's repository to your computer, where it may be configured and fine-tuned according to your scenario needs. If an app that exports a service worker was already deployed by you and no boilerplate is needed, start with step 5.
- Using your terminal, navigate to an already existing local file directory where you want the Service Worker Example app to be copied to. Note that
{exampleFolder}
example below should be replaced with the folder name where the Service Worker Example is going to be copied to:
cd {exampleFolder}
- Run the
vtex init
command in your terminal:
vtex init
- Select the
service-worker-example
option and confirm that you want to download the app to the destination you just chose:
Once you select the
service-worker-example
option, the CLI will ask you for important information about the app, such as a value for the vendor, name, title, and description. With the exception of vendor, press enter to keep each field's predefined values.
- Open the Service Worker Example app in your local files using the code editor of your preference.
- In the
manifest.json
file, update the app's metadata, such as name, title, and decription according to your own scenario needs.
If you are editing an already-existing app, make sure that the Service Worker builder is declared in the
manifest.json
's builders list, as shown below.
"builders": {
"docs": "0.x",
+ "service-worker": "0.x"
- In the
service-workers
folder, declare your app's desired event handlers in the suitable files — in case the folder does not exist, create it. You can find more information regarding which event handler each file expects to receive in the Service Worker Example app's documentation (README file). For example:
function exampleSWInstall() {
// eslint-disable-next-line no-console
console.log('[example-sw] Install of service worker')
}
export default
- Link your app.
- Open the store website on your browser and inspect it.
- In the
Console
tab, check if a message similar to[service-worker-example] Install of service worker
is displayed. If positive, the app's service worker development was successful.
The message's
service-worker-example
text string should be replaced by your app's own name.
- Deploy your app when satisfied with the changes performed.
The app's service worker will then be automatically fetched and bundled with others exported by your VTEX account's installed apps as well, provided they are also using the Service Worker builder.
From step 7 on, no further actions are needed from you: your store is ready to work with several service workers at the same time.