Astro SW

The integration accepts path to your own authored service worker and automatically injects dynamic variables such as __assets generated by Astro for caching. The goal is to let devs retain the flexibility for various caching strategies.

Other integrations exist which will generate a service worker for you, but there are good reasons to avoid this.

Installation

In your Astro project:

# if using npm
$ npm i -D @ayco/astro-sw

# if using pnpm
$ pnpm add -D @ayco/astro-sw

Usage

Example astro.config.mjs

import { defineConfig } from "astro/config";
import serviceWorker from "@ayco/astro-sw";

export default defineConfig({
  integrations: [
    serviceWorker({
      path: "./src/sw.js",
    })
  ]
});

API

The integration accepts a configuration object of type ServiceWorkerConfig with the following properties

property	type	required?	notes
path	string	required	path to your own service worker script; no surprises & easy debugging
assetCachePrefix	string	optional	cache storage name prefix; useful for debugging
assetCacheVersionID	string	optional	cache storage name versioning; by default, a random UUID is used but you can provide your own for easy debugging & invalidation
customRoutes	string[]	optional	list of custom routes you want to be cached. Beware that non-existent routes that result to HTTP Error404 will cause the service worker to fail
excludeRoutes	string[]	optional	list of routes you want to be ignored/removed from assets

Example sw.js

You can find an example service worker (example_sw.js) in the repository, and here's the raw file too.

Example project

This was developed to support the needs of Cozy.