Why build a Progressive Web Apps?

Want to know what is Progressive Web Apps(PWA)? Take a look here!

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.

  • Worthy of being on the home screen
  • Work reliably, no matter the network conditions
  • Increased engagement
  • Improved conversions

Worthy of being on the home screen

Is an app worthy to present in our home screen?

We need following qualities to answer YES for this question.

  • Reliable
  • Fast
  • Engaging

When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.

Actually, we use service workers to trigger installable shortcut based on our needs. Lets say, we are targeting only the mobile based users to install our PWA in their devices. We can detect the device based on browser and then we can prompt the user to install PWA apps.

Work reliably, no matter the network conditions

We have to handle various network conditions in PWA to meet the reliability.

The various connection modes are

  • Perfect
  • Slow
  • Lie-Fi
  • Offline

Increased Engagement

Web push notification helping a lot to provide the feel of native apps to keep the user engaged. And keeping the user more engaged once they visited the PWA application.

Improved conversions

The ability to deliver amazing experience without any distraction. Once the user started to use the application in dedicated window, it feels like native apps and there is less chance to jump to between other application similar to switching tabs in browser.

Lighthouse

Lighthouse, an open-source, automated tool for improving the quality of your Progressive Web Apps, eliminates much of the manual testing that was previously required. You can even use Lighthouse in continuous integration systems to catch regressions.

PWA Checklist

Lighthouse provides an chrome extension which provide helpful checklist that can be used to track of features of PWA.

Advantage of PWA over Native Apps

In the native application, the upgrade process is tedious or complex based on structure.

We need think of migration and data integrity, and we don’t have control at certain extent.

But in a PWA, we have control to all updates or upgrades to application. We can provide wide range of security fixes, bug fixes without any hesitation.

When we have SaaS platform application, PWA is the right combination of website with native application feel. User won’t have to worry about the upgrade scenarios. The developers will take of everything.

Popular Realtime Progressive Web Apps

There are plenty of popular websites converted their website into PWA to engaged more with their audience.

Dev.to

Dev.to is blogging or social forum where programmers share ideas and help each other grow.

They are displaying following canvas to users whenever the internet goes down. The user can paint in the meantime when the internet is trying to reconnect.

This has been achieved with the power of Progressive Web Apps.

Spotify

The popular music giant application which has large number of user base.

With all these things going on, it looked like Spotify was unable to resist the temptation and joined the race with their own version of Spotify PWA, despite having their own desktop app.

Your background colors are now adaptable to your needs as you progress through the PWA, making your experience more personalized and unique—as a music player should be.

Ola cabs

In the competitive ola cabs did the trick and leads the market over Uber by using PWA.

During installation time native apps (Apps from play store or Apple store), you can just open Ola cabs PWA and book your ride within.

You can save your mobile data and works well in unstable 3G network as well.

Sounds like a master plan.

Swiggy

Swiggy is an online food ordering app. It leads the market over Zomato by having adaptive screen in mobile devices.

Even though you have poor mobile network, the PWA works out of box and serves you the perfect needs of the user.

Can you spot difference between native app and Progressive Web App?


And lazy loading and service workers helps the website to load only required content instead downloading whole assets files.

Even though Swiggy and Zomato is popular in India. User feels Zomato is providing more offers than Swiggy.

Because they didn’t proper user engagement and mobile app user retention.

That’s the place Zomato losing the market with Swiggy (Based on my personal experience, I’m mentioning these point; not to offend anyone)

As a user of 2+ years in both apps, I prefer PWA app whenever I needed.

Pinterest

Pinterest – Infinite scrolling – never ending image social media

The design of this application itself makes the application user to stay for long time.

You would feel the difference between native app and web app (and also PWA)

Twitter

The popular social media which lets the people to write shorter and makes PWA to use the mobile data also shorter.

The following figure shows the application of Twitter client in various medium.

Take Away

We have seen various aspects of Progressive Web Apps. And the popular web application which uses the power of PWA to engage more with the user base. Do you think its worth to give a try and convert your web application into PWA?

Leave your replies in comment section below.

In the next blog, we can see the approaches to turn the Web Application into Progressive Web Apps (PWA).

Related Post

Why Progressive Web Apps is next big thing?

Progressive Web Apps – Web App Manifest

To get latest updates you can follow or subscribe! #peace

Advertisement

Why Progressive Web Apps is next big thing

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to servers, accessible through URLs, and indexed by search engines.

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable
  • Fast
  • Engaging

Lets discuss the basic first.

Apps

Technically, apps got two categories

  • Native Apps
  • Web Apps

Native Apps are the apps which we used to download from play store or apple store or windows store. Native Apps are the apps which have developed to do operation of particular company or product.

Web Apps are the apps which we browse using the browser. Basically its a website, we browse and use it based on our needs.

PWA or Progressive Web Apps fills the gap between these techniques to provide more accessibility to end user and make engaging withing the product.

Target Audience

The world is moving towards portable devices. If we are building a application which basically serves via web browser, that can be build as PWA.

The above shows the Global User (Millions) of Internet. And we can clearly see the rise of mobile users drastically.

If we want to stay in the market, we need to support the latest technologies and adapt the same thing in our product.

PWA – FIRE

A Web Application should meet the FIRE to become Progressive Web Apps. And the FIRE is

  • F – Fast
  • I – Integrated
  • R – Reliable
  • E – Engaging

Fast

  • Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • So how fast a web app should load a page?
    • ~ < 3 seconds
  • 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.

Bounce rate is 20% if your website takes more than 3.3 seconds to load.

And if your website takes more than 9.9 secs, the user have already started to leave your site.

Now, tell me how fast the websites we are developing/developed is loading?

Integrated Experience

Airhorner (https://airhorner.com/) is my favorite website which i used to show in demo whenever I go to public talks about PWA.

Any PWA should be really integrated in any platforms. Once it developed well adapted and integrated, the application will open in the dedicated window and let end users stays within the application without any distraction.

The integrated experience can be achieved with the help of Manifest. We already discussed about this earlier.

Reliable

Load instantly and never show the downasaur, even in uncertain network conditions.
When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.

Connection mode

Basically, we have following connection mode in Application

  • Perfect
  • Slow
  • Lie-fi
  • Offline

Perfect

When you are Perfect connection, everything happens as expected and you don’t have to worry about anything.

Slow

Slow is the one of the connection mode which suffers the user a lot. Everything will happen but not at the right time.

Lie-Fi

Lie-Fi is the connection mode which we usually experience in travel mode. There will be lots fluctuation in the connection type. Suddenly it goes to high and suddenly it goes very low.

Offline

When we are offline, we go mad.

A successful PWA should handle all kind of connection mode and keep the users engaged.

A user should get notified whenever connection is slow or unstable.

Engaging

A PWA should Feel like a natural app on the device, with an immersive user experience.

Progressive Web Apps are installable and live on the user’s home screen, without the need for an app store.

They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

The Web App Manifest allows you to control how your app appears and how it’s launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.

Why build a Progressive Web App?

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.

  • Worthy of being on the home screen
  • Work reliably, no matter the network conditions
  • Increased engagement
  • Improved conversions

PWA of Twitter is just 0.6 MB.

What’s Next?

Approaches to making an web app into PWA

  • Offline first
  • Service workers
  • Indexed db and caching
  • Web App Manifest
  • Push notifications

We will discuss about these things in detail in upcoming posts.

Further Reading

Why build a Progressive Web Apps?

Progressive Web Apps – Web App Manifest

To get latest updates you can follow or subscribe! #peace