Documentation
Feedback
Guides
Storefront Development

Storefront Development
Store Framework
Routing
Using several service workers in your store

Learn how to leverage the Service Worker builder to provide users with uninterrupted access to your web applications.

The Service Worker builder is responsible for fetching service workers exported by the account's installed apps and bundling them into a single file.

Service Workers function as JavaScript intermediaries, facilitating interactions between web apps, browsers, and the network. By intercepting, caching, and modifying navigation, they enable efficient offline experiences and enhance the overall performance of web applications.

This article explores how to leverage the Service Worker builder to bundle multiple service workers into a single file for your store. This feature allows stores to work simultaneously with several service workers, eliminating the constraints of being limited to just one.

Step by step

Follow these instructions to create an app using the Service Worker builder. If you are editing an already-existing app, ensure the Service Worker builder is declared in the manifest.json's builders list, as shown below.


_10
"builders": {
_10
"docs": "0.x",
_10
+ "service-worker": "0.x"

  1. Run the vtex init command in your terminal, using the VTEX IO CLI:

_10
vtex init

  1. Select the service-worker-example option and confirm that you want to download the app to the destination you just chose:
    {"base64":"  ","img":{"width":1018,"height":406,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":131279,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-using-several-service-workers-in-your-store-1.png"}}

Once you select the service-worker-example option, the CLI will prompt you for important information about the app, such as a value for the vendor, name, title, and description.

  1. Open the Service Worker Example app in your preferred code editor.
  2. In the service-workers folder, declare your app's desired event handlers in the appropriate files. If 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:

_10
function exampleSWInstall() {
_10
// eslint-disable-next-line no-console
_10
console.log('[example-sw] Install of service worker')
_10
}
_10
_10
export default

  1. Link your app.
  2. Open the store website on your browser and inspect it.
  3. In the Console tab, check if a message similar to [service-worker-example] Install of service worker is displayed. If you see this message, the app's service worker development was successful.
  4. Deploy your app once you are satisfied with the changes made.

Your app's service worker will be automatically fetched and bundled with others exported by the apps installed in your VTEX account that also use the Service Worker builder.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page