PWA? What They Are & Why They Matter
Understanding Progressive Web Apps (PWAs), who’s using them, and why you should know about them. If you want to build an App, read this first.
TL;DR:
+PWA: Progressive Web App: browser app with superpowers
+Downloading PWAs looks a little different on every OS
+PWAs run on simple browsers and a background service worker
+PWAs can do most things but miss out from some hardware stuff
+PWAs are gaining momentum, especially with streaming games
+PWAs will take over the world, bring your manifest & service worker
+Doing PWAs right is a bit more complicated than a nice manifest
Intro
PWA… You may have heard this term before and it’s possible you thought it was just some newfangled fad technology. I’m here to tell you otherwise. Most articles I write because I’ve spent dozens of hours trying to figure something out for myself and want to create a comprehensive guide to what I’ve learned. This is different. I’ve been talking for years with technologists like myself about the evolution of applications and the implications of cloud & web technologies for the greater development space. I’ll try no to wax too philosophical but this is definitely a long time coming.
What Is A PWA
The PWA, a TLA* for Progressive Web App, is basically a web app that is able to be accessed through its own native icon rather than opening a URL in your browser. So then, what’s a web app? I will be dropping a future article about this (so subscribe! :D) but for now let’s just say it’s an application built on technologies run on your web browser. Unlike what’s expected from static websites, Web Apps and thus PWAs are able to have highly interactive and complex user interfaces like what’s expected from your regular desktop or mobile app. Much of the processing is done on a remote server which is now more viable than ever with highly reliable/cost-effective shared cloud hosting. Web technologies have continued to evolve allowing for things that weren’t an option a decade ago and one of those is a PWA that acts and feels like a native app.
Using A PWA
PWAs are downloadable like a normal native app, but not from your normal places. If you want an example of a PWA to test things out with go to app.starbucks.com/. With PWAs you download the app from the browser you are accessing it from, so the experience will be slightly different depending on the browser (and some like Chrome on iOS don’t work as of 2020). For Android your browser should pop up a prompt to download the app if the PWA is configured correctly. On Chrome for desktop you just go to the top right stack of dots and look for the option “Install …”. Edge for Windows is in the top right “…” menu under “Apps” and there should be an “Install …” option. On Safari for iOS you use the “Share” button (arrow pointing up out of box) and click “Add to Home Screen”. Now that it’s installed it should act just like you would expect it to.
How They Work
PWAs work by running the web app in a(n often) stripped-down version of the browser which is given its own icon. The application also starts a process called a service worker, which manages caching certain information and receiving pushes from your server. These two technologies allow for your cloud native application to feel like.. well… just a native application (whether on mobile or desktop). Not only do PWAs provide the user friendly icon and store information (for offline use), the push updates allow for users to get notifications when the app isn’t open(except iOS… still waiting). What else could you ask for?
What They Can’t Do
You couldn’t ask for more.. well you could, but not in many cases. Some people like to over sell these problems, others under-sell; I’ll try and split the difference. Let’s start with the glaring problem… iOS STILL hasn’t enabled push notifications for browsers, so if you intend for a lot of outside app engagement, you are missing half your population. Though there are workarounds using other messaging solutions. This along with the lack of access to other hardware, whether on iOS or both, limits the multi-layered hardware interaction necessary for some complex apps. That said, most things don’t need Bluetooth, ARKit, altimeter & battery info. Web solutions still have access to core interactions with GPS, audio/video and pictures. Though connecting to other apps like native social apps are a no. You also have limited local storage and you can’t manage the apps quite like a native app (especially in iOS).
What’s The Hype
PWAs have been slowly building support over the last several years. The “progressive” part really got going around 2015 on Android, but Apple (though first mover in web apps) dragged their feet, still adding necessary support even in 2020. Desktop browsers got support in 2019 but even before that big name companies have implemented PWAs as part of their distribution strategy, or even for strategic functional offerings. We’re talking big names like Twitter, Starbucks, Google, etc. These individual implementations don’t seem to be all that Earth shattering, mainly because they were often just copies of their App Store counterparts. However, recent news changes that. Because of Apple’s restrictive App Store policies Google, Nvidia, and Amazon are pushing their streaming based gaming services exclusively as PWAs! And ironically, Apple is encouraging the open web as the solution to their restrictive rules for companies who have complained.
This is likely the beginning of a turning point for the PWA as a considered total alternative to native application development instead of an afterthought add-on. There are definitely motivations to break away from the curated native application orifices and continue to move web technologies forward. With actively improving frameworks, quality web app development is becoming more and more capable and cost effective. And as we get a larger variety of hardware interfaces which we see the digital world through, having a flexible web based app makes more and more sense. Ultimately what I’m saying is… that web technologies are starting to fill in all of the gaps that other technologies have for so long. Things are moving away from personal hardware control to cloud control, which has been the expectation many technologists including myself have posited for years.
When You Should & Shouldn’t PWA
But quick, before you jump on the bandwagon, let me throw out some suggestions. Just remember these are guides not prescriptions for every situation. In most cases I would encourage PWA especially for initial MVPs. However, if you have an app using special hardware on the phone like a Bluetooth beacon, you will probably still need to go native app. If your app is totally focused around cloud based content sharing (like a photo sharing app) consider going PWA, especially if you want to encourage low friction interaction (no download required). If you need constant notification flows (especially to iOS users) you may need a native app, though I would encourage holding out and trying other notification solutions like email/SMS (I’m hopeful we are close to that iOS barrier falling). If you want the user to be able to download large pieces of content but not have access to the files (think podcast player) you will still need to go native. If you are doing anything else, I encourage you to consider PWA and talk to a consultant like myself to figure out the right solution for your business case. Especially since there are other solutions that still give native access but also leverage web technologies which provide future advantage. I hope to cover these hybrid options in a future article.
What You Need
So, you’re sold on the PWA. What do you need? At the very basic, you just need a web manifest and a service worker plugin added into a traditional web app. However, to make a truly effective progressive web application you need much more. You can check out this fairly comprehensive guide about web app architecture, or just reach out to start down the path and build your application the right way.
Hopefully that helps bring clarity to this new term you may hear being thrown around. If it doesn’t, please ping me and let me know. As always I am happy to help and love writing useful content, so if you need something or have a topic for me to write about just let me know. Until next time, keep up the hard work and don’t forget to breathe;
-Marcus
*TLA: Three Letter Acronym… the most deadly of them all
