back

Does Your Business Need a Progressive Web App? [Infographic]

by Katerina Reshetilo
Does Your Business Need a Progressive Web App? [Infographic]

If you read tech news, there’s a good chance you’ve already heard about progressive web apps (PWAs). However, after going through the articles and videos available on the topic, we saw that most of them have been created by developers for developers. That’s why those of you on the business side may still be struggling to understand what a PWA really is and what its business applications are.

In this article we will explain the concept behind PWAs, as well as show how PWAs are different from all other apps and websites we already have. Most importantly, we’ll give you ideas of how you can use PWAs for your business.

  • Why Progressive Web Apps?
  • What are progressive web apps and what is really new about them? What are their benefits and limitations?
  • How can you apply PWAs to your business?

 

We created this Infographic in partnership with Skilled, you can add this infographic to your site by copying and pasting the text below:

<a href=”https://greenice.net/business-need-progressive-web-app/” title=”Does Your Business Need Progressive Web App? [Infographic]”><img src=”https://greenice.net/wp-content/uploads/2017/03/1_part_pwa.jpg” width=”800″><img src=”https://greenice.net/wp-content/uploads/2017/03/2_part_pwa_final.gif” width=”800″><img src=”https://greenice.net/wp-content/uploads/2017/03/3_part_pwa.jpg” width=”800″></a><br>Presented by <a href=”https://greenice.net/” title=”Greenice.net”>Greenice.net </a>

Why Progressive Web Apps?

We already have websites that are mobile and responsive. We also have native mobile apps and apps that try to look native (web and hybrid).
Why do we need yet another type of app?

Google says there are vital things that can be improved in both the mobile apps and websites we use nowadays:

  • High friction of mobile apps
  • Bad user experience with mobile websites.

High Friction of Mobile Apps

As Chrome developer Alex Russell states, the biggest problem with native and ‘native-like’ mobile apps is high friction and users don’t like it.

This means that users have to overcome a lot of obstacles to access the goodness of these apps (compared to the web). Typically, users have to go through four to six steps to access a mobile app from an app marketplace (App Store, Play Market, etc.). According to industry experts, 20% of users are lost at every step.

On the web, users are only one click away from the content. That is why we browse four times as many websites than apps we use . Mobile browser traffic is actually twice that of mobile app traffic, according to a just-released Morgan Stanley report.

Websites Are Not Mobile Enough

Although users open four times as many websites as apps on their mobile devices, they don’t spend much time on them. ComScore’s research shows that 87% of mobile Internet time is spent in apps.

The reasons for such behavior are quite obvious…

A survey found that those who prefer apps over the mobile web prefer them because:

1. ‘Mobile apps are more convenient’
2. ‘Mobile apps are easier to use’
3. ‘Mobile apps work when my phone’s not connected’
4. ‘Mobile websites often don’t look good on my phone’

Source: IAB-sponsored Harris poll.

Generally speaking, mobile users prefer to discover content via the web, but would rather consume it in native mobile apps, as those provide a much better user experience.

What Are PWAs?

According to Google, a PWA is a wonder child born out of a love match between web and mobile. This kid is supposed to take the best from each parent and, perhaps, one day even replace mobile apps altogether, who knows…

PWAs are like websites, but PWAs are like mobile apps, but
  • Have app UI when used on mobile devices (full screen, app navigation, splash screens…)
  • Work well regardless of Internet connectivity
  • Send push notifications, even when the app is closed
  • Automatically refresh after each content update
  • Installable
  • Can be discovered in search engines (therefore, promoted with SEM)
  • Can be linked to and shared
  • Distributed via web (avoiding the hustle of app marketplaces)

In a nutshell, PWAs are supposed to be websites that take advantage of the web superpowers, while at the same time looking and feeling like mobile apps when used on mobile devices.

Users can discover, link to and share PWAs on the web and at the same time install them on mobile devices and use them as ‘native’ apps.

Source: Getting started with Progressive Web Apps

Characteristics of Progressive Web Apps, by Google

Pete LePage, Developer Advocate at Google, came up wit the following list of PWA characteristics:

  • Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive – Fit any form factor, desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low quality networks.
  • App-like – Use the app-shell model to provide app-style navigations and interactions.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via TLS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope, allowing search engines to find them.
  • Re-engageable – Make re-engagement easy through features like push notifications.
  • Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL and not require complex installation.

