No description
Find a file
2024-08-08 21:20:33 +02:00
src chore: setup test app 2024-08-08 21:20:25 +02:00
.gitignore initial commit 2024-08-03 08:55:17 +02:00
astro.config.mjs chore: setup test app 2024-08-08 21:20:25 +02:00
example_sw.js chore: update comment in example sw 2024-08-03 10:31:50 +02:00
index.js chore: setup test app 2024-08-08 21:20:25 +02:00
package.json 0.0.9 2024-08-08 21:20:33 +02:00
pnpm-lock.yaml chore: setup test app 2024-08-08 21:20:25 +02:00
README.md chore: update readme 2024-08-03 22:19:47 +02:00

>>> TL;DR: Simple Astro integration to use your own authored service worker; by default, devs retain full control as opposed to getting generated sw code

Astro SW

Package information: NPM version Package information: NPM license Bundle Size

The integration accepts service worker path and automatically injects dynamic variables such as __assets generated by Astro for caching.

The main philosophy is to invert the control compared to other integrations that generate the service worker for devs. The service worker API is such a powerful feature that developers need to be able to make decisions in using it.

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.