Progressive web applications (PWAs) are web applications that cross the boundary between web and app. They run in your browser andcan be downloaded to run as standalone apps. With support in the latest builds of Microsoft's Edge browser, they’re now a full-fledged part of the Window ecosystem, with big names like Twitter implemented as PWAs and available through the Windows Store.
I first looked at building PWAs in Windows last year, when Microsoft announced details of its approach to working with PWAs. The tools available then were mainly web-based, but that's been evolving. For example, there are already points of contact with popular editors, and Microsoft is working to add more features to the PWABuilder web-based app-conversion tool. So it’s worth taking a look at how you might go about building a PWA today.
It’s clear that Microsoft wants to make PWAs a first-class citizen of its Universal Windows Platform (UWP) ecosystem. But for now, you’re still limited by the available tools. Everything you need is there, but it’s not integrated. I hope a future Visual Studio release will bring it all together, from code to manifest to testing. Until then, you need to put together your own tool chain and make sure it’s kept up to date.
Running PWABuilder locally
Available from GitHub, PWABuilder was originally known as ManifoldJS, where it supported building cross-platform web-based apps. While much of the old naming is still in the project, it’s now a much more complex application with a focus on PWAs, built using Vue.js and able to run as a full-fledged web application or locally using Node.js. A Macintosh-based desktop app is also under development, though it’s not quite ready for prime-time, as is a Visual Studio Code extension.
Installing the local version is easy enough. It’s available via NPM, the Node.js package manager, and will run as a local web app or as a command line tool. Once installed, you can start building your PWAs from existing web content.
If you want to use the web UI locally, I recommend getting the latest version from GitHub. If you clone the repository, you can also make your own changes to the code. It’s a fairly active repository, and there’s the option of making your own pull requests to add your new features to either the UI or the underlying PWABuilder code.
Adding manifests and service workers
Building PWAs from the web UI is as easy as giving PWABuilder a URL. It scans the site and picks up appropriate details for the PWA manifest. You can edit these as necessary and add appropriate app icons. Once a manifest has been generated, you get a list of suggestions for any missing elements; for example, for icons needed by the Microsoft Store or by Windows 10. It’s a good idea to add these to your site before finalizing the manifest, because it’ll be rejected by any submission testing tools without a complete manifest and the required files.
Once you’ve built your PWA manifest, you are given a set of suggested service workers for your app. Code displayed in PWABuilder needs to be downloaded and then installed on your website. More complex service workers—for example, providing back-end support for a single page application with network connectivity to application APIs—need to be developed outside PWABuilder, though you can still use it to package and deploy them. Sample code for PWABuilder’s service workers is available on GitHub with the application.
The simplest option is to restrict operation to connected apps and to deliver an offline page when connectivity is interrupted. More complex options include caching data as it’s viewed or preloading specific pages for offline viewing.
If you’re targeting Windows 10 from PWABuilder and using a local installation, you need to install the Windows 10 module. This gives you access to UWP APIs, though obviously it does reduce the cross-platform capabilities of your apps. Installing the module is easy enough; it’s hosted on NPM, so all you need is a quick NPM install and then add a platform variable that points to the module as part of your Node.js setup.
Once you’ve built your app and added calls to UWP APIs in your service workers, you can quickly publish to a packaged app from the CLI, or you can use the web service to create an .appx file for your site. You need to have an account on the Windows Dev Center if you plan to publish through the Windows Store, and you need to reserve your app’s name in advance so that the PWA manifest and store listing match.
Using Visual Studio Code with PWAs
One alternate option comes from another Visual Studio Code extension available from the Visual Studio Marketplace. Once installed, the PWA Tools extension is a quick way of building a PWA manifest for existing JavaScript applications. As well as helping construct your PWA manifests, it offers a set of JavaScript snippets that can speed up construction of service workers and appropriate event handlers.
It’s not surprising that both PWA Tools and PWABuilder are targeting the Visual Studio Code programmer’s editor, rather than the full Visual Studio IDE. Microsoft’s been working to position Visual Studio Code as its main JavaScript development environment, so having PWA support makes sense.
Although you can use Visual Studio Code’s PWA extensions with raw JavaScript, you’ll have more success building on top of Vue.js or Angular. Frameworks like these implement common application design patterns that are easier to adapt to working with service workers than a basic HTML/JavaScript app. I recommend using the MVVM pattern for your PWAs, because its declarative approach to UI development has a lot in common with the PWA application model.
Using Visual Studio with PWAs
Visual Studio will soon have native support for PWAs, with a beta version offering support as an option when building UWP JavaScript applications. If you’re running a production version of Visual Studio, much of the functionality needed to create PWAs is available through the Hosted Web App project type. Debugging is handled by Edge’s standalone DevTools, which can attach to a running PWA and let you debug it like any in-browser app.
Another tool that can help with PWA development is Webpack, which bundles your app’s resources into a single JavaScript object. By bundling noncode elements into your code, you both streamline deployment and make it easier for your code to load and use these objects. Webpack isn’t for beginners—it takes time to master. But once you’ve started using it, Webpack will become an essential element of your web application development tool chain. Because it helps you control the elements you use in your code, Webpack is useful not just for for building PWAs but for complex web apps built in TypeScript or in Electron cross-platform code.