4

What Are Progressive Web Apps?

 3 years ago
source link: https://hackernoon.com/what-are-progressive-web-apps-bq40337w
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

What Are Progressive Web Apps?

@anand-mahajanAnand Mahajan

Anand is the Founder of Sphinx Solutions having experience more than a decade.

Have you ever tried to book a cab while riding the subway, only to get disconnected by weak signals? Perhaps you were in the midst of ordering dinner when the wifi dropped out? Such trifles are soon going to be a thing of the past, thanks to the development of Progressive Web Apps

0 reactions
heart.png
light.png
money.png
thumbs-down.png

A recent study by Statista claims that by 2021, 53.9 % of all retail e-commerce will be generated via m-commerce. But consider this. While 60% of web traffic is generated from mobile users, it still accounts for only 16% of sales conversions. To overcome this conversion gap, an app needs to address the substandard mobile-web experience of consumers. Enters PWAs or Progressive Web Apps.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

What Are Progressive Web Apps And Why Should I Be Interested?

Over a decade after the launch of the iPhone, the definition of what constitutes an app has changed radically. Progressive Web Apps successfully combine traditional web experience with native-app functionalities. Simply put, they are websites that look and behave like a native mobile app. They are platform-independent and come with an app-shell that lets you interact with the site even when offline. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

According to a study by Gartner, PWAs were supposed to replace 50% of native apps by 2020. A 2019 global survey of e-commerce decision-makers revealed that while 11% of e-commerce companies had already shifted to PWAs, another 24% considered investing in PWAs by 2020. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Technical Components Of PWAs

App shell

0 reactions
heart.png
light.png
money.png
thumbs-down.png

An app shell helps in loading a minimal user interface (usually consisting of the site’s header, footer, and navigation menu) and then caching it. This helps in a faster rendition of the site’s basic features that can be accessed offline. The concept is based on Javascript and relies on a stable navigation system. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Service worker

0 reactions
heart.png
light.png
money.png
thumbs-down.png

The service worker is an independent JS file that acts as a proxy to the web page, mimicking the page’s content through cache. The service worker integrates native-app functionalities like allowing push notifications, background syncing, and quick offline access. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Web-app manifest

0 reactions
heart.png
light.png
money.png
thumbs-down.png

The web-app manifest is a JSON file that imparts the look and feel of a native app to the PWA. It is a bundle constituting the site’s name, icon, theme, URL, and other necessary resources that dictates how the app is presented on the splash screen.  

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Transport layer security

0 reactions
heart.png
light.png
money.png
thumbs-down.png

TLS is a security protocol that ensures authentication, privacy, and data integrity over communicating networks. Every progressive web app will leverage the TLS protocol to deliver secure information over browsers. In other words, the website should come with HTTPS and SSL certification across all servers. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Advantages Of Building A PWA

PWAs cost less to build and maintain than native apps

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Native apps are platform-dependent, which means you need to build two different apps to target both Android and iOS platforms. Since PWAs are platform-independent, they cost less to develop. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Also, there are extra fees associated with native apps, for example, account subscription fees for App-store/Play-store. Apple charges an additional 30% of total sales revenue (made through the iOS platform) from e-commerce apps. With PWAs you can significantly reduce these costs. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs are lighter and faster than native apps

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs can be built around 90% lighter than native apps. The size of progressive apps can easily be less than 1MB. For example, the Twitter iOS app is 115.4 MB while Twitter lite is only 600 KB. This is a boon for users with limited storage on their smartphones. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Reduced data consumption

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs allow users to interact with the app even with limited or no network. This in turn allows users to incur less data usage. Take the example of Konga, a leading e-commerce website that effectively reduced 92% of user data usage through its PWA.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs integrates native-app functionalities

0 reactions
heart.png
light.png
money.png
thumbs-down.png

A PWA can be added to your home screen just like a native app. Apart from supporting native-app functionalities like sending push notifications to users, it can also integrate with the device's hardware like camera, audio, vibration motion, etc. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

