<pacem-serviceworker-proxy> registers your service worker (offline cache, background work) and hands you its registration: push notifications are one subscribe() away. Put one in your app shell; this site has it as #sw.

<pacem-serviceworker-proxy id="sw" src="/sw.js"></pacem-serviceworker-proxy>

<pacem-button on-click="#sw.subscribe('BBiX2b…')">notify me</pacem-button>

Usage

Register. src is the worker's script; once registered, registration holds the ServiceWorkerRegistration and register fires (handy to warm a cache, or log the version).

One proxy per worker, in the app shell: the element unregisters its worker when it leaves the DOM, so a proxy inside a page would switch the worker off as soon as you navigate away.

Push. subscribe(publicKey) asks for permission and subscribes with your server's VAPID public key (base64url), publicKey being the default. The result lands in pushSubscription (and subscribe fires): send it to your server, which pushes through it. unsubscribe() undoes it. An existing subscription is picked up at registration.

subscribe() rejects when the browser refuses (permission denied, no push service, a bad key): .catch() it to tell the user.

<pacem-serviceworker-proxy id="sw" src="/sw.js" public-key="BBiX2b…"
                           on-subscribe="#saveSubscription.fetch()"></pacem-serviceworker-proxy>

Push needs a secure origin, a real push service (Chrome, Firefox, Safari 16+) and the user's yes. Without them pushSubscription just stays empty.

Examples

A "notify me" bell

The classic toggle: subscribe, then unsubscribe, through this site's #sw. No notification will actually be sent.

Hand the subscription to your server

subscribe and unsubscribe events drive a <pacem-fetch> each: the server learns where to push, and when to stop.