😕 WTF is a PWA

Heard some things about PWAs but aren't sure what they are? You've come to the right place.

Progressive Web App was coined in 2015 by Francese Berriman and Alex Russle to describe a new class of applications that use the web as their primary platform of choice. Depending on the devices on which they were running, the functionality of these apps would progressively become more advanced.

It's just a website with a sprinkle of magic 🪄

A progressive web app is built using web technologies like HTML, CSS, and JavaScript, but it often has the look and feel of a native app. With a few clever tweaks, almost any website can become a progressive web app. In comparison to a native app, a PWA can be built in a fraction of the time. Plus, you can offer native app features like bluetooth integration, geo location, push notifications and offline support. See a more complete list of what's PWA features are supported on Android vs iOS

Nomie PWA Example

PWA's can be Installed to the Homescreen

Both Android and iOS allow users to install PWA's directly to their homescreen. Unlike Apple, the Android experience is buttery smooth with the user being asked "Do you want to install this app?", where with iOS you need to let the user know they can install the PWA, and how to do so (click the Share Icon, scroll down, select "Add to Homescreen").

Once an App is installed, it will run as if it's a native applciation.

iOS PWA Limitations as of 2021

  • No automatic Install prompt
  • No Push Notifications - well not really, you can use a Wallet card, and send notifications there, but that's not ideal.
  • No concept of the Keyboard being open or shut.
  • No way to update PWA icons.
  • No background processes.
  • Possible that Apple wipes any local data if the device is running low on space.

Three things your website needs to qualify as a Progressive Web App?

  1. A Service Worker - a JavaScript component that runs outside of tabs and enables app-like features like offline functionality, background synchronization, and push notifications. Truthfully, the service worker doesn't even need to do anything, it just needs to be registered for it to qualify.
  2. SSL certificate Service Workers, a powerful feature, are only available for websites that have proper security and privacy - namely HTTPS certificate - installed. So it becomes a PWA requirement. Many vendors, including Amazon Web Services and Let's Encrypt, provide free basic certificates, so there is no financial reason not to have them. Also, when running our application locally, HTTPS is not required for development purposes.
  3. WEB-APP-MANIFEST To make our web app look like a native app, we need to provide some metadata like the app's name and icon via a standardized JSON file. The client's browser then reads it and uses it to "install" the icon on the home screen. The manifest also tells the system how much of the browser's UI to show (via display property) and how much of our origin (address space) to treat as our PWA (via scope property).

Some interesting facts on PWAs from PWA Stats

  • After launching its PWA, Thomas Kent saw a 57 percent decrease in bounce rate and a 79 percent increase in revenue.
  • By converting to a Progressive Web App with an app shell, Commonfloor groups saw a twofold increase in active users and a tenfold increase in overall traffic.
  • Butcher of Blue's Increased mobile users by 154 percent, monthly active users also increased, and conversions increased by 169 percent as the result of implementing PWA. Pages load 85 percent faster than they did previously.

PWA Examples

More Resoruces

Happy Data Studio