In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Tech

[News] Progressive Web Apps: The Future Of Mobile Web Browsing!

2018-06-09 21:58:32
3903 41

Hey, Mi Fans! Wassup!

Just 2 days ago, our most awaited MIUI 10 was unveiled with many features. One of those features was Progressive Web Apps support. But the thing is, have you heard of progressive web apps? You're probably wondering what a Progressive Web App is. Well, It's been a few months now since Progressive Web Apps have made their way into the web and mobile domains, but are you fully aware of all the advantages and benefits they offer? By the end of this thread, I'm sure you'll know everything about it. So, let's get started.

What Is Progressive Web Apps(PWA)?


  • Simply put, progressive web apps are a combination of best of the two worlds – websites and mobile applications. Progressive web apps combine the goodness of mobile apps in websites. They basically are websites with high conversion rates of mobile apps. Thus, a user doesn’t need to download them from the app store, but can simply browse them on their browsers.
  • Progressive web apps are a somewhat new and emerging concept, bridging the gap between what is currently possible with websites and mobile apps. Promising offline capabilities, improved speed, and performance compared to both apps and websites as key selling points.

Why Progressive Web Apps?
Now let’s talk about the “WHY”. Before that let’s understand what problems does it solve.

Problems With Native Apps?


We all have used Android or iOS apps on our smartphones. We use them for all kinds of thing. But while installing any Android/iOS apps we go through these problems :

  • Is this app worth downloading?
  • Do I have enough space?
  • My available data is not sufficient.

One recent survey shows that people are turning away from Android/iOS apps, because not all app experiences are satisfying or worthwhile. Some people simply don’t want any more apps on their phone, some even hesitate to download any app.

If you take a look at the apps installed on your mobile right now there might be at least a dozen apps that you do not use regularly. Sometimes apps only work well when the phone has an active internet connection.


The irony is that most of the apps have a fully responsive website performing the same functions. So why waste your precious disk space and your internet data on your smartphone by installing the native app? The average size of apps that we install from play store/app stores would range from 30–200MB. Moreover, these app needs to updated every week! But Progressive Web Apps are within some KBs and are automatically updated.

What if a website can do that and much more than a Native app? This is what Progressive Web Apps (PWA) are trying to accomplish.

Features of Progressive Web Apps:


  • PWAs are Progressive: These apps work for every user, regardless of the browser that you are using or even where you are situated in the world! So whether you are using Chrome or Opera or whether you are living in India, UK or even North Korea, it doesn’t matter! Progressive Web Apps will work just as well because they’re built with progressive enhancement as a core tenet.
  • Fast: These apps respond quickly and load content faster which helps in reducing the user bounce rate. Not only that, they function smoothly even on slow internet connections, making it a useful option in low connectivity conditions.
  • Responsive: ProgressiveWeb Apps will fit any device! Be it a desktop, a mobile, a tablet, or even something that hasn’t been created yet!
  • Works Offline: Providing rich offline experience is the key aspect of PWAs. They can work offline and re-engage users in a much deeper way without affecting performance. Unlike websites that need an active internet connection, a progressive app utilizes browser caching technology to eliminate the dependence on a network. You can actually control the cache and choose how to respond to resource requests to maintain a reliable user experience.
  • App-like feels: Progressive Web Apps feel just like an app. They have app-style interactions and navigation.
  • Fresh: Thanks to service workers, your Progressive Web App will always be up-to-date with the latest updates!
  • Safe: Progressive Web Apps are always served via HTTPS, ensuring that no-one without proper authorization can tamper with your app.
  • Discoverable: According to the W3C manifest, Progressive Web Apps are classed as apps. It easier to find a Progressive Web App thanks to service worker registration scope that allows search engines to easily find them.
  • User Engagement: PWA features like Push Notifications make user engagement very easy!
  • Installation: Users can “keep” the most useful PWAs on their home screen without the hassle of app stores.
  • Linkable: PWAs can be easily shared via URL and do not require complex installation.
  • Lowe Development Cost: Progressive web application development services demand lesser investment and can have your final app set-up quickly in comparison to native apps which require a lot more money and resources to be developed. They also significantly reduce the cost of app maintenance, making it easy on the pocket to hire a progressive web app development company.

