Bringing PWABuilder to VSCode

Amrutha Srinivasan
Sep 19, 2019 · 3 min read

Hi! I’m Amrutha Srinivasan, and I was an intern at Microsoft this summer. My intern project involved designing and developing a Visual Studio Code (VS Code) extension for PWABuilder. Progressive Web Applications (PWAs), as the name suggests, are progressively enhanced web applications that can behave like a native application on any platform. To learn more about PWAs, click here and here.

Why use the VS Code extension?

While the PWABuilder website caters to a large sector of web developers who already have a published website, the VS Code extension offers an experience that allows web developers to seamlessly integrate key PWA components into their codebase during the development phase. This is especially useful for web developers who are building PWAs from scratch. It also offers more guidance than the website since not only does it provide the user with the components, but also adds the required files into the code base with minimal user intervention. In other words, you can convert your web application into a PWA with just a few clicks!

Top Features

Manifest and Service Worker Generation

There are two key workflows in this extension. The first is a manifest generator, which creates a manifest file for a PWA according to user specifications. All the user has to do is answer a small number of questions, and it will create a fully functional manifest file, following the standard W3C guidelines.

Manifest Generator in PWABuilder extension
Manifest Generator in PWABuilder extension
Manifest Generator in PWABuilder extension

The next workflow is for service worker generation, which works much like the service worker feature on PWABuilder.com. It lists different types of service workers that are available, and the features that they offer. Just select a type of service worker, and it is automatically integrated into your project.

Service Worker Generator in PWABuilder VS Code extension
Service Worker Generator in PWABuilder VS Code extension
Service Worker Generator in PWABuilder VS Code extension

Icon generation

Application tab open on Developer tools in browser displaying manifest details
Application tab open on Developer tools in browser displaying manifest details
Application tab open on Developer tools in browser displaying manifest details

The PWA manifest allows us to specify icons of different sizes that can be used in different contexts. The manifest generator only needs one icon to be uploaded by the user, and it will generate the rest on its own!

IntelliSense

This is my personal favorite feature. If you’re not familiar already, IntelliSense is a feature in Visual Studio Code that gives you inline docs, code completion and more as you type. For this extension, I added IntelliSense features for Web Manifests that helps you understand exactly what an entry in the Web Manifest is for, just by hovering over words! This feature will also suggest recommended settings for certain features in your manifest.

These features help you understand what each part of the Web Manifest is for and gives you guidance on how to build out the best manifest for your PWA.

Moving forward, this extension is open-source and the source code is available on GitHub. We would absolutely love feedback and community contributions to make the extension better and are always looking for ways to make it easier to develop PWAs.

To get started with the extension today you can install from here!

PWABuilder

medium for PWABuilder team www.pwabuilder.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store