Package Exports

sw-builder
sw-builder/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sw-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 i -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 -b && vite build && sw-builder",
  
  // specify a custom path for the configuration file
  "build": "tsc -b && vite build && 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.

Types

IBaseConfig

The configuration required to build the 'base' template. This type should be turned into a discriminated union once more templates are introduced.

type IBaseConfig = {
  // the dir path in which the build's output is placed
  outDir: string;

  // the name of the template that will be generated
  template: ITemplateName;

  // the list of asset paths that will be traversed and included in the cache
  includeToPrecache: string[];

  // the list of file names that will be ignored
  excludeFilesFromPrecache: string[];

  // the list of MIME Types that won't be cached when the app sends HTTP GET requests
  excludeMIMETypesFromCache: string[];
};

Templates

base

Built With

TypeScript

Tests

# unit tests
npm run test:unit

# integration tests
npm run test:integration

License

MIT