ServiceWorker

@inject Bit.Butil.ServiceWorker serviceWorker

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

@code {
    private async Task Register()
    {
        var info = await serviceWorker.Register("/sw.js");

        // info.IsRegistered   -> true
        // info.Scope          -> e.g. "https://example.com/"
        // info.ActiveState    -> "activated" once the worker is running
        // info.InstallingState / info.WaitingState / info.UpdateViaCache
    }
}

// The script the registration points at. It has to be same-origin, and its location decides the
// widest scope it may claim: a worker at /sw.js can control the whole origin, one at /app/sw.js
// only /app/.

// Deliberately no self.skipWaiting() here. A first registration activates immediately anyway
// (nothing is controlling the page yet), while a worker installed over a running one waits - which
// is the only state ServiceWorker.SkipWaiting has anything to do in.
self.addEventListener('install', () => {
    console.log('[sw] installed; waiting if another version is still in control');
});

self.addEventListener('activate', event => {
    // Takes over the pages that were already open when this worker activated. Without it the first
    // visit after an install is the one where a worker's offline support quietly does not work.
    event.waitUntil(self.clients.claim());
});

@implements IAsyncDisposable
@inject Bit.Butil.ServiceWorker serviceWorker

@code {
    private string? _lastEcho;
    private ButilSubscription? _messageSub;
    private ButilSubscription? _controllerSub;

    private async Task Subscribe()
    {
        _messageSub = await serviceWorker.SubscribeMessage(data =>
        {
            // data is a JsonElement carrying whatever the worker posted
            _lastEcho = data.GetProperty("echo").GetString();
            InvokeAsync(StateHasChanged);
        });

        _controllerSub = await serviceWorker.SubscribeControllerChange(() =>
        {
            // the page is now controlled by a (new) worker
            InvokeAsync(StateHasChanged);
        });
    }

    // False when nothing controls this page yet - a first registration does not control the page
    // that registered it until the worker claims it.
    private async Task Post()
    {
        var delivered = await serviceWorker.PostMessage("hi worker");
    }

    public async ValueTask DisposeAsync()
    {
        if (_messageSub is not null) await _messageSub.DisposeAsync();
        if (_controllerSub is not null) await _controllerSub.DisposeAsync();
    }
}

// The other half of the conversation. A page posts to the worker controlling it; the worker answers
// every client it controls, because there is no single "the page" from in here.
self.addEventListener('message', event => {
    // Skip the internal protocol Bit.Butil's SkipWaiting / Claim / MatchAllClients speak.
    if (event.data && event.data.__butil) return;

    event.waitUntil(self.clients.matchAll({ type: 'window' })
        .then(clients => clients.forEach(client => client.postMessage({ echo: event.data }))));
});

self.addEventListener('activate', event => {
    // Claiming is what fires SubscribeControllerChange on a page that loaded uncontrolled.
    event.waitUntil(self.clients.claim());
});

@inject Bit.Butil.ServiceWorker serviceWorker

@code {
    private async Task TurnPreloadOn()
    {
        await serviceWorker.EnableNavigationPreload();

        // tell the server this request is a preload, and what for
        await serviceWorker.SetNavigationPreloadHeader("shell-v3");

        NavigationPreloadState state = await serviceWorker.GetNavigationPreloadState();
        // state.IsSupported / state.Enabled / state.HeaderValue
    }

    private async Task TurnPreloadOff() => await serviceWorker.DisableNavigationPreload();
}

// Enabling preload costs a request; it only pays off if the worker actually uses the response. The
// browser sends the navigation in parallel with booting this worker, and hands the result in as
// event.preloadResponse - a promise that resolves to undefined when preload is off or unsupported.
self.addEventListener('fetch', event => {
    if (event.request.mode !== 'navigate') return;

    event.respondWith((async () => {
        const preloaded = await event.preloadResponse;
        if (preloaded) return preloaded;

        // Nothing was preloaded - fall back to the network the page would have had anyway.
        return fetch(event.request);
    })());
});

// The header the page set arrives on the preload request as Service-Worker-Navigation-Preload, so a
// server can answer it with the shell rather than the full page.

@inject Bit.Butil.ServiceWorker serviceWorker

@code {
    // False when there was no worker waiting - a first registration activates on its own.
    private async Task Promote()
    {
        var hadWaitingWorker = await serviceWorker.SkipWaiting();
    }

    // Claim answers over a MessageChannel, so it is false when no worker answered in time as well
    // as when the call failed inside the worker.
    private async Task Take()
    {
        var claimed = await serviceWorker.Claim();
    }
}

// Both facilities live on the worker's global scope and cannot be reached from a page at all, so
// the page asks and the worker acts. This protocol is what the two calls expect - a worker without
// it leaves SkipWaiting and Claim with nothing to talk to.
self.addEventListener('message', event => {
    if (event.data?.__butil === 'skipWaiting') self.skipWaiting();

    if (event.data?.__butil === 'claim') {
        // The reply goes back over the port the page sent along with the message. Answer even on
        // failure: with no reply the page waits out its whole timeout and then reads the default.
        event.waitUntil(self.clients.claim()
            .then(() => event.ports[0]?.postMessage(true), () => event.ports[0]?.postMessage(false)));
    }
});

@inject Bit.Butil.ServiceWorker serviceWorker

@code {
    private async Task ListClients()
    {
        ServiceWorkerClientInfo[] clients = await serviceWorker.MatchAllClients(
            includeUncontrolled: true, type: "window");

        // An empty array is ambiguous: no clients, no active worker, or none answered in time.
        foreach (var client in clients)
        {
            // client.Id, client.Url, client.Type, client.FrameType,
            // client.Focused, client.VisibilityState
        }
    }
}

// The Clients API exists only on the worker's global scope, so the question is asked over a
// MessageChannel and answered here. A Client is not serializable, so only the fields the page reads
// go back across.
self.addEventListener('message', event => {
    if (event.data?.__butil !== 'clients') return;

    event.waitUntil(self.clients
        .matchAll({ includeUncontrolled: event.data.includeUncontrolled, type: event.data.type })
        .then(clients => event.ports[0]?.postMessage(clients.map(c => ({
            id: c.id, url: c.url, type: c.type, frameType: c.frameType,
            focused: c.focused, visibilityState: c.visibilityState
        }))), () => event.ports[0]?.postMessage([])));
});