What's a PWA? Who’s using progressive web apps, and why they matter - Technical.ly Philly

Software Development

Dec. 11, 2020 10:10 am

What’s a PWA? Who’s using progressive web apps, and why they matter

If you want to build an app, read this first.
Starbucks’ web app, a PWA.

Starbucks' web app, a PWA.

(Screenshot via app.starbucks.com)

This is a guest post by entrepreneur and software engineer Marcus Smith. It originally appeared on Medium and is republished here with permission.
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 and web technologies for the greater development space. This is definitely a long time coming.

TL;DR:

  • PWA: Progressive web app, or 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 and service worker.
  • Doing PWAs right is a bit more complicated than a nice manifest.

What is a PWA?

The PWA, or a 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? 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 and 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.

Advertisement

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, 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 oversell these problems, others undersell; I’ll try to 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 multilayered hardware interaction necessary for some complex apps.

That said, most things don’t need Bluetooth, ARKit, altimeter and battery info. Web solutions still have access to core interactions with GPS, audio and 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 its 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 that 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 had 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 and 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.

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 reach out to a consultant to start down the path and build your application the right way.

-30-
CONTRIBUTE TO THE
JOURNALISM FUND

Already a contributor? Sign in here
Connect with companies from the Technical.ly community
New call-to-action

Advertisement

Sign-up for daily news updates from Technical.ly Philadelphia

Do NOT follow this link or you will be banned from the site!