Progressive Web Apps: Do PWAs have a Future in the Modern Web?

 

Progressive Web Apps are gaining popularity and big names such as Starbucks, Forbes, and Tinder are reaping the benefits of PWAs. 

According to statistics, the world’s largest coffeehouse chain, Starbucks, got 2-time more traffic with its progressive web app (PWA). Online dating platform Tinder also cut its loading time by more than half and saw an increase in user engagement with its PWA.

So are progressive web apps the future? Are they better than native apps? In this article, we are going to discuss why progressive web apps for mobile devices are getting so much traction. So let’s see if those claims hold any water.

What are Progressive Web Apps?

PWAs deliver an experience that is indistinguishable from native mobile apps. The advent of smartphones in 2008, brought with it a slew of new features that were not available on the web. For example; offline mode, push notifications, camera, geolocation, and much more.

Microsoft’s Internet Explorer powered the web back in the day and web and app development companies had no way to access most in-device features. Fast forward to the present day, and the game has completely changed.

Website development has advanced to a point where web apps are giving native apps tough competition. Have you noticed how Twitter PWA can be installed, work offline, access the camera, and even receive push notifications just like a native app?

Other reasons why progressive web apps are in demand are that they offer much better distribution, they are cost-effective, and they will work on iOS & Android from a single codebase.

Raise your hands if you use Google Maps on your desktop… Yeah, thought so. It is not a very fluid experience. So how about smartphones? Well, that’s a completely different story, right?

Who uses a web browser to access Maps these days? 

The biggest problem software development companies and other players in the IT sector face is distribution. Users indeed spend most of their time in native apps. Reengagement features such as push notifications bring users back, even when the app is closed.

And home screen icons serve as a constant reminder as people on average look at their mobiles 58 times a day.

However, it is a highly concentrated market and the top 10 apps take away a big chunk of the traffic. It is also not very budget-friendly and developers often end up spending more than what they earn back.

Recommended: 5 Features to Enhance your Progressive Web App

So why progressive web apps have not been more disruptive? To answer this, we have to understand the differences between PWAs & native apps.

Native apps can load faster and reliably. They can work without an internet connection and use push notifications & sync options and access device sensors too. Web apps, on the other hand, are safer but don’t have those engaging native features. But if we increase the reach, we can see web apps disrupting this space.

There are hundreds of website visits by an average user and the biggest power of URLs is that they meet one-off needs. Now, what if the native-like UI/UX features meet web apps? Enter the progressive web apps (PWAs). Web apps now share your home screen and notification bar with native apps. 

What can Progressive Web Apps do?

So why do progressive web apps rock? Well, let’s take the example of the Washington Post. Their PWA loads in a tab like any other site but faster than a native app.

Upon repeated use, you will be prompted to add it to the home screen and with one tap it is added. The Washington Post icon is now part of the home screen alongside other native apps.

Why progressive web apps were not able to compete with native apps because they lack reliability, performance, and user engagement. Advances in web app tech are making it incredibly easy for users to get what they want.

We all know that time is money and data has shown that the higher the load time, the higher the bounce rate. According to statistics, mobile websites that load in less than 2 seconds translate into a 15% higher user conversion rate than those that take ages to load.

So how do PWAs achieve that? They do it by intelligently caching assets locally & reliably. That’s where Service Workers come into play. Service Workers enable cache assets with cache APIs, without relying solely on the browser. This means that after the initial visit, the same website or app will load reliably faster.

So what about the first visit? The AMP feature by Google takes care of that. AMP provides fast & reliable components to aid the load time of the first visit. That’s where PWA meets AMP. For example:

The latest news on Washington Post loads super-fast with Google’s AMP. Once loaded, the site installs a service worker to help cache the assets. When you come in here the next time, the load time will be much faster. That is a significant performance boost and one that native apps can’t compete with.

Also Read: Progressive Web Apps: How They’re Transforming Mobile App Development

Why use Progressive Web Apps?

To understand the importance of PWAs and why it is important, we have to take into consideration the mobile web audience reach. 

More than half of the world’s population owns a mobile device and data suggests that Chrome accounts for hundreds of monthly website visits. Website apps have a superpower that is URLs. which means you can send someone a link and they can directly open it in their browser.

Eliminating the need to download an app to view the content. So when you can deliver an exceptional user experience to a wider audience, it is a recipe for success for online businesses.

The next aspect to look at is whether investments in PWAs translate into business success. More inclination and interest in PWAs will mean more polished technology.

We have already seen how native apps capture users’ attention and engagement. So if we can allow for more advancements in it, there’s huge potential to tap into an even bigger market segment.

The acquisition is another important element for business growth. It has to be more than just getting high traffic. That sometimes means paying for users. Take the example of the world’s largest BRB marketplace, Alibaba. 

To scale up and got more conversions, Alibaba opted for a PWA strategy. This move increased their conversions by a whopping 76%. And push notifications and the “Add to Home Screen” feature increased user re-engagement by 4%.

Websites have low friction and because of that, it is also less expensive to acquire users. You must be thinking; not all PWA features work with the Safari internet browser, so it is not good for iOS users. 

As it turned out, China’s Ali Express, saw a massive uplift within days, There was 74% more time spent on their web app and conversion saw an 82% uplift as well. According to Ali Express:

“One of the reasons we built a progressive web app was to be able to invest in the web experience, across all browsers. Not only did we see huge benefits with browsers that support the latest features, but we also got to see a bump across the board. That is the sign of a great investment. One that will keep paying for itself as browser evolve.”

To sum up, you want to increase the reach, reduce acquisition costs, and improve conversion rates. Now that you know why progressive web apps are important? Here’s a bonus tip on how you can quickly make a PWA.

How to make a Progressive Web App with Lighthouse?

If you own a website, transforming it into a PWA is easier than you think. 

Here’s the complete procedure for making a progressive web app using Lighthouse:

The procedure

“Open up the Lighthouse tool in Chrome. Run an audit on your site. It will provide insight into how your website is performing, what changes are needed, and whether it qualifies as a PWA. At a bare minimum, the site needs to comply with the load-time requirements and be accessible on mobile devices. 

The most difficult requirement to meet is making the app work offline. Normally, a website runs on a single thread while the tab is open.

With modern web development tools, however, sites now register a Service Worker. Which is basically a script that runs in the background. It allows the integration of crucial features such as caching, sync and listening to push notifications.

Related: Web App Development - Top 8 Popular Backend Frameworks

So how do you implement this? It is quite simple.

We just perform a check to see if the browser supports this feature. Then register a JavaScript file as the service worker. 

Once registered, you can see its activation status in the application tab in Chrome Dev Tools. From here, you can either write your own code or use a library to do everything for you. Most importantly, you’d want to cache the URLs in your app so they can be viewed offline.

The final step is to create a manifest.json file. It contains icons and other metadata about the app. Once all these prerequisites are met, the PWA achievement will be unlocked. Your app can now be installed on most native devices and even listed on the Google Play Store.