Amrutha Srinivasan
Sep 19 · 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

Amrutha Srinivasan

Written by

PWABuilder

medium for PWABuilder team www.pwabuilder.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade