Quick review of Progressive Web Applications

A few weeks ago, we provided a guide to PWA e-commerce with a live Gatsby demo. In it, we provided a progressive web app definition, a few of the major benefits, and some examples of PWA e-commerce sites you can go check out. If you haven’t read that post yet, I definitely recommend doing so as it will provide a great framework for what you’re about to read.

However, there simply isn’t enough time or space to cover everything about PWAs in just one sitting. That’s why we’ll be expanding the original definition from our Gatsby PWA article and go into a bit more depth. Here’s the definition we provided last time:

Progressive Web Application is an umbrella term coined by Google engineers. It is rather a set of development principles than a specific technology or stack.

Applications developed this way keep three principles in mind: reliability, performance, and engagement. These were the criteria set by Alex Russel, developer at Google and arguably the father of PWAs, back in 2015, and they make up the fundamental baseline for what can be considered a progressive web application.

In layman’s terms, however, Smashing Magazine offers another definition that I think would be worth noting here:

A progressive web application takes advantage of the latest technologies to combine the best of web and mobile apps. Think of it as a website built using web technologies but that acts and feels like an app.

Hence why PWAs are so appealing. They take all the benefits of mobile UX and combine them with the speed and reliability of classic web development. Like Nadav Dakner points out, building an app which is unrelated to your online site means that your users need to go through various steps to obtain the app (search in the App Store, download and install). PWAs, on the other hand, are your actual site’s pages that get served to your user’s mobile device, and they can be installed to their homepage in just one click.

As we know from the laws of e-commerce, less work for customers always equals more customers.

Once a site has a PWA built and ready to go, Chrome will push it to be installed on a user’s mobile device so long as it meets the following criteria:

1. It is running under HTTPS - Emphasis on the “S” there. Your site must be secured with an SSL certificate.
2. **It has a **Web App Manifest - This is a JSON file that lets you customize various features of your app such as name, colors, design, etc.
3. **It has a **Service Worker - This is a JavaScript file that allows your PWA to work offline (to the extent that it is capable, of course). It’s essentially the script that is always working tirelessly in the background.

Now that we know what a PWA is and what it needs to be endorsed by Chrome, it’s time to see some real-life results from famous companies that currently use PWAs.

Statistics showing the benefits of PWAs

Let’s take a look at five remarkable statistics taken from PWAstats.com, an online community which allows companies to share their direct benefits after switching to PWAs:

• “Tinder cut load times from 11.91 seconds to 4.69 seconds with their new PWA. The PWA is 90% smaller than Tinder’s native Android app. User engagement is up across the board on the PWA.”
• “Forbes’ PWA test saw 2x increase in average user session length, 6x completion rate, and 20% more impressions. Loads in 0.8s down from 3 to 12s.”
• “Trivago saw an increase of 150% for people who add its PWA to the home screen. Increased engagement led to a 97% increase in click outs to hotel offers.”
• “Pinterest rebuilt their mobile site as a PWA and core engagements increased by 60%. They also saw a 44% increase in user-generated ad revenue and time spent on the site has increased by 40%.
• “Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, and 20% decrease in bounce rate. Twitter Lite loads in under 3 seconds for repeat visits even on slow networks.”

Now, these were simply the top five examples that I found to be the most interesting. But there are literally pages upon pages of other examples just like this with homegrown businesses seeing tangible benefits from using PWAs.

#vue #pwa #nuxt #programming