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 node from "@astrojs/node";
import serviceWorker from "@ayco/astro-sw";

export default defineConfig({
  output: "server",
  adapter: node({
    mode: "middleware"
  }),
  integrations: [
    serviceWorker({
      path: "./src/sw.js",
      assetCachePrefix: 'cozy-reader',
    })
  ]
});

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

Example sw.js

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