You Don’t Need All PWA Features to Call Your App Progressive

Your app doesn’t need to possess all of the characteristics of a PWA to be called progressive. Depending on your business needs and budget you may choose one or more characteristics.

For example, eXtra Electronics and Jumia chose only push notifications out of the array of PWA features and they are still listed in PWA case studies (May 2016) on Google’s website for developers.

Limitations of PWAs

You might already be sold on the idea of progressive web app for business, thinking that this is a universal solution that will replace mobile apps altogether.

Not so fast! PWAs have some serious limitations, which you definitely should consider before investing in one.

  • You might not be able to reach all of your potential users, as not all browsers support PWAs

As we explained earlier in this post, PWAs only work in browsers (even when you don’t notice it) and need special browser technologies that enable all of their features. Only Chrome, Firefox and Opera offer the technologies (Service Workers, Push Notifications…) that can make your web app progressive.

Although Chrome, Firefox and Opera make up the biggest part of the U.S. market (58%), we cannot discard the other two giants, Safari and Internet Explorer (36%).

This means that in these unsupported browsers your progressive web application will look and act like a website, but without such extra frills as offline mode, automatic refreshing, push notifications and so on.

Browser usage in the USA in 2015-2016:

That’s why, if some part of your audience is using incompatible browsers, you need to think of other ways of offering ‘progressive’ features to them.

  • Your progressive app might lack ‘native’ functionality, look and performance

“If you want a fairly solid, lowest common denominator app, HTML5 and JavaScript is perfectly fine. There’s nothing wrong with that. If you want to take it to the next level and use device specific features, you’re going to have to write a native application. It’s just the way things are.” Les Hazlewood, Java One speaker and CTO of Stormpath

  1. Performance limitations and increased battery use
  2. Can’t access all device specific functionality.

The more complex your app has to be, the harder it will be for developers to get it to look and act as well as a native mobile app.

  • Performance limitations and increased battery use

This happens due to the limitations of HTML5 and JavaScript, the main technologies for PWAs. These technologies were invented for the web and not for mobile development. Although the creators of HTML and JavaScript have put a lot of effort into making them work for mobile, it is still not enough to match the possibilities of native mobile development.

When developing a native app, programmers use the programming language of the platform an app will be used on (C for iOS, Java for Android and so on). That is why these apps are called native.

Native code has a lot of advantages compared to an interpreted one (like HTML5 or JavaScript). Mobile devices need much less resources to run a native code than to convert and run an interpreted code.

These limitations will hardly be noticeable with simpler apps. However, if your app has many features and a complex interface with a lot of controls, users will experience slow loading and increased battery consumption.

The performance will also vary depending on the mobile device’s processor. Therefore, users of newer, more evolved devices will have better experiences with a complex web app than users of budget smartphones and tablets.

  • Can’t Access All Device-Specific Functionality

Although a lot of progress has been achieved in bringing native low-level device functionality to web apps, the gap with native apps still hasn’t been entirely bridged.

Therefore, if your app relies on a feature like geofencing, advanced camera controls, inter-app communications, contacts or any other from the list of unsupported features, you should consider developing a native app.

Economical Reasoning

Since we are talking about the implications of PWAs for businesses, we couldn’t omit the cost issue. However, it is extremely hard to give estimations of different types of websites and apps, as each project is unique. That is why we ask that you please view the numbers below only as a rough comparison.

Website PWA Native App
Custom-built
Responsive/adaptive
App-like
Installable
Connectivity independent
Re-engageable
Native rich UI/UX
Improved performance
Utilizing mobile device functionality
$3–$10K $6–$20K $20–$80K

As you can see, generally speaking, PWAs are more expensive to develop than websites, but cheaper than native mobile apps.

When It Makes Sense to Develop a PWA

Depending on your business, progressive web app can be a great solution for you and your company, or there may be better alternatives.

We’ve prepared a brief list of scenarios when PWAs might be good for you.

  • Most of your users use PWA-supported browsers (Chrome, Firefox and Opera)

If most of your current and potential clients are using PWA-compatible browsers, then PWA could be a great solution for you.

Flipkart, an Indian e-commerce startup, is able to reach most of its audience with their progressive web application. Chrome is the most popular browser in India (over 70% market share) and Firefox takes second position (over 16%). That is why Flipkart developers don’t have to worry that a big part of their clients won’t be able to enjoy full PWA functionality.

  • You are building an app for internal ‘corporate’ use

Another scenario when you don’t have to worry about reach is if your app is intended for internal use only. In this case your audience will be narrowed down to your team, or your client’s team. Most of the time we are talking about custom applications for work automation.

This is Paul, our star Sales-Guy

 

At Greenice, we often get to develop this type of apps and in many cases we incorporate PWA features in them. Namely, we’ve created a parsing app that automatically fetches relevant information on potential projects from open sources as soon as those jobs are posted. This app automates a considerable work chunk for our sales manager.

Our app uses Service Worker to get automatically updated as relevant information is posted on the web. The parser app also sends push notifications to notify our sales manager as soon as relevant information is posted.

This app runs only in Chrome and we have no problem with it. Our team members are comfortable with using various browsers for various purposes.

  • You already have an iOS app and need to build one for Android

As you’ve read earlier, users of incompatible browsers will see PWA as just a website with no extra progressive features.

Therefore, if you want to provide users of unsupported browsers with a ‘progressive’ experience, most likely you’ll have to build a native iOS app.
There are ways of adding progressive features separately for each incompatible browser, but it would mean extra effort and investment with uncertain results.

 

That is why Selio, a marketplace for Europe and Latin America, decided to offer a native app for iOS users.

  • Your app is content-driven, so doesn’t require mobile device functionality

You already know that so far even progressive web app cannot entirely replace native apps when it comes to using the hardware functionality of mobile devices.

However, we have been able to successfully build a number of web apps that are content-driven and don’t require native mobile functionality.

A good example of such an app is an educational game that we’ve developed for a training conference. The educational game app is a quiz game, where users have to answer various questions (multiple choice, drag and drop, fill in the blank), score points for correct answers and compete against each other.

This game was built with web technologies (JavaScript/HTML5, among others). It works online and offline. It also automatically refreshes, showing the user’s score, as well as the scores of other participants in real time.

Conclusion

Both mobile websites and apps have issues that prevent their creators and users from taking full advantage of them.

Users tend to spend very little time on websites compared to mobile apps, due to the poor user experience compared to mobile apps. Mobile websites are usually slower, less user-friendly and unable to work offline or with bad connectivity, as opposed to apps.

However, despite their usability advantages, mobile apps are much less fluid than websites. Most of the time users have to find apps only on app marketplaces and not in search engines, which we are all so used to. Upon discovery, users have to follow a subsequent number of steps to actually get to use an app. In contrast, with websites everything is just a ‘click away’. As a result users limit the number of apps they use to just a few favorites.

Google introduced progressive web apps in an attempt to bridge the gap between mobile web and mobile apps. PWAs are called to bring the app user experience to websites, making them more comfortable to use on mobile devices, while at the same time providing content that is just ‘a click away’.

PWAs look like apps on mobile devices, work well with bad Internet connectivity and even offline, and provide push notifications, while still being websites that users discover in search engines, link to and share.

Nonetheless, PWAs are not ready to entirely replace mobile apps (at least not yet). They still have significant disadvantages. Namely, PWAs work in a limited number of browsers, only in Chrome, Firefox and Opera, leaving out users of Internet Explorer, Safari and others. PWAs also have performance limitations, as well as a limited amount of device-specific features that developers can implement in the new app compared to native mobile apps.

So far we can’t say that PWA is a universal solution that fits everyone and anyone. There are, however, use-case scenarios in which you can reap all of the PWA benefits.

Co-author: Sergey Opanasenko, Co-Founder of Greenice. Together with his business partner, Sergey oversees the agency operations and cares for the wellbeing of the team. Former programmer, he is known for his critical thinking and problem-solving skills, as well as passion for technology. Also a loving husband and father.

 

Get FREE cost estimate for your web app!

Contact Us

Apache vs Nginx: How We Chose Nginx Over Apache After 300 Users Case
Prev post How Much Does It Cost to Develop a Web App?
Leave a comment

It depends! I am sure you’ve heard that one before. However, we’ll do our best…

Apache vs Nginx: How We Chose Nginx Over Apache After 300 Users Case
Next post Apache vs Nginx: How We Chose Nginx Over Apache After 300 Users Case
Leave a comment

If you are still into Apache vs Nginx comparison, this article may help make up…