https://github.com/kristofferstrube/blazor.serviceworker
A Blazor wrapper for the Service Worker API.
https://github.com/kristofferstrube/blazor.serviceworker
blazor blazor-webassembly csharp fetch github-pages jsinterop service service-worker serviceworker serviceworkers wasm worker wrapper
Last synced: about 1 month ago
JSON representation
A Blazor wrapper for the Service Worker API.
- Host: GitHub
- URL: https://github.com/kristofferstrube/blazor.serviceworker
- Owner: KristofferStrube
- License: mit
- Created: 2022-11-13T15:14:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-04T10:12:57.000Z (11 months ago)
- Last Synced: 2025-05-07T03:04:21.134Z (about 1 month ago)
- Topics: blazor, blazor-webassembly, csharp, fetch, github-pages, jsinterop, service, service-worker, serviceworker, serviceworkers, wasm, worker, wrapper
- Language: C#
- Homepage: https://kristofferstrube.github.io/Blazor.ServiceWorker/
- Size: 10.2 MB
- Stars: 32
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](/LICENSE.md)
[](https://github.com/KristofferStrube/Blazor.ServiceWorker/issues)
[](https://github.com/KristofferStrube/Blazor.ServiceWorker/network/members)
[](https://github.com/KristofferStrube/Blazor.ServiceWorker/stargazers)
# Introduction
A Blazor wrapper for the [Service Workers](https://www.w3.org/TR/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](https://kristofferstrube.github.io/Blazor.ServiceWorker/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](https://github.com/KristofferStrube/Blazor.ServiceWorker/blob/main/samples/KristofferStrube.Blazor.ServiceWorker.WasmExample/wwwroot/service-worker.js), but the content is pretty simple:
```js
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:
```csharp
var builder = WebAssemblyHostBuilder.CreateDefault(args);
// other services added and root components configured
builder.Services.AddNavigatorService();
var app = builder.Build();
var navigator = app.Services.GetRequiredService();
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.
- https://github.com/KristofferStrube/Blazor.FileAPI
# Related articles
This repository was build with inspiration and help from the following series of articles:
- [How to communicate with Service Workers](https://felixgerschau.com/how-to-communicate-with-service-workers/)
- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)
- [Call anonymous C# functions from JS in Blazor WASM](https://blog.elmah.io/call-anonymous-c-functions-from-js-in-blazor-wasm/)
- [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)
- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)
- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)