In the first part of the series we’ve covered the easy way to publish your Progressive Web Apps to the Microsoft Store as they are. While there are benefits from doing just that and stopping there (discoverability and promotability in the Store, basic stats, etc.), you likely want to take advantage of additional opportunities that open by running as a native Windows app and having access to the majority of Windows APIs.

In this part we will cover the processes and tools you can use while developing and debugging those extra features that light your app up on Windows 10.

Microsoft Edge DevTools

The first thing you want to install is Microsoft Edge DevTools [Preview].

This lets you use the same dev tools you would use in-browser just with a PWA installed as a native app.

You can continue developing your PWA as you did before and use developer tools built into your browser of choice but you can only access Windows APIs when running as an app and for tweaking and debugging that you will need this tool. As expected, you can analyze and tweak your (someone else) PWA using the DevTools.

Developing on localhost

When you generate a package from your published PWA with PWABuilder you can install it on your local machine and test it out before publishing to the store, as we’ve discussed in the previous part.

This is great, but it loads the app from your web site and pushing every change to the server to be able to test it in the app is not how I imagine a pleasant development process.

So, let’s discuss how we can point the app to our local development server and work with it the same way we are used to working on a web app.

There are 2 ways to accomplish this: one includes using Visual Studio 2017 a tiny bit, and the other one lets you avoid using VS2017. Unless there’s a serious reason why you want to avoid using Visual Studio at any cost (and it’s free) I recommend the first route. But I’ll cover the other one as well.

Visual Studio 2017

Visual Studio 2017 Community edition is a free IDE that lets you build various types of apps. You can obviously use a paid version as well, but for our purposes the Community edition has everything that we need.

Just make sure you’ve ticked “Universal Windows Platform development” workload during installation.

Once installed, launch it and create a new project. Select JavaScript > Windows Universal > Progressive Web App (Universal Windows) as a template.

Now you want to set the start page for the app you’ve just created to point to your development server: