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 invert the control (i.e., compared to generating the service worker script code), and let devs retain the flexibility for various caching strategies.

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.