Building extensions for Visual Studio has its challenges, but as the new PM on the extensibility team I’ve made it my mission to make it easier. One way of doing that is to provide features that can take some of the pain out of common tasks associated with extension authoring.

Here are three brand new extensions that might be helpful.

Command Explorer

This extension shows the group and menu identifiers of existing commands to make it easy to find out where to place your custom commands.

CommandExplorer

Read more and download Command Explorer from Marketplace and check out the source on GitHub.

Registry Explorer

This extension provides a tool window for looking at the Visual Studio registry hive. It shows the registry from both the UserRegistryRoot and ApplicationRegistryRoot (_Config).

Tool Window

Read more and download Registry Explorer from Marketplace and check out the source on GitHub.

KnownMonikers Explorer

Provides a tool window for Visual Studio extension authors that lets you easily browse all the image monikers in the KnownMonikers catalog and save them at any size to PNG, JPG or Gif on disk.

Context Menu

Read more and download Registry Explorer from Marketplace and check out the source on GitHub.

All three extension require Visual Studio 2017 Update 6 since it uses the new Async Tool Window feature.

I hope these extensions will help make you a more productive and happier Visual Studio extender. Let me know in the comments.

Earlier this week I wrote about some experiments I was doing with Service Workers in ASP.NET Core. This is an update to that.

So, what is a Progressive Web App (PWA)?

A Progressive Web App uses modern web capabilities to deliver an app-like user experience – Progressive Web Apps

The benefits of PWAs are many. My personal favorites include:

  • They are faster than regular websites
  • They are more reliable
  • They work offline
  • They can be installed on the desktop or phone
  • Most major browsers already support them (Safari and Edge coming soon)

Any website or web application can add the capabilities that turns them into PWAs. The capabilities to add are:

  1. The website must be served over HTTPS
  2. Add a Web App Manifest (it’s a simple JSON file)
  3. Add a Service Worker (a JavaScript file)

With ASP.NET Core we can automate a lot of this to make it easier and more integrated with the rest of the application.

Getting started

So, let’s get started turning our ASP.NET Core web application into a full fledged PWA by following a few easy steps. This will make your site work offline, be faster and installable by supporting browsers.

Step 1 – install a NuGet package

Install the NuGet package WebEssentials.AspNetCore.PWA into your ASP.NET Core project.

Step 2 – add a manifest and icons

Add a file called manifest.json in the wwwroot folder as well as 2 image icons.

Solution-explorer

You can have as many image icons as you want as long as you have one in the size of 192x192 and one 512x512 pixels.

Fill in the manifest.json file similar to this:

{
  "name": "Awesome Application",
  "short_name": "Awesome",
  "description": "The most awesome application in the world",
  "icons": [
    {
      "src": "/img/icon192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "/img/icon512x512.png",
      "sizes": "512x512"
    }
  ],
  "display": "standalone",
  "start_url": "/"
}

Step 3 – register a service

Inside the ConfigureServices method in Startup.cs, add a call to services.AddProgressiveWebApp() like so:

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

Voila! The app is now a full blown PWA.

To verify it works and your web app now behaves like a PWA in supported browsers, check out the verification step on the project readme.

Also see how it is implemented in the Miniblog.Core source code which is a production web app. This very website (madskristensen.net) is also running it.

Configuration

There are plenty of ways to configure the behavior of the Web App Manifest as well as the service worker. Read the documentation for more info.

I do want to call out that the NuGet package creates a strongly typed object (WebEssentials.AspNetCore.Pwa.WebManifest) out of the manifest.json file and makes it available in the dependency injection system. That way you can have a single source of truth for meta data properties such as application name, description and icon list.

Next steps

Read the full description of using the NuGet package where you’ll also find links to the various specifications and videos about PWAs. 

Contribute

If this is of interest to you and you’d like to contribute to the project on GitHub then you are more than welcome to do so. Open bugs, suggest features and send pull requests are all appreciated.