Building a PWA was our best idea ever

Kevin Basset
Jul 27 · 7 min read
Image for post
Image for post
The Coronavirus App has been helping the world track the spread of COVID-19 since January 28

Earlier this year, we built the very first COVID-19 PWA, humbly named “The Coronavirus App” (if you can’t access this link, check this). Progressive Web Apps (or PWA) are great. They offer the best of both worlds: they look and feel like native apps, but under the hood, they’re actually websites — built with standard HTML, CSS and Javascript.

In these turbulent times, the fact that The Coronavirus App was a PWA didn’t just help — it was probably one of the main reasons for its success.

Regain control of your own app

We were able to launch our PWA very quickly. We came up with the idea for the app on January 25. Then launched it on January 28. 3 days from idea to launch is the kind of turnaround that’s simply impossible to achieve with native apps. Publishing an Android or iOS app requires uploading it on their respective app stores. The initial review process alone — Apple/Google checking that your app contains no shenanigans — typically takes longer than that.

ABC News had a segment about the Coronavirus App on February 3rd.

Being able to launch quickly meant we maximized our changes of getting press coverage. And in fact, we got amazing coverage by Business Insider, Forbes, ABC News and many more.

The app you see now when you access the domain coronavirus.app also looks fundamentally different than it did when we launched it. In 7 months since launch, we were able to make hundreds of small updates and at least 3 complete design overhauls. We were able to iterate very quickly on feedback from our users. Deploying a new version of the app is fast — less than 2 minutes with the Firebase CLI tool we’re using. And there’s no need for approval from the app stores. We deploy the app, change the version number to make sure our users’ browsers automatically get the latest versions of all the files, and we’re done.

A couple of months after launch, Google and Apple both announced a ban of coronavirus-related apps not approved by a national government or medical institution from their respective app stores. We got super lucky there. Had we chosen to launch the app on the stores, it would have been taken down a few months later.

With PWAs, it’s your domain, your client code and your server. You have control over everything.

You get to keep 100%

If you use in-app purchases, you’ll have to pay 30% of your revenue to Apple and/or Google. And if you don’t want to use in-app purchases, well… you won’t be able to charge users in your app at all (in theory at least).

The promise of the app stores was to be distribution channels. Ten years ago, you could publish an app, and that alone would get you new users. This was absolutely fantastic.

Does this still make sense in 2020? There are approximately 3 million apps on Google Play. Try uploading an app, then do nothing else. Chances are you’ll get a grand total of 2 downloads: you and your co-founder.

For developers, it seems that app stores have become a necessary evil, rather than a helpful tool. They don’t do what you’d expect them to — that is, be a distribution channel — but they still charge you big bucks. More and more companies are moving away from in-app purchases, but even that is also not without a few hurdles.

With PWAs, there’s no app store and no in-app purchases. You can implement whatever payment system you like (if you haven’t yet, try Stripe). And you get to keep all of the $$$ you worked hard to earn.

Less code, better products

One of the greatest things about PWA is that there is only one code base to maintain. Sure, you could use React Native, but it definitely feels like a workaround rather than an actual solution.

Building your app as PWA makes it much faster and straightforward (unless you’re one of those Javascript haters, in which case, too bad, you’re out of luck!).

Our entire Coronavirus App is terribly simple to maintain and update, because it’s essentially 3 files:

  • Server.js (180Kb) running on Firebase Cloud Functions , which contains all the code for our API along with all the scheduled functions we’re using to scrape data from government sites. It also contains our basic HTML template in which we added the Progressier script to give the app all the features of a PWA.
  • Client.js (197Kb), which contains all the front-end code that your browser will execute when you access the app.
  • Style.css (125Kb), which contains all the CSS.

(In addition, the only three third-party client libraries we are using are Leaflet for the map, Charts.js for the charts, and Moment.js for all the cool stuff you can do with time).

PWAs feel like a natural evolution of the web — making it always faster and easier for developers to build things at scale very quickly. Heck… that even makes it easy for non-developers. After all, the Coronavirus App was developed by a marketer.

When Facebook launched in 2004, they had to buy/rent and maintain servers. Now we have AWS, GCP and Azure so we don’t have to care about anything going on in the underlying infrastructure. And since it’s also what powers the biggest tech companies on the planet, you can be pretty damn sure the infrastructure itself is top-notch.

Image for post
Image for post

March 23 was our very best day ever. During these 24 hours alone, The Coronavirus App received 2,182,787 users and 4,822,155 page views. This is what it took to bring the app to its knees. We hit a hard limit to the volume of GPU invocations Google Cloud Platform allowed, which resulted in the only 2 hours of downtime we had since launch. Luckily, Firebase support increased our quota very promptly. This was a rare event. Most apps are unlikely to ever hit this limit.

The way I see it, Progressier is on a similar mission with apps: building the underlying infrastructure of modern apps — which will live directly on the web, free from the constraints of native apps — so you don’t have to care about what’s going on behind the scenes.

The feature gap is shrinking

It’s not all black-and-white, though. PWAs also have drawbacks. There’s a gap between what you can do with a native app. And you can do with a PWA. But that gap is shrinking year after year.

Since your PWA is running in your users’ browsers, there are a few annoying things to pay attention to. Different browsers interpret Javascript and CSS slightly differently. So for every feature we built, we had to test it on Chrome, Safari, Firefox, Edge, and on a Mac, a PC, an iPad, an Android tablet, a recent iPhone and an older iPhone. It can be tricky to make a particular thing work perfectly everywhere, so you resort to some ugly hacks.

Funny story — as I’m not an Apple user, I used to squat the basement of the beautiful flagship Apple Store in Taipei. I would code, deploy, then go around the store to test my changes on every Apple device I could put my hands on. That was before I found this amazing product called BrowserStack, though.

Image for post
Image for post
Unsurprisingly, we rank #1 for “coronavirus app” on Google

Also, if you’re lucky enough to buy a domain that looks as pure as coronavirus.app, you’ll definitely enjoy the SEO boost that comes with it. PWAs make apps more accessible. Nothing to download. Nothing mandatory to install. No searching to do. You type the URL, boom, here is the app.

A good step in optimizing online conversions is reducing the number of steps required to reach the end of the process. PWAs are doing exactly that. Fewer steps to get the app, better odds that people will actually use your app.

In fact, several business highlight significant improvements in a wide variety of key performance indicators after PWA implementation, like increased time spent on page, conversions, or revenue.

A very neat feature of PWAs is the ability for people to install your app on their phone (and their desktop!). Being able to occupy space on your users’ home screen is obviously very valuable — and great for retention.

PWAs are great. And I don’t think the Coronavirus App would have been used by 10+ million people if we hadn’t made it a PWA.

It also inspired Progressier, which will soon allow anyone to use our PWA implementation in their own sites and apps, free of charge. And by the way, our revamped PWA implementation will be 7x to 10x better than what we did on the Coronavirus App.

Excited about Progressier? Questions about The Coronavirus App? Let us know in the comments below.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

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

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