Skip to content

KristofferStrube/Blazor.ServiceWorker

Repository files navigation

License: MIT GitHub issues GitHub forks GitHub stars

Introduction

A Blazor wrapper for the Service Workers API.

The API makes it possible to interact with and register a Service Worker that can control the fetching of resources for the website before any other contexts exist. This enables developers to make Progressive Web Apps (PWA). This project implements a wrapper around the API for Blazor so that we can easily and safely interact with and create Service Workers.

This wrapper is still being developed, so support is very limited.

Demo

The sample project can be demoed at https://kristofferstrube.github.io/Blazor.ServiceWorker/

On each page you can find the corresponding code for the example in the top right corner.

On the API Coverage Status page you can get an overview over what parts of the API we support currently.

Getting Started

A limitation of statically served Service Workers is that they only have access to the scope that the actual file belong in. So we need to place the Service Worker interop bootstrapper in the root of our project. You can find that here, but the content is pretty simple:

importScripts("_content/KristofferStrube.Blazor.ServiceWorker/KristofferStrube.Blazor.ServiceWorker.Script.js")

Then once we have copied the script to the root of wwwroot in our project we can register a service worker like so:

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// other services added and root components configured

builder.Services.AddNavigatorService();

var app = builder.Build();

var navigator = app.Services.GetRequiredService<INavigatorService>();
var serviceWorker = await navigator.GetServiceWorkerAsync();
var rootPath = "";

await serviceWorker.RegisterAsync("./service-worker.js", rootPath, async (scope) => {
    scope.OnActivate = async () =>
    {
        Console.WriteLine("We will do something when activating!");
    };
});

Issues

Feel free to open issues on the repository if you find any errors with the package or have wishes for features.

Related repositories

This project uses the Blazor.FileAPI to return rich Blob objects in certain scenarios.

Related articles

This repository was build with inspiration and help from the following series of articles: