Push

@inject Bit.Butil.ServiceWorker serviceWorker

<button @onclick="RegisterWorker">Register /sw.js</button>

@code {
    private async Task RegisterWorker() => await serviceWorker.Register("/sw.js");
}

// Nothing in a page can receive a push: the browser wakes the service worker, which is why a
// subscription belongs to a registration rather than to a tab.
self.addEventListener('push', event => {
    const text = event.data ? event.data.text() : '(no payload)';

    // Chromium enforces the userVisibleOnly promise the subscription made: a push handler that
    // shows no notification eventually loses the subscription.
    event.waitUntil(self.registration.showNotification('Bit.Butil push demo', { body: text }));
});

// The endpoint can be rotated by the push service, which arrives here rather than in the page. The
// new subscription has to be sent to your server, or it goes on pushing to the old endpoint.
self.addEventListener('pushsubscriptionchange', event => {
    event.waitUntil(self.registration.pushManager
        .subscribe(event.oldSubscription.options)
        .then(subscription => fetch('/api/push/subscriptions', {
            method: 'POST',
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify(subscription)
        })));
});

# Once per application, not once per user. The public half goes to the browser as the
# applicationServerKey; the private half stays on your server and signs every push you send.
npx web-push generate-vapid-keys

@inject Bit.Butil.Push push

@code {
    // The public half of the VAPID key pair, base64-url encoded.
    private const string ApplicationServerKey = "BPk3...your public key...";

    private async Task Subscribe()
    {
        var sub = await push.Subscribe(applicationServerKey: ApplicationServerKey);

        if (sub.IsActive is false) return;

        // sub.Endpoint, sub.P256dh and sub.Auth are the three values your server needs to push to
        // this browser; sub.ExpirationTime is usually null. Nothing on this side can send a push.
        await http.PostAsJsonAsync("/api/push/subscriptions", sub);
    }
}