Progressive Web Apps (PWAs) are growing in popularity and are growing in importance for web developers. Let's—gently—dive into the basics.
Progressive Web Apps (PWAs) have increasingly become an important topic for web developers. If you've ever spent any time looking into the subject, it can be… a bit overwhelming. What I hope to do in this article, and the ones that follow, is gently, and slowly, introduce you to the basics of PWAs, what they mean to me, and give you practical advice on how you can start building PWAs today. In the final installment, I'll share a simple but complete PWA that you can use as a starting off point for your own applications. I'll also share plenty of resources along the way that can help you learn more.
PWAs are new to me as well, so please let me know in the comments if you think I've made a mistake, or perhaps when you simply have an alternative take on the subject matter. Remember that the end goal of all of this discussion is a "Better Web" for your users. A theme you will see me repeat throughout this series is to take baby steps. You don't need to convert your site over to a "complete PWA" overnight. Every small step you make in improving your app is a good thing. Never forget that!
Let's break it down. When we say a web app is "progressive", we are saying that we are using an application that is progressively better for more modern web browsers but still works perfectly fine for older browsers. Ok, so what's a real example of that? Imagine you're building an application that browses product data. In order to improve performance, you could cache a lot of data about the products in the browser. How? By using IndexedDB, a browser native NoSQL solution. This is a great feature that will improve performance in browsers that support it. But for browsers that can't use IndexedDB, they can still browse product data by making requests to the server. When, and if, that particular browser is updated to a newer version and it supports IndexedDB, then they begin to gain the benefits you built into the site. But the crucial part is that the older browser is not blocked, or prevented, from using the site.
Hopefully I don't have to explain "web" - spoiler - you're on the web right now.
The final part, "app", is a bone of contention for me. I think there's room for disagreement over what constitutes a web "app" versus a simple content site. A blog, for sure, isn't really an app. GMail is undoubtedly an app. Your bank, however, may be a combination of both. It could have a large set of 'simple' pages regarding mortgages, accounts, and other terribly exciting stuff while also having a more traditional "app" view for managing your account.
However - every site can benefit from the features of a PWA. So don't go into learning PWAs as thinking you must be building a SPA (single page application) or something else fancy. Even "simple" sites will benefit from turning into a PWA.
Ok, but what is it, really? In some regards, you can think of PWA like any old marketing term. That may sound dismissive, but if you remember for a while, "Web 2.0" was used in a similar way. All "Web 2.0" really entailed was using Ajax to dynamically refresh content on a web page. (You could also include things like user generated content as well, but you get the idea.) The term "Progressive Web App" was first coined by Frances Berriman and Alex Russell way back in 2015. Initial discussions of the topic involved a set of guidelines and a core baseline of functionality that a PWA "should" have.
And once again - allow me to get on my soap box. The set of guidelines that follows will be a bit intense. Remember - you are not required to do every single thing on this list!! Any one thing you do will be an improvement.
Now it's time to get into the nitty gritty. Let's go over the basic list of what a PWA entails. This list was sourced from the Wikipedia article on PWA. Try to remember that these guidelines are just that - guidelines. Exactly how these are implemented will vary wildly depending on what you are building.
So now you know what should be in a PWA, but how is it actually implemented? In general, the tech stack consists of three aspects.
And that's it for the first installment. In the next article, I'll start introducing you to the manifest. I'll cover what it supports, how to add it, and how to confirm it's working correctly. Let me know what you think so far by leaving a comment below.
Raymond Camden is a senior developer advocate for Auth0 Extend. His work focuses on Extend, serverless, and the web in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at firstname.lastname@example.org.