No need for installation from an app marketplace

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs eliminates third-party installation since it doesn’t need to be published in an app marketplace. Users can directly go to the website and add a shortcut to their home screen.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs can rank in search engines

0 reactions
heart.png
light.png
money.png
thumbs-down.png

PWAs can be indexed just like traditional websites. Hence, you no longer need to worry about your new app getting buried in the app store or the apparent lack of reviews. With SEO optimization, you can easily claim a search rank and improve visibility.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Why Should Your Business Consider Switching To A Progressive Web App

Developing a native app is a costly and risky affair in today’s highly competitive market. PWAs are quickly becoming a cheaper, faster, and safer alternative to traditional apps. The introduction of PWAs has disrupted the dynamics of how a user connects with an application. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

The wide implication of PWA adoption by consumers has influenced businesses worldwide to choose Progressive Web Apps over native apps. If you are still confused about whether to adopt PWA for your business, consider these statistics :

0 reactions
heart.png
light.png
money.png
thumbs-down.png

According to the Top 30 PWAs report, Progressive Web Apps have a 36% higher conversion rate than native apps.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

The adoption of PWAs has led to an increase of around 50%-250% higher customer engagement for businesses globally.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Compared to native apps, PWAs lead to around 33% savings in development and maintenance.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

The average bounce rate for PWAs is 42.8% as compared to mobile Google search that has a bounce rate of 52.3%.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

On average, mobile sessions on PWAs are 80% longer than native apps. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Significant Uses Cases Of PWAs

From Twitter to Tinder, businesses across the globe are leveraging the benefits of PWA adoption. Let’s dive into some use cases across industries to understand the influence of Progressive Web Apps.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Media:

0 reactions
heart.png
light.png
money.png
thumbs-down.png

ZEE5, a streaming platform launched its PWA in 2019 to see a significant reduction in its buffering time by 50%. While the average web page takes about 20 seconds to load, the Forbes PWA homepage loads in only about 0.8 seconds. BookMyShow, an event app, recorded an 80% conversion rate through its PWA.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

E-Commerce:

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Starbucks has doubled its daily active users through its Progressive Web App. OLX, another e-commerce giant, saw a 250% increase in its engagement rate, a 146% increase in click-through rate on ads with push notifications, and 23% faster user interactions after launching its PWA. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Travel and Hospitality:

0 reactions
heart.png
light.png
money.png
thumbs-down.png

MakeMyTrip recorded a 3x conversion rate and a 160% increase in user sessions through its PWA. Likewise, Trivago witnessed a 97% increase in clicks on hotel offers and an increase of 150% in user accounts through its PWA.

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Lifestyle:

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Lancome saw a 17% increase in conversion rate and a 53% increase in mobile sessions on iOS through its PWA. The app has also increased its mobile sales by 16% year on year.  The Tinder PWA is 90% smaller than its native apps. The app successfully reduced its load time from 11.91 seconds to 4.69 seconds with its PWA. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

Is PWA The Next Game Changer?

Numbers like these do not lie. Rather they speak of an imminent disruption in the mobile app market. The business impact of a faster website with a higher conversion rate and longer user engagement is too great to be ignored. Almost every business that has adopted PWA has seen a significant shift in its app usage that in most cases has translated to higher revenue. 

0 reactions
heart.png
light.png
money.png
thumbs-down.png

For SMEs and startups with limited budgets, PWAs level the playing ground by cutting down the initial investment in app development. They also bring greater agility to your business model by focusing on deliverables like increased revenue, extended user sessions, and greater customer satisfaction. With such massive changes in user-interaction data, it is no wonder that Progressive Web Apps are being considered the future of mobile applications.

0 reactions
heart.png
light.png
money.png
thumbs-down.png
5
heart.pngheart.pngheart.pngheart.png
light.pnglight.pnglight.pnglight.png
boat.pngboat.pngboat.pngboat.png
money.pngmoney.pngmoney.pngmoney.png
by Anand Mahajan @anand-mahajan. Anand is the Founder of Sphinx Solutions having experience more than a decade. Read my stories
Join Hacker Noon

Create your free account to unlock your custom reading experience.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK