Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using Progressive Web Apps

DZone's Guide to

Using Progressive Web Apps

Why choose between website and native apps when you can use both at the same time? With PWAs, you can browse what you want to, whenever you want to.

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

Let’s say that you want to be in constant touch with a website that you love, so you try downloading the app. Then you realize you have to delete a few things on your mobile due to insufficient space. Finally, you download the app and it functions great, until your net connection is lost. Is it worth going through all of this when all you wanted was to browse with ease? This was one of the reasons that the idea of progressive web apps was proposed.

37% of users use e-commerce and retail apps for one month after they downloaded it, meaning that 63% of users have churned and are no longer using the app one month after they downloaded it.

This is a huge percentage of people. What is the use of making an app if it ends up in the bin? Mobile users get irritated when an e-commerce website takes forever to load. A 500ms connection speed delay and results in up to a 26% increase in peak frustration and up to an 8% decrease in engagement.

The problem of delayed “page load” is far more critical in Africa or even the Indian subcontinent. It is of paramount importance that e-commerce marketers create powerful native experiences for their mobile users.

Progressive web apps

A website is all good (of course, if you ignore the load speed),= unless you decide to open it on you mobile. Especially when a website is not optimized for a mobile, all hell breaks loose.

There are many websites that have a mobile version of the same, making mobile websites more accessible to users and enhances user experience. It just like a regular version of the website but customized to a mobile friendly layout. In this fast-paced world, everyone expects that a website should load fast. Websites as we know, do not function offline. So what do we do?

Progressive web apps

The concept of progressive webs apps was first introduced by Google in 2015. Since then, it has been talked about with much awe and amazement. E-Commerce marketers have aggressively pursued the idea of building progressive web apps.

The Progressive web app summit recently (June 2016) explained the anatomy of progressive apps and everything that came along with it. It is the next big thing that could revolutionise the way things function and give us an out of the world experience, hence the word ‘progressive’ is prefixed to web apps. Progressive web apps address the shortcomings of both the browser and the native apps; establishing itself as a superhero for marketers and developers.

What Are Progressive Web Apps?

Why choose between websites and native apps when you can use both at the same time? This is where progressive web apps come in. What are progressive web apps?

Mobile browser audiences have grown at a rate of 1.2x over the past three years. Progressive web apps (PWAs) help developers and marketers adapt to this growing base of mobile users. PWAs have all the dynamic features of an app and also function like a website, making them both powerful and useful for the end user. They are a hybrid of native web apps and a regular website, which makes a mobile website as fast and useful as native apps.

Developers can start creating near native experiences with their progressive web apps. Here is why progressive web apps are as powerful as native apps.

Progressive

PWAs have the capability to work on any device and to provide users with all the functions that are capable according to the technology in their devices.

Responsive

They eliminate the size construct irrespective of the device.

Connectivity Independent

They should work smoothly with limited connectivity or even with no connectivity at all.

App-Like 

The PWA should feel like an app to the users as it is built on an app shell model.

Fresh

All the fresh updates should be available to the user. The service worker plays a major role to keep things up-to-date.

Safe

The web app should be hosted in HTTPS to make it secure and prevent any harmful intervention from anyone.

Discoverable

As PWAs are also like a website, it should be easy for other people to find it. One of the things that an app lacks is that it is not discoverable, as no URL is attached to it making it difficult for search engines to search.

Re-Engageable

Web apps just like native apps — they make the user engage more than once. This is achieved by a feature like push notifications.

Installable

Native apps are installed on the homepage, and so are progressive web apps. The only difference is that the former has to be downloaded from an app store. A progressive web app can be added to the home screen and can be readily available.

Linkable

It does not require any installation like a native app does and can be easily shared via URL like a website.

The blend of these characteristics make progressive web apps unique and one-of-a-kind. David Merrell, senior mobile product manager at The Washington Post, says:

“The reason it’s called ‘progressive’ is because the experience gets progressively better depending on what technology is available in the device.” 

How to Install PWAs

There are two ways to get progressive web browsers.

1. Website PromptProgressive web apps


When you browse a site for a certain number of times (varies from website to website), it prompts with a web app installation banner, asking permission to add the website to you mobile homepage. When you click on add, it automatically adds it to your homepage, which will look like an icon for an app.

2. Manually Adding

You can manually add progressive web apps by opening the website and then adding a shortcut to the home screen.

Progressive web apps

Once you open the website from the shortcut, it starts functioning just like an app and gives you a dynamic experience.

Essentials for Progressive Web Apps to Function

There are two main essentials to ensure that your progressive apps will function correctly.

1. Service Workers

Remember how we said service workers play an important role in keeping things fresh? Let’s now understand what exactly service workers are. They are like a boon to the mankind. Service workers help an web app function offline. With service workers, it is easy to retrieve data that was received when the user was last online.

Progressive web apps

Service workers act as a middle man, providing service even when you are offline. They sync background data and present it to the user. Service workers work behind the scenes and play an important role in handling push notifications. Check out our article on service workers to get better idea of what service workers are.

2. Application Shell 

An application shell is like a blueprint or a frame that is static and always present. The content that is in it keeps changing. An application shell is required to load the minimal things when a user opens the web app. It is the minimal HTTP, CSS, and JavaScript required for smooth user interface.

Progressive Web AppsAn application shell should load fast and be cached. The more times the user views the web app, the faster the cached shell loads. It is enhanced by the catching abilities of a service worker.

The Mobile Push

Over 100K+ websites are using chrome web push notifications. There is so much potential in push notifications, but many websites are not making use of it. Let’s look at the technological hype cycle to understand where we are right now.

Progressive Web Apps

The main reason for e-commerce marketers to adopt web push notification is to convert users to customers. They not only help you reach out to them, but also encourage them to spend more time on you website. Mobile push notifications is majorly an application feature. But with the advent of browser push notifications, it became possible to send it without an app, but not when users are offline.

One can’t take users for granted. Once you lose touch with them, they might not make an effort to get back to you. Maintaining constant cordial communication is necessary to keep them in the loop and encourage them to revisit your website. This means that you have to stay connected even when they are offline. This imminent demand is fulfilled by progressive web apps.

Progressive Web Apps

Progressive web apps work 24/7 thanks to service workers who make it possible to receive personal and timely notifications anywhere, anytime on mobile phones. Mobile web push notifications give timely updates and effectively re-engage the users when they are not on the browser or even when you they offline for that matter! Now that’s what we call innovation.

Progressive Web Apps

Success Stories

There are many success stories when it comes to progressive web apps. One such story belongs to Flipkart, who came up with Flipkart Lite. They used progressive web apps and saw an increase of 70%.


Progressive web apps

The users loved the amazing speed, smooth navigation, and swiftness in which it worked. The thing they loved the most is they got all of this even when they had low connectivity or no connectivity at all.

With this video made by Flipkart, you will get to know exactly how progressive web apps work.

You can test progressive web apps in Chrome 47 or later. Today there are many progressive web apps and the number is growing. Progressive web apps are here to stay. 

With progressive web apps, gone are those days of native apps and those never ending hours waiting for the connection to come back. Finally, you can browse what you want to, whenever you want to.

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:
progressive web apps ,mobile ,ecommerce

Published at DZone with permission of Pravya Pravin. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}