Bringing PWABuilder to VSCode
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.
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.
Icon generation
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!
