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
Top comments (8)
I installed PWA on my Hugo website. And offline mode is only works for page that visited (cached) before. Is there a way to make offline mode works to whole page, even without visiting page by page before?
Hey..
I was resonating at the same idea you just mentioned..
I think it is possible through service workers..as it sits between the client and the server .
We can fetch things(not yet visited) in sw and therefore be able to cache it.
Hope it helps.
I am still working on a PWA.
It’s possible to do pre-caching with ServiceWorkers, so all your pages would be cached before the SW is installed. You can either build your own strategies, or take a look at workbox, which comes with many „common“ caching patterns.
hi Sofia,
Nice article BTW. Me too is a great fan of PWA. I wrote a step by step article on how to create a PWA. Here is the link, if someone is looking for the Implementation part.
Dev.to no PWA? I have downloaded the app but i still use it in browser
It's pwa for me
Thanks for this article Sofia. I enjoyed it and will be looking out for the next one.
I'm using Nuxt Js to build PWA's, and I love it. It's easy to use and provides easy to use, integrated Service Workers and packs a lot of (optional) packages/plugins.