sw-builder

Service Worker Builder

The sw-builder package automates the creation of your Application's Service Worker, which pre-caches your build. This leads to a better overall performance and enables users to access your PWA without an Internet connection.

Getting Started

Install the package:

$ npm install -D sw-builder

Create the sw-builder.config.json file in your project's root:

{
  "outDir": "dist",
  "template": "base",
  "includeToPrecache": [
    "/assets",
    "/some-other-dir",
    "/index.html",
    "/logo.png",
    "/splash.png"
  ],
  "excludeFilesFromPrecache": [
    "some-ignorable-file.woff2"
  ],
  "excludeMIMETypesFromCache": [
    "application/json",
    "text/plain"
  ]
}

Include the sw-builder binary in your package.json file:

...
"scripts": {
  "build": "tsc && ... && sw-builder",
  
  // specify a custom path for the configuration file
  "build": " tsc && ... && sw-builder --config='sw-custom.config.json'",
}
...

If you are using Vite include an empty sw.js file in your public directory so you can test the Service Worker's Registration while developing.

Built With

• TypeScript

Running the Tests

# Unit Tests
$ npm run test:unit

# Integration Tests
$ npm run test:integration

License

MIT

Acknowledgments

• Service Worker API | MDN
• Introduction to Service Workers | PWAbuilder
• Service workers | web.dev

Deployment

Install dependencies:

$ npm install

Build the project:

$ npm start

Publish to npm:

$ npm publish