Here it is, a favorite technical topic of mine, Progressive Web Apps. The target is to write a series of articles related to PWAs, so let me know if you struggled to understand/implement any of the functionalities.
Maybe you heard about this (becoming) buzzword from Google events or some random articles on the internet. If you don’t, it’s ok, we will start from the beginning.
In the past months, I delivered two presentations on PWAs with an aggregated attendance of over 50 people. The focus was on two directions, first (tied to this article), to present what are PWAs and why they are useful and second, to implement live a PWA from scratch (future articles).
You will discover:
What PWAs are 📳
The benefits you can get from them 👍
Production PWAs examples with statistics 📈
PWA characteristics 📝
But first, important notice (if never used a PWA)! Go to www.twitter.com from Chrome and click on the menu “Install Twitter” or from your Android device and click “Add to Home screen” pop-up. If you are an Apple user tap “Share” and then “Add to Homescreen”.
The target is to really see PWA in action before the information from this article.
Let’s go!
What are PWAs
Based on what Google says:
“Progressive Web Apps are websites built using web technologies but
act and feel like an app.”
The main idea from this definition is that you can develop a web application from scratch or even upgrade an existing one with some functionalities that make it behave like a native app. (mobile or desktop)
And now a more casual explanation:
“Progressive Web Apps are just websites that took all the right
vitamins.”
Therefore PWA can be seen as an upgrade of a web application in order to serve the new needs of the users worldwide. Over 50% of the internet traffic it’s from mobile devices, so your web application should do more than responsiveness in order to adapt.
PWA Checklist
HTTPS - Secure
Any PWA should be served over HTTPS. If this requirement it’s not respected, your application will not be Progressive.
Connectivity Independent
Your web application should support weak networks and also offline support. Both functions can be achieved using service workers and caching.
App-like
The structure of the application should have the aspect of a native one. For that, we can load the app shell the first time, using service workers, and load it on the next visit.
Discoverable
Being a web application can be found by searching engines.
Re-engageable
The main functionality of the mobile application that engages users is push notifications. With service workers, you can implement those for your PWA and use them anywhere.
Fresh
The application can be updated with new functionalities using service workers (background-sync).
Responsive
Of course, the application should be responsive and behave nicely on any type of screen.
Installable
Your application can be installed through the browser and behaves like a native one afterward.
Case Studies
1. Twitter
Let’s start with Twitter's situation:
“With over 80% of users on mobile, Twitter wanted their mobile web
experience to be faster, more reliable, and more engaging. “
Twitter implemented a PWA version of their application and managed to make it the most used client. The application had a lot of success on desktop also.
Here are some statistics that they presented:
Increased the pages per session with 65%
Increased the tweets sent by 75%
Decreased by 20% the bounce rate
This is a tremendous success for them, taking into consideration the volume of their users.
2. Pinterest
Pinterest observed a problem of their web application, as they declared:
“Pinterest noticed its website experience was slow and converted only
1% of all visitors into sign-ups or mobile app installs. This led them
to develop a Progressive Web App.”
After their PWA implementation they also had some valid statistics to share:
- Increased time spent on the mobile web by 40%
- Increased user-generated ads revenue by 44%
- Increased engagement with 60%
The most important one from them, in my perspective, is the revenue one. That demonstrates that this technology can be applied successfully in a large organization and have a positive impact on the business/revenue side.
Characteristics
1. Fast loading
Google says:
“53% of users will abandon a site if it takes longer than 3 seconds to
load!”
Having that information in mind, an important aspect of PWAs is to be fast and reliable. A particular method to achieve that speed is to cache the app shell, using the service workers.
Here are represented some simple network requests. When an user opens the application, the shell can be served directly from the service worker, who can intercept any network request sent from the browser.
The benefit is that the user gets fast feedback before all the resources were loaded.
Another good strategy is to let the service worker do the business-related data request at the start and until the app shell is drawn by the browser, the content could be ready to be loaded. In this example case, the time is reduced to almost half, which represents a huge difference.
2. Installable
“Add to Home Screen, sometimes referred to as the web app install
prompt, makes it easy for users to install your Progressive Web App on
their mobile or desktop device.”
What it does, it adds a shortcut to your screen from where you can start the application in a separate process, not directly on the browser. It works both on mobile and desktop, but the main target is the mobile audience.
A PWA can be installed from Safari, but it will need two additional touches, going through the menu. A workaround for this can be a custom implementation of a banner similar to the one from Chrome, and implement the installation manually in the back.
3. Multiple platforms
PWAs can support multiple platforms (browser, mobile, desktop) and will behave particularly to each one of them. Because nothing is perfect, there are some limitations when we refer to Safari.
Yes, I know what you are thinking. It seems that PWA can be implemented only on Chrome or other non-Apple browsers, but the truth is somewhere in the middle.
Even if important functionalities like Push Notification or Install Banner aren’t supported for Safari, PWAs can still bring value to the Apple fans through the other benefits and with a couple of customizations.
4. Works offline
Works offline it’s a bold statement. It’s an objective for the PWAs, but you can implement just some of the functions.
For example, you can cache the app shell and, if you have a platform similar to dev.to, cache also the visited articles (the data). In this case, if the network is flakey or there is no connection at all, the user can still read the loaded articles.
A more advanced feature could be to use “background sync” to commit the offline user actions when the connection returns.
5. Engaging
The engaging point is strongly attached to push notifications. It’s the main feature that keeps the user interested in the application dynamically.
In the above schema, it’s presented an example of an implementation for push notification into a PWA, using Google Cloud Messaging (GCM).
First, you can ask the user if he agrees to receive notifications. If the answer is positive, request the GCM for a token, then store it into your server, tied to the device.
When you want to send a notification you can simply send a request to GCM, using the token and some additional information, like the message or icons and GCM will send the notification to your device. Thanks to service workers, your client can understand and display the notifications.
It was a high-level article, that presents the main aspects of PWA. To fully understand PWAs, you need to research further. Leave a comment if you want to write more on some specific topics related to PWAs.
PWAs represents a fast approach to develop an application that (almost) works on all platforms. If your use case can ignore the limitations, especially the ones related to iOS, it can be a great solution for your mobile-web dilemma.
Even if you don’t need a mobile application, adding the capability to install and offline functions into your web application can be a huge upgrade. Those functionalities are the easiest to implement and I will present them in a future article.
The main two problems with PWA are the iOS limitations and the fact the *users are not yet familiarized * witg a web application, as a PWA.
It’s a technology in development, that has great potential to solve the changes from the user's behavior and I think it’s great to be aware of it. There may be cases where it’s the perfect fit.
Let me know in the comments if you have any questions or suggestions.
Happy coding!
Top comments (0)