feat!: 2.0, RFC 8291 aes128gcm and RFC 8292 vapid

.github/workflows/deploy.yml

@@ -5,15 +5,19 @@ on:
   release:
     types: [published]
 
+# npm is authenticated with NODE_AUTH_TOKEN, not the github token
+permissions:
+  contents: read
+
 jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v7
         with:
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/pr.yml

@@ -4,23 +4,45 @@ on:
   pull_request:
     branches: ['canary', 'master']
 
+# checkout is all either job does with the token
+permissions:
+  contents: read
+
 jobs:
   test:
     strategy:
       matrix:
-        node-version: ['18', '20', '22']
+        node-version: ['22', '24', '26']
 
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v7
         with:
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
           node-version: ${{ matrix.node-version }}
 
       - run: make test
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+
+      - uses: pnpm/action-setup@v6
+
+      - uses: actions/setup-node@v7
+        with:
+          cache: 'pnpm'
+          node-version-file: '.node-version'
+
+      - run: pnpm install
+
+      - run: pnpm exec oxlint
+
+      - run: pnpm exec oxfmt --check

.gitignore

@@ -1,10 +1,10 @@
 node_modules
 dist
 coverage
+test-results
 
 .wrangler
 
 *.tsbuildinfo
 
 sqlite.db
-**/migrations/meta/

.node-version

@@ -1 +1 @@
-20
+26

.oxfmtrc.json

@@ -0,0 +1,19 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "singleQuote": true,
+  "ignorePatterns": [
+    "**/dist",
+    "**/node_modules",
+    "**/.wrangler",
+    "**/dev-dist",
+    "**/*.html"
+  ],
+  "sortPackageJson": {
+    "sortScripts": true
+  },
+  "sortImports": {
+    "newlinesBetween": false
+  }
+}

.oxlintrc.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "promise", "import", "oxc"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "rules": {
+    "typescript/no-non-null-assertion": "error",
+    "no-nested-ternary": "error",
+    "unicorn/no-nested-ternary": "error",
+    "import/first": "error",
+    "import/no-duplicates": "error",
+    "import/no-unassigned-import": ["warn", { "allow": ["**/*.css"] }],
+    "import/no-named-as-default": "error",
+    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
+    "unicorn/consistent-function-scoping": "warn",
+    "curly": ["error", "all"]
+  },
+  "ignorePatterns": ["**/dist", "**/dev-dist", "**/.wrangler"]
+}

Makefile

@@ -2,34 +2,36 @@
 
 .PHONY: build
 build: node_modules
-	pnpm exec tsc -b
+	pnpm exec tsc -b packages/web-push
 
 .PHONY: dev
 dev: node_modules
-	pnpm exec tsc -b -w
+	pnpm exec tsc -b packages/web-push -w
 
 .PHONY: clean
 clean: node_modules
-	pnpm exec tsc -b --clean
+	pnpm exec tsc -b packages/web-push --clean
+	rm -rf packages/web-push/dist
 
 .PHONY: distclean
 distclean: clean
 	rm -rf node_modules
 
-.PHONY: lint
-lint: node_modules
-	pnpm exec eslint .
-	pnpm exec prettier --check .
-
 node_modules: package.json
 	pnpm install
 
 .PHONY: test
 test: node_modules
 	pnpm run -r test
 
-.PHONY: pretty
-pretty: node_modules
-	pnpm exec eslint --fix . || true
-	pnpm exec prettier --write .
-	pnpx sort-package-json package.json packages/*/package.json examples/*/package.json
+.PHONY: e2e
+e2e: node_modules build
+	pnpm --filter e2e run e2e
+
+.PHONY: format
+format: node_modules
+	pnpm exec oxfmt
+
+.PHONY: lint
+lint: node_modules
+	pnpm exec oxlint --fix

README.md

