Offline ASP.NET Core apps with service workers

Update: The information in the blog post is outdated. Instead check out Progressive Web Apps made easy with ASP.NET Core.

What if you could make your ASP.NET Core web app faster to load and work offline without changing you code? You now can with the WebEssentials.AspNetCore.ServiceWorker NuGet package.

It registers a service worker that instructs the browsers how to cache resources and enable an offline experience. Most modern browsers support service workers with Edge and Safari currently implementing it.

Note, Service workers require HTTPS (except for localhost) to work.

Service workers are scripts that your browser runs in the background and act as a network proxy in the web browser to manage the web/HTTP requests programmatically

After installing the NuGet package, simply register the service in Startup.cs like so:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddServiceWorker();
}

That is all you have to do to enable service workers in your application. Here’s what it looks like with custom configuration:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
    services.AddServiceWorker(new PwaOptions
    {
        Strategy = ServiceWorkerStrategy.CacheFirst,
        CacheId = "v3",
        RoutesToPreCache = "foo.css, bar.js"
    });
}

Read more on the WebEssentials.AspNetCore.ServiceWorker GitHub repo about custom configuration and see how Miniblog.Core implemented it.

Progressive Web Apps

After implementing a service worker, you are now half way to turn your web app into a Progressive Web App (PWA). All you need to do is to add a JSON file called a Web App Manifest which is nothing but a few meta properties about your app such as name, description and list of icons. Here’s mine.