Using PWA Studio in Visual Studio Code

The big debate in Windows development has always been how to build your application’s user interface. We’ve been spoiled for choice, and every time Microsoft unveils a new front-end framework we’re left trying to work out whether this new tool will do what we need. Now we’re juggling Electron, Win UI, Win32, UWP, WinForms, MAUI, Flutter, and others. Each entails a new set of APIs, new SDKs, and much more.

Building native user experiences like this is the way to deliver high performance. But it has its limitations, often tying applications to one platform and requiring additional deployment infrastructures. The evolution of the modern web has given us an alternative: PWAs (progressive web applications), which mix a common set of device-level APIs with an HTML/CSS/JavaScript UI.

Microsoft and PWAs

Microsoft has been a strong proponent of PWAs, offering support for them in the Microsoft Store and providing simple tools to install and manage them through both the Windows Start menu and inside its Chromium-based Edge browser. On the tool side, the company is investing strongly in PWA support in Edge’s F12 developer tools and sponsors the development of the PWA Builder toolkit.

PWA Builder is a web-based tool (which can be installed as a PWA from your browser) that takes a site URL and walks you through the process of building it as a PWA. It helps generate the appropriate manifest for your PWA, then configures basic requirements before guiding you through the submission process to deliver your PWA to most common app stores. It’s an effective way of going from web UI to PWA, adding capabilities like offline operation along the way.

Not all PWAs are converted from existing web applications. In many cases you’re likely to be building a custom internal tool. Although PWA Builder can help here, it’s still taking your code outside your toolchain. What’s needed is a way to embed it inside familiar development tools while still automating much of the PWA development process.

Introducing PWA Studio

That’s where the recent launch of PWA Studio comes in, offering much of the PWA Builder functionality in a Visual Studio Code plug-in. Available in the Visual Studio Marketplace, it’s a quick download that adds a PWA Studio extension to your standard web development environment. It sits alongside other Visual Studio Code extensions, so there’s the advantage of adding extra extensions to give Visual Studio Code support for Edge’s dev tools and networking analysis features, giving you much-needed debugging tools as part of your PWA development process.

Installation is quick and easy, with the PWA Studio adding its own project pane as well as new command verbs in the Visual Studio command palette. Once installed, it opens a walkthrough that guides you through building your first PWA. This clones the existing PWA starter app into a local Git instance and starts the download of required and recommended Visual Studio plug-ins if they’re not already installed. These include the Prettier JavaScript formatting and linting tools, as well as npm support. The project recommends adding the GitLens tools for working with GitHub and Firefox’s debugger so you can test your PWA in additional browsers.

If you have an existing web application, open it in Visual Studio Code (preferably copying it to a new development branch) and then use the PWA Studio tools to convert it into a PWA. You can quickly add a manifest and service worker before starting to customize code for offline use.

Code’s command palette is the quickest way to interact with PWA Studio. Open it and start typing “PWA” to use its built-in filter to list all the PWA Studio actions. These offer quick access to key features, such as quickly generating a service worker for offline support. Some key commands are duplicated in the extension’s project pane, which combines them with a checklist of required elements. This is a useful way of working with the Studio; if a key element is missing, you can use the project pane to quickly add the basic code, ready to flesh out with your specific features.

You’ll need to toggle between the PWA Studio pane and built-in Explorer view. Switching to Explorer will show the pre-generated scaffolding for a PWA, with a mix of TypeScript, JavaScript, and JSON files. The markdown ReadMe file details what’s included, as well as the PWA Builder teams’ self-described “opinionated” views on best practices. As their code is running in the wild, it’s a good place to start when thinking about what should go into your own PWAs.

Building a PWA in PWA Studio

It’s interesting to note how much of the PWA platform is cross-industry. The bundled service worker in the PWA Studio sample code is based on the Google-sponsored Workbox framework. This makes a lot of sense, as Workbox offers a set of prebuilt packages that can simplify building out complex service workers. For example, it includes tools to handle background synchronization for offline operation, support precaching files, and work with streamed content sources.

The Workbox packages are used by many ChromeOS applications and should work well in any modern Windows browser. As they’re generic, they’re ideal for building PWAs that work across platforms. They are a useful proxy for browser network operations, providing a caching layer that can support switching from connected to disconnected without affecting your users. Running all interactions through a cache ensures that users are working with last-known good data, with server-side code managing consistency between users.

Building a PWA is one thing; ensuring that it’s correct is another. PWA Studio’s built-in validation tools are perhaps the best reason for installing it. In its project pane there’s a set of validation tools that walk you through preparing your code for the web and for stores.

The first tool checks your code’s manifest. All PWAs need a manifest to list the files that make your app, including icons and shortcuts. Not all elements are mandatory, so click on the information icon next to warnings to determine if you need to provide fixes before publishing. If you don’t have a manifest, PWA Studio provides a form to help you create one based on your code.

Similarly, your PWA will be checked for a service worker. If you need to produce one, the PWA Studio tools will install the Workbox CLI and run its wizard to help create a basic worker. An advanced option provides an extensible framework for more complex operations, allowing you to add OS-integration to allow a PWA to work with local files and resources.

Once built, a PWA needs to be published to the web. As PWA Studio integrates with Azure Static Web Apps, you can take advantage of its GitHub-based workflow to create an Azure-hosted endpoint for your application. This works with the Edge developer tools to test your code before packaging the manifest and icons and delivering them to your choice of app stores. Using Azure Static Web Apps means that GitHub pull requests automatically update your PWA, and your users will get the new version next time they open it.

PWA Studio is an interesting example of what can be done with Visual Studio Code. With its support for both JavaScript and TypeScript, you can use familiar tools and techniques to build and test a web application. The sample application shows you’re not limited to its tools and can mix and match your choice of JavaScript and browser extensions to ensure your users have the best possible experience with a PWA, from installation to connected and disconnected operations.