Progressive Web Apps (PWA): All You Need to Know [in 2022]
In fact, 52% of users said that a bad mobile experience made them less likely to engage with a company .
Although we know that user experience is extremely important, creating great UX across multiple devices is not easy.
Thanks to PWA things are becoming easier.
What is a Progressive Web App (PWA)?
PWAs provide an augmented web experience for users who use the latest version of browsers on par with the OS-dependent applications on Android, iOS, or Windows.
The core idea behind building a PWA is to deliver the best user experience for normal web applications across all devices.
When we access web apps through a browser, the overall experience never catches up with that offered by a native application.
For example, the user experience you get while using Pinterest on a mobile app and the website will be almost identical.
Features that make PWAs a Boon for the Internet
PWAs can bring to your website and mobile app a great deal of UX transformation that can result in better results.
Here are 6 striking features that prove PWAs to be a boon for the internet.
1. They are browser-agnostic
PWAs can be accessed from any device having modern browsers. Almost all popular browsers including Google Chrome, Safari, Brave, and many others.
2. They behave like normal websites
PWA websites can also be used like normal websites that allow sharing, bookmarking, and archiving. Further, they can be accessed offline which makes them even better than traditional apps and websites.
3. They are search engine-friendly
Through Search Engine Optimization (SEO), PWAs can be made to be indexed by search engines. As a result, they enjoy higher visibility resulting in higher engagement.
4. They update automatically
PWAs spare users from the need to perform app update actions. PWAs automatically update the content in the background with a simple page refresh.
5. They are easy to develop
Compared to native apps, the time required for developing PWAs is very less. While developing native apps, we need to maintain a single codebase for each platform but developing PWA demands only a single codebase.
Hence, it reduces the maintainability. Ultimately, it reduces the developmental cost by large folds.
6. They are as good as mobile apps
PWAs can be installed just like any other native app with home screen shortcuts. They can also handle push notifications and operate hardware features of the device like camera, Bluetooth, etc.
Real-world Case Study: How Pinterest Turned around the Internet’s Wrath with PWA
Back in the day, around 2016, Pinterest’s website was outdated and delivered poor web performance. And users did not shy away from vocalizing their disappointment.
From analytics, they realized the difficulty in elevating the user base especially as the number of unauthenticated web users was large.
Hence, after 3 months they rebuilt the existing web app using React and converted it into a PWA which saw massive growth in their business.
They were also successful in reducing the bundle size of the web app which led to a drastic change in the CPU performance as well.
As a result, the time spent by users on the platform increased by 40% and the revenue generated by advertisements shot up to 44%.
There were also other ‘Pinteresting ‘ results that the PWA adoption delivered.
Building blocks of a PWA
There are 3 major building blocks that help in creating PWAs.
- Service worker: This is a script file that asynchronously runs tasks in the background without compromising on page performance.
- HTTPS: since PWA requires a service worker, it must be hosted from an HTTPS endpoint.
- Manifest: This is a JSON file where we can include all the metadata associated with our app.
Let’s dig a little deeper…
1. Service worker
The service worker is responsible for ensuring that the PWA is reliable and independent of the network status.
It can access the cache from the client-side and can store data such as static assets that don’t need to be fetched over and over again like stylesheets, HTML, images, etc.
This enables the PWA to load only the necessary data during offline mode. It can thereby reduce the page loading latency and can improve the overall performance as well.
We can also enable the service worker to listen for events that occur during network changes and can serve, modify or intercept the network requests within the application in a dynamic manner.
In short, the two main features of a PWA such as the one-time installation and caching is done using the service worker script.
It can also be used to handle push notifications when the user is not using the website.
2. HTTP
PWAs must be served with HTTPS protocol because of the following reasons :
- The service worker demands an HTTPS connection.
- Secures the privacy of the user
- Assures the authenticity of the content
3. Manifest file
This is a JSON file that contains all the necessary metadata regarding the PWA.
This file also makes the PWA installable across devices.
This metadata includes the title of our app, theme color, the manner in which it should be displayed, adding logos, etc. Once we have created the manifest.json file, we can link it to the head tag of our HTML file.
I have created a simple PWA and have hosted it at https://vnay-krshn.github.io/PWA_demo/ .
The code repository can be found at vnay-krshn/PWA_demo (github.com) .
Bringing it all together
To sum up, PWAs have blurred the difference between web apps and native apps.
Undoubtedly, we can say that PWAs are the future of web apps.
Now that many companies across the world are converting their web apps to PWAs assures the fact that it is going to be a pathbreaker in the software industry.
This post is authored by Vinay Krishnan.
Originally published at https://www.perfomatix.com on May 27, 2022.
