BackgroundSync

@inject Bit.Butil.ServiceWorker serviceWorker

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

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

// A sync fires when the page that registered it may well be gone, so the work has to live here.
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', event => event.waitUntil(self.clients.claim()));

@inject Bit.Butil.BackgroundSync backgroundSync

@code {
    private async Task Queue()
    {
        // Registering the same tag twice coalesces into one pending sync, so this is safe to call
        // on every failed send rather than tracking whether one is already queued.
        var ok = await backgroundSync.Register("sync-outbox");

        string[] tags = await backgroundSync.GetTags();
    }
}

// The other half. The browser wakes the worker for the tag once the device is online - the page
// that registered it is usually closed by then, which is the whole point of registering it.
self.addEventListener('sync', event => {
    if (event.tag !== 'sync-outbox') return;

    // The tag stays registered and the browser retries later if this rejects, so the work has to be
    // safe to run more than once.
    event.waitUntil(sendOutbox());
});

async function sendOutbox() {
    // Whatever the page queued - typically read back out of IndexedDB, which is the only storage a
    // worker can reach.
    const response = await fetch('/api/outbox', { method: 'POST', body: '[]' });
    if (!response.ok) throw new Error('retry me');
}

@inject Bit.Butil.BackgroundSync backgroundSync

@code {
    private async Task Schedule()
    {
        // minimum interval: 1 hour (the browser may extend it)
        var ok = await backgroundSync.RegisterPeriodic("refresh-feed", 60 * 60 * 1000);

        string[] tags = await backgroundSync.GetPeriodicTags();
    }

    private async Task Cancel() => await backgroundSync.UnregisterPeriodic("refresh-feed");
}

// Fires at a cadence the browser chooses, never more often than the minimum interval - and only for
// an installed app the browser considers engaged enough. Treat it as an optimization, never as the
// only path by which content gets refreshed.
self.addEventListener('periodicsync', event => {
    if (event.tag !== 'refresh-feed') return;

    event.waitUntil(refreshFeed());
});

async function refreshFeed() {
    const response = await fetch('/api/feed');
    const cache = await caches.open('feed-v1');
    await cache.put('/api/feed', response);
}

{
  "name": "Bit.Butil demo",
  "short_name": "Butil",
  "start_url": "/",
  "display": "standalone"
}