PWABuilder 2.0 and beyond!

Justin Willis
PWABuilder
Published in
4 min readApr 18, 2019

Progressive Web Apps open many new doors for web developers. We now have advanced APIs that help our apps deliver first-class experiences on users’ devices, on mobile and desktop . As the web evolves and becomes more complex, there is more need than ever to make these new technologies consumable by developers new to the web so that we can enable everyone to take advantage of these powerful new APIs.

To help serve this mission of essentially making PWAs easy, a community led by Microsoft started the PWABuilder project about 2 years ago. PWABuilder is a PWA that easily takes a normal web app / web site and transforms it to a PWA. (Bascially… PWA inception, right?). While the tool has been working great for hundreds of devs, we wanted to update the tool to make it easier to use and to help developers take their PWA just a little further. We have been hard at work behind the scenes updating the tool and just a few weeks ago released the 1.9 update. That update introduced some of the new concepts we have been working on, such as providing a “report card” for your PWA and bringing the Microsoft Graph to our ever growing list of snippits!

Today we are expanding on those updates by announcing the new 2.0 release! PWABuilder 2.0 includes an all new design that is much more user friendly, new snippits to help you easily use new web APIs such as the Web Share API and the async Clipboard API and sets us up for many more exciting features coming down the road.

New Homepage in PWABuilder 2.0
New Hub page in PWABuilder 2.0

New Design

We are very proud to show off the new design for PWABuilder 2.0. In these screenshots I have PWABuilder running as an installed desktop PWA which is my favorite way to enjoy the new design 😊. Central to our new design is the Hub page which you can see in the above screenshot. This hub page gives you information on your Manifest, Service Worker, basic Site security and links to some of our top snippits all at a glance. From this page you can get to any functionality in the app.

Feature Store

We also updated our old features section into the new Feature Store!

New feature store in PWABuilder 2.0
Looking at the Auth snippit in PWABuilder 2.0

The Feature Store gives you a bunch of “snippits” that you can easily copy and paste into your app to immediately start using new advanced web APIs such as the async clipboard API or supercharge your app by tieing in to the Microsoft Graph using our Graph snippits. We are hard at work on including even more snippits in the Feature Store. If you have an idea for something that could be included feel free to open a feature request on our Github !

Upcoming Updates

We are currently working on the 2.1 update which will update the design in the manifest editor and service worker picker pages and will include a new way to easily package your PWA as a Trusted Web Activity to enable you to ship your PWA to the Google Play store! Also, as some of you have pointed out PWABuilder currently does not support mobile well. This is because the app has historically been desktop focused, but we are slowly working on making sure it works well on mobile. The 2.0 update has some improvements in this area, but we have many more coming.

We also have other ideas that are on our roadmap including integrating Workbox into our Service Worker picker, new Snippits for the Feature Store, and potentially integration with Webhint to enable deeper testing of your PWA!

You can keep up with the latest features and updates by checking out the preview version of the app at https://preview.pwabuilder.com. PWABuilder is also completely open source on Github so we would love to hear what you think about PWABuilder 2.0, any issues you run into with it or any ideas you have for features!

--

--

Justin Willis
PWABuilder

Program Manager at Microsoft (on the PAX Web team) helping push PWAs forward. Formerly dev relations at Ionic.