Intro to Progressive Web Apps (PWA)
Sofia Jonsson
Posted on November 11, 2019
This last week I encountered a job application that asked me for my favorite trend in technology. Naturally, I went and googled top tech trends in 2019 and came across a pretty interesting list. What really caught my attention was Progressive Web Applications or PWA's. This was super interesting to me since I've recently been working on expanding my React Native knowledge for a mobile app project and this seems like a happy modern medium instead of building a pure native app. Sure, there are situations when you need a mobile application, but more often than not I'm clicking the dismiss popup in my browser. Ain't nobody got time to download an app just to delete it later.
So, this week I want to go over PWA's and why I think they're so cool and why you might want to use one!
What is PWA?
This application type was unveiled by Google back in 2015. It's got web and native app traits and lands somewhere in the middle taking the best from both approaches. It was initially only for Android users, but due to the iOS 11.3 update in March of 2018, iPhone users get to join in on the fun.
Features
- Responsiveness: Building responsive applications is another trend for 2019 as there is a high need to provide an excellent user experience for all types of screens and platforms
- Progressive updates: Sure, it's in the name. But more importantly, it needs to be progressive so that all types of users can interact with their application. This strategy is the core of the PWA and as a result, the most critical content is pushed to the forefront
- Offline Use: This is HUGE. This means that users can use this app despite their browser. This type of application can work with a bad internet connection or even offline
- Keeps it Fresh: Due to service workers, new updates are downloaded while the app is open and in use
- Secure: Are only served through HTTPS to protect the privacy and security of its app's users
- Discoverable: Is indexed in search engines and receives better ranks
- Installable and linkable: No need for users to install PWA's through app stores. This is great for the developer's as well as they do not need to wait for approval from Play Market or App Store. The application can be sent via a link on the web and can be saved on a home screen instead.
- Push Notifications: As opposed to web applications, PWA has access to sending push notifications and pop up and alert you about friend requests, recent news, new messages, etc.
Basically: it takes far less time to load and is fast to use. It's easier to share, doesn't require a download which is great for users. It's much faster to build and therefore cheaper and you don't have to wait for approval to launch on the market or store. Compared to a website it offers superior UX, works more securely offline and is impressively lightweight.
Good Examples
Here are some examples of large companies that have implemented PWA's.
- Twitter: Launched PWA in 2017. Since then Twitter has cut average load time down by a third, decreased bounce rate by a fifth and increased their pages per session metric over 65%!
- Forbes: Also launched PWA in 2017 with the goal of increasing user engagement and provide a fast personalized experience. It's PWA loads in 0.8 seconds and increased session per user metric by 43% and engagement by 100%
- Tinder: Built using React and Redux. PWA is 90% smaller than the previous native app and loads in less than half the time of the native app. etc..
Lot's of stats here but as a general consensus, their PWA's operate on a fraction of their previous load time and have increased user engagement exponentially!
Frameworks
There are a few different options for frameworks when building out a PWA. Angular JS and Polymer which are both JavaScript based. There are also other Progressive web app tools such as React and Lighthouse, Dev Tools, and Workbox which are all valid options for building a robust progressive web app.
What's going on Under the Hood?
I will be diving into this topic in my next blog post to really get into the different elements that are used in web dev to make up the PWA.
Next week I will be covering:
- App Shell
- Service Workers
- Manifest Files
- Push notifications
- Installation banners
- Different Caching strategies
Posted on November 11, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.