@@ -0,0 +1,36 @@
+# @block65/webcrypto-web-push
+
+Send notifications using the Web Push Protocol and Web Crypto APIs.
+
+This repository holds the package, its examples and its end to end tests.
+Installation and usage are documented in the
+[package README](./packages/web-push/README.md).
+
+## Packages
+
+| Package                                    | Description                                    |
+| ------------------------------------------ | ---------------------------------------------- |
+| [`packages/web-push`](./packages/web-push) | The published library                          |
+| [`e2e`](./e2e)                             | Real browsers against their real push services |
+
+## Examples
+
+| Example                                                        | Description                                         |
+| -------------------------------------------------------------- | --------------------------------------------------- |
+| [`examples/browser`](./examples/browser)                       | Vite and React app that subscribes to notifications |
+| [`examples/cloudflare-workers`](./examples/cloudflare-workers) | Hono worker that stores subscriptions in D1         |
+| [`examples/nodejs`](./examples/nodejs)                         | Hono server that stores subscriptions in SQLite     |
+
+## Development
+
+```
+make          # build
+make test     # typecheck, unit tests and smoketest
+make e2e      # real browsers against real push services, see e2e/README.md
+make lint     # oxlint
+make format   # oxfmt
+```
+
+## License
+
+MIT. See [LICENSE.md](./packages/web-push/LICENSE.md).

e2e/README.md

@@ -0,0 +1,29 @@
+# e2e
+
+Subscribes a real browser to its real push service, sends a notification with
+`@block65/webcrypto-web-push`, and asserts the service worker decrypted it. A
+`201` from a push service only means the request was accepted, so this is the
+only test that shows a subscriber can read what the library produces.
+
+It is not part of `make test` and does not run in CI: it needs the network, and
+a subscription that can expire.
+
+```
+make e2e
+```
+
+## Requirements
+
+Chrome comes from the system rather than playwright, because playwright's
+chromium is built without the credentials it needs to register with FCM. The
+push API is also unavailable in incognito, which is what a browser context
+gives you unless it is persistent.
+
+```
+pnpm exec playwright install firefox
+```
+
+A browser that is not installed skips rather than fails.
+
+The playwright runner drives it, so `pnpm exec playwright test --ui` and the
+usual reporters work.

e2e/browsers.ts

@@ -0,0 +1,25 @@
+import { chromium, firefox, type BrowserContext } from '@playwright/test';
+
+type Launch = (profileDir: string) => Promise<BrowserContext>;
+
+export const browsers: Record<string, Launch> = {
+  // playwright's bundled chromium has no FCM credentials, so this needs a real
+  // chrome install. the push api is also unavailable in incognito, which is
+  // what a non-persistent context gives you
+  chrome: (profileDir) =>
+    chromium.launchPersistentContext(profileDir, {
+      channel: 'chrome',
+      permissions: ['notifications'],
+    }),
+
+  firefox: (profileDir) =>
+    firefox.launchPersistentContext(profileDir, {
+      permissions: ['notifications'],
+      firefoxUserPrefs: {
+        'dom.push.enabled': true,
+        'dom.push.connection.enabled': true,
+        'dom.push.serverURL': 'wss://push.services.mozilla.com/',
+        'permissions.default.desktop-notification': 1,
+      },
+    }),
+};

e2e/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "e2e",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@block65/webcrypto-web-push": "workspace:*",
+    "@hono/node-server": "catalog:",
+    "@playwright/test": "^1.62.1",
+    "@tsconfig/node22": "catalog:",
+    "@types/node": "catalog:",
+    "hono": "catalog:"
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  // a real subscription and delivery, over the network
+  timeout: 120_000,
+  reporter: 'list',
+});

e2e/public/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>waiting</title>
+    <!-- stops the browser requesting one and logging a 404 -->
+    <link rel="icon" href="data:," />
+  </head>
+  <body>
+    <script>
+      // the title is how the test observes what the worker decrypted. it has to
+      // be listening before anything is sent
+      navigator.serviceWorker.addEventListener('message', (event) => {
+        document.title = event.data;
+      });
+    </script>
+  </body>
+</html>

e2e/public/sw.js

@@ -0,0 +1,17 @@
+self.addEventListener('push', (event) => {
+  const text = event.data ? event.data.text() : '';
+
+  event.waitUntil(
+    (async () => {
+      const clients = await self.clients.matchAll({
+        includeUncontrolled: true,
+        type: 'window',
+      });
+
+      for (const client of clients) {
+        // oxlint-disable-next-line unicorn/require-post-message-target-origin -- Client.postMessage has no origin argument
+        client.postMessage(text);
+      }
+    })(),
+  );
+});