Some Popular Companies that Do Progressive Web Apps:
  • Ola
  • Flipkart
  • pinterest
  • Twitter
  • Alibaba
  • BookMyShow
  • MakeMyTrip
  • OLX
  • The Weather Channel
  • Forbes
  • JioCinema
  • Trivago

How To Use A Progressive Web App?
Probably, you must be wondering how to use a Progressive Web App! Let’s take the example of Flipkart. When you open the Flipkart URL on your mobile’s browser, you will get something like this:


When you open the browser’s menu, you will see the option Add to Home Screen.


If you get a prompt as shown below, you will know that you are adding a PWA to your home screen.


But if the browser instead asks you to enter a name, then it is not a PWA.


Once your PWA is installed, it will appear on your home screen like this:


Just like a Native App, your PWA will also be available in the device’s app drawer.


Now when you open the PWA, you will notice that is exactly like what you saw on your web browser. The only difference is that in the PWA, there is no URL bar.


Chrome browser will automatically send you a prompt to add the PWA to your home screen if you have opened the webpage 2X times for two weeks.

Conclusion:
You might not have heard about this PWA topic but with the huge range of benefits they provide, such as saving space on your device, you’ll hear about them more and more throughout 2018 and onwards. In one sentence, PWA is the next step in web development. So try it out and be ready for the Future!

Friends, Progressive Web Apps is the vast topic to cover. I have taken some important things in this thread so if you want to know more about details, I would suggest you to check out the sources mentioned below.

So, what do you think guys about progressive web apps? Are they better than the apps we download from play store? Drop your thoughts in the comment box below. I'll see you soon with one more interesting topic. Till then, take care.

THANK YOU FOR READING.

Sources: 1, 2, 3

Rate

Number of participants 2 Experience +30 Pack Reason

View Rating Log

2018-06-09 21:58:32
Favorites21 RateRate

Semi Pro Bunny

vector5299 | from Mi A1

#1

Very useful information , thanks for sharing .
2018-06-09 22:33:26
Nice info
2018-06-09 22:42:04

Master Bunny

meetgour | from Redmi Note 5 Pro

#3

Nice Thread!!
2018-06-09 22:42:26

Semi Pro Bunny

pachan | from Redmi 4

#4

nice information
2018-06-09 22:56:08

MIUI Beta Tester

Asha@63. | from MIX

#5

Useful Information
2018-06-09 23:11:06

Grandmaster Bunny

Subhash_Deshmukh | from Redmi Note 4

#6

Nice Brother
2018-06-09 23:28:56

Pro Bunny

ShoaibS | from Mi A1

#7

thanks for the information
2018-06-09 23:32:01

Semi Pro Bunny

Bheru Bhati | from Redmi Note 5 Pro

#8

I like web apps
2018-06-09 23:55:24

App Review Team

Maji George | from Redmi 3S

#9

Thanks... informative...
2018-06-10 00:00:38

Advanced Bunny

1722515353 | from Redmi 4A

#10

thanks for sharing
2018-06-10 00:04:30
please sign in to reply.
Sign In Sign Up

Sam_crazy

Moderator

3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
Dec-100 replies in a month
100 ответов в декабре
Columnist
Techie Team Member
2018 New Year Medal
ThrowBackWithMiCommunity
Mi Community Updater
Color Your Planet
The Motivator
MIUI 10
MIUI Subscriber
MIUI 8th Anniversary
Go Bunny Master
Eid Mubarak
2019
Throwback With Mi 2018
MIUI 11

Read moreGet new
Copyright©2010-2020 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list