Home / Blog / Are You Ready for a Progressive Web Application (PWA)?

Category: Software Engineering

Are You Ready for a Progressive Web Application (PWA)?

Progressive Web Application
14.07.2021
6 min read

Progressive web applications (PWA) have really changed the way we use the Internet today. Push notifications, offline websites and extremely fast load times are just a few most important benefits of progressive web applications, which users appreciate the most.

Progressive web applications are also a popular topic at technology conferences, especially those organized by Google. PWA development is the result of heightened interest in providing users with richer experiences and better functionality, which were previously reserved for native mobile applications downloaded from app stores.

What is a Progressive Web Application (PWA)?

A Progressive Web Application is a connectivity independent browser-based application that mimics a native app. It looks like a native app, it works offline like a native app, it feels like a native app, but it’s cheaper in development and reachable like a regular website.

Thanks to using browser as its runtime environment, it makes a PWA truly cross platform while a native app is usually created per a single operating system. Nowadays browsers support rich APIs what makes them really capable.

Do you want to create a real time video chat chat? No problem! There is WebRTC.

Maybe you want to notify your users about an event happening near them or a sale in your store using push notifications? Browsers provide support for receiving push notifications.

What about performance? Maybe a better performance than JavaScript offers is required? WebAssembly is here to help you achieve high performance you demand.

If you want, it can even be installed from a platform specific app store. All of that brings a PWA to a real sweet spot between capabilities, reachability and development cost.

How it works?

Technically speaking, it is an installable website. PWA provides a special manifest that includes information needed by the browser to cache specified resources to make the app independent of internet connection, and a service worker allowing scripts to run in background, even when user is not currently looking on the app.

When you enter a website providing such manifest, you’ll see „Add to home screen” prompt. After clicking on accept button, PWA will show up on your home screen like a native app. From now it’s cached, and can be used without internet connection.

Why are PWAs becoming more and more popular?

Let’s imagine, you want to create new app that will change the world. You want it to be reachable, to let as many people as possible take an advantage of your great idea, so you want to support all popular platforms. But it comes at a cost… Actually, a really high cost.

Web version, iOS app, Android app, Windows app, Mac version, Linux version. Development of such stack would cost a lot of money. And on top of that, add costs of upkeep, adding new features per every single app version etc. Thats a fortune to spend.

Here comes a PWA to rescue you. For a fraction of the cost, you’ll get an app that runs on all devices and provides a very user friendly, high quality, rich experience. That way, you can highly speed up return of investment and grow your business much faster.

Isn’t it great? But wait. If it’s just a cached website why not just stick with normal website?

Because PWA provides additional features that a normal website just can’t provide. The biggest deal is a possibility to use it without the internet/during a weak connection.

Think about this. You’re on a train that’s in area with bad connection. You forgot about your friend’s birthday tomorrow, so every second counts. Suddenly, you have no internet at all.  Website is not loading, what makes you very upset as you already know that you probably need to start ordering process again. You’re not in a mood for more shopping. You just want to finish what you started and don’t think about shopping or browsing the internet. That’s really bad for the store you’re ordering from.

Guess what? If that site would be a PWA, that internet connection loss wouldn’t be so upsetting. You would see a nice prompt saying that you lost internet, and you wouldn’t loose your progress. Much more user friendly experience, isn’t it?

Let’s think about another example

You’re on a same train. Same internet problems occur. This time you’re not under a pressure of buying something as fast as possible, so you want to find best offer. You start with your favorite store. Unfortunately, it’s only accessible via a website. As you have a weak connection, it takes ages to load, so you give up and use different store’s app that’s already installed on your device. Again, if that store would be a PWA, it wouldn’t loose a client.

Let’s talk about a real world example

I bet you know about AliExpress.

PWA App Ali Express

But if you don’t, AliExpress is an online retail service, that generated 72 billion dollars revenue in 2020 and has 150 milion active buyers (at the moment of writing this article). To be honest, I don’t know a person who has never ordered anything from AliExpress.

Web version was their primary platform for discovery, so they focused on optimizing it to provide best mobile experience. However, they found it really difficult to provide as good user experience as a mobile app would provide. They already had a native apps, but it was really challenging and costly to get users to download it and re-engage.

They built a PWA version of their website and results were staggering. Let’s take a look on some numbers:

  • 104% increase in conversions from new users
  • 2x more pages visited per session
  • 74% increase in time spent per session

Source: https://developers.google.com/web/showcase/2016/aliexpress

Some more numbers

As a developer I love numbers, so… Let’s look at more numbers. 🙂

Twitter and they Lite version:

  • 65% increase in pages per session
  • 75% increase in Tweets sent
  • 20% decrease in bounce rate

Source: https://developers.google.com/web/showcase/2017/twitter

Forbes:

  • 43% increase in sessions per user
  • 20% higher ad viewability
  • 3x in scroll depth
  • 100% higher engagement

Source: https://developers.google.com/web/showcase/2017/forbes

How do people perceive PWAs (and all mobile apps in general) vs web versions?

  • reliable – app installed on your device feels rock solid. While using a web version, you always keep in mind, that you may lose your connection, and have an unwanted occasion to beat your record in Google Chrome dinosaur game.
  • fast – App installed on your device in much faster and that shows up even more when in weak connection conditions. We live fast nowadays, so we don’t want to wait for content to load.
  • more engaging – notifications (push notifications) operating in the application don’t let you forget about initiated activities, encouraging users to continue, even when the browser is minimized and the user device (eg tablet, phone) is muted.

How can PWA support your business?

Cheaper IT production costs
Choosing PWA technology allows for IT projects to be compatible with user every device, regardless of their operating system or browser preference.

Larger conversions for e-Commerce
If during an online shopping experience a customer loses connectivity, a PWA saves the most recent action in the browser application. Whether the user is adding products to the shopping cart or is already at the point of completing the transaction, the shopping process picks up at the point where the user left off once network connectivity has been restored. This functionality simplifies and stabilizes customer experience on the site, which directly affects the number of transactions.

Bigger coverage and involvement for content sites
Internet websites, which base their business model on displaying advertisements, build greater reach and user involvement thanks to PWA’s (time = time of the session and corresponding activity). Users of PWA affected websites can view pages and advertisements even when they do not have internet access. Once a PWA site is accessed, links from this page (other websites, links under icons), as well as other content, can also quickly be loaded. Thanks to this advantage, advertising partners are more willing to invest in marketing with a website that has strong customer loyalty.

Conclusion

PWA is a great and relatively cheap way to improve users experience and increase your revenue. It’s a sweet spot between native apps and web apps. This concept is proved by many big companies, and is basically a must have today to be competitive in growing market.

If you want to explore more on PWAs I recommend the following links:

Bakowski_WLC
Denis Bąkowski

Mid JS Full-Stack Developer Frontend / Backend

Experienced in full-stack web development with Node.js, NestJS, Angular, WordPress and Yii2. Experienced with relational (MySQL, PostgreSQL) and non relational (MongoDB) databases. Denis has the ability to quickly learn and analytically solve problems. Strongly focused on quality and best practices, fan of SOLID and KISS principles. He likes new, difficult challenges that allow him to develop.

delighted programmer with glasses using computer
Let’s talk about your WordPress project!

Do you have an exciting strategic project coming up that you would like to talk about?

wp
woo
php
node
nest
js
angular