I suspect you’re here because you keep reading about this thing called a Progressive Web App, but no matter how much you read, it never makes any more sense.

By its very nature, it’s a confusing concept. I just put the finishing touches on my own Progressive Web App, Anonynote, and in trying to explain it to people, I realized that I didn’t fully understand it myself. Not in an effective student-teacher relationship sort of way. I found this concerning. What, exactly, did I spend the better part of a year creating?

So really, I’m writing this for me—to put my own work into some kind of perspective. But I think you’ll find it useful, too. I’m going to make every effort to explain the mysterious Progressive Web App (PWA) in a manner that even a layman can understand.

TL;DR

Progressive Web Apps are difficult to explain because they aren’t actually a new thing. It is rather a leveraging of existing web technologies toward the creation of a specific type of end product.

A little history

Wikipedia provides an abbreviated history. It goes back over a decade, but PWA’s have only become what they are today because Google invested their immense efforts behind it. Here’s Google engineer Alex Russell writing about PWA’s in 2015. A few years later, Apple and Microsoft felt obliged to keep up.

If you’re wondering why there isn’t a hyperlink on “Apple”, it’s because they’ve been mum on the entire topic. Their support for PWA’s is tepid and begrudging at best. But, with their no-fanfare introduction of Service Worker support in iOS 11.1, they’re effectively on board.

That’s everyone who matters. With the support of these companies, you can count on PWA’s becoming a big thing.

Until the next big thing replaces it, of course.

I know, I know. Let’s just get this out of the way.

Google’s driving this ship. You can start here, if you want to learn basically nothing. You can then move on to here, if you want to learn the difference between a merely “baseline” PWA and an “exemplary” one. If you’re feeling especially adventurous, you can check out this comprehensive Medium article from Amberley Romo, which will give you a roundup of PWA criteria and attributes according to other web giants and pundits.

But good god, what does any of this mean to the average person? It reads like a series of laundry lists, all of which—added together into a rote mathematical summation—equals Progressive Web App? Tell me it isn’t that convoluted!

Well… it kind of is.

If, as a developer, you’re not ticking off all these boxes, Chrome doesn’t think you’re operating a proper PWA. Just to be extra confusing, here’s what Edge, Firefox, and Opera think a PWA is. Fall short, and your app will not be installable. You’re just running a regular website.

Details matter, and since everyone writing about PWA’s is a developer, their heads are swimming in these details. That’s all they focus on. And in the quest to convey all the ins-and-outs, they fail to adequately explain what, precisely, PWA’s are on a foundational level.

Explain it to me, Johnny Layman

Alright, Johnny. Here’s how it is:

The peoples of the world speak different languages: English, Spanish, Mandarin, Arabic, and on and on. Just so, the digital devices of the world run on code written in different languages.

Front-end web development, i.e. the website you’re currently on, largely consists of HTML, CSS, PHP, and JavaScript code. But, you can’t create mobile apps with those languages. Android utilizes Kotlin, Java, and C++, while iOS prefers Swift and Objective-C.

The next time you visit a site like Gmail, consider this: that website in your desktop browser, that’s one version of Gmail. The Android app? That’s an entirely separate product. And the iOS app is different still.

All one entity—all built upon the same back-end—all working with the same data (your emails)—but all separately maintained products written in different languages.

What if we didn’t have to operate in these programming language silos? What if we could all rally behind one banner?

Well, what about the modern web? The internet is the great unifier. We all play in this sandbox. Couldn’t we apply the standards of the web to the apps we run on our multitudinous devices?

That’s the promise of the Progressive Web App.

A regular website, written in regular web languages, could be—in addition to a website—an app that runs on any mobile device, be it Android or iOS. One product for every medium; one unified user experience; and for developers, one product to maintain.

The modern web is flexible and robust enough to provide an experience every bit as similar to a mobile app. All it takes is the right set of ingredients—certain key concepts like responsive design (scalable to any screen size) and proper caching policies (offline accessibility). If those many standards are met (hence the laundry list) BAM. It’s a Progressive Web App.

PWA’s are confusing precisely because they aren’t something new. The concept is to leverage existing web technologies toward the creation of a specific type of end product.

Earlier I mentioned my recently completed PWA, Anonynote. This was not a new product; the earliest version of it has been running on its own site since 2016. But I made it my goal at the start of the year to transform it into a Progressive Web App.

I didn’t have to throw it out and start from scratch. I didn’t have to add any programming languages that weren’t already in use. I simply added functionality.

I implemented the IndexedDB API so that, in addition to storing data remotely via MySQL, I could store it locally as well. I also added a Service Worker, tapping into Workbox, which allowed me to cache my site’s files. With these two methods combined, the application could function entirely offline, just like a mobile app can.

There was more to it than that, but those were the big additions. If you want to peek under the hood, the entire application’s code is available on GitHub.

And here’s the most important part: it didn’t stop being a website. It’s still available at anonynote.org for anyone to access from any web browser on any device. But in addition to that, you can add the icon to your mobile home screen and launch it in its own window, just like a native app. And if you do that, there is app-like functionality that only runs in that environment.

It’s a website and an app, but it’s not two products—it’s one.

Put a bow on it, Petersen

What is there left to say?

A lot, actually. I could go on and on about PWA’s. Plenty of people have. But I’m going to leave the excessive details to others and stop here.

In summation: Progressive Web Apps aren’t a new thing, and that’s the whole point. It’s a response to the disconnect between the modern web and the mobile app ecosystem (and the schism between Android and iOS) and asking, hey, wouldn’t it be great if we just used core web languages to develop everything? Wouldn’t that benefit developers and end users alike?

It really would.