😕 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 🪄
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?
- 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.
- 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).
- 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.
- Starbucks App - Starbucks PWA
- Flipboard - Flipboard for the Browser
- 2048 Games - Web based Games
- Uber - Uber's PWA
- Nomie - Private Life Tracker