blog image

Why Build a Progressive Web App?

General | 6 min read • 12 July 2017
Why Build a Progressive Web App?

If an app were a morning coffee cup, we’d probably prefer a PWA.

We want our drink to be good enough and readily available. Homemade coffee tastes nice but takes time and money (just as native applications). Instant coffee on the go is not costly, but it is not that good and not always instant (like web apps). A progressive web app feels like a gourmet coffee served at the drive-through. The next time you pass by, you will get a cup of your favorite from Netherlands with a special discount.

With PAs, developers are able to achieve two goals at once. On the one hand, they save efforts, as progressive apps are lightweight, fast to create and more or less easy to maintain. On the other hand, they deliver a high-quality experience and engage users. PWAs live in the browser window, but later prompt people to install them.

However, had the things be just that bright, every company would create a progressive web app. In reality, the innovation has its pros and cons and does not suit everyone. So, let’s see how it works and who are the early adopters.

 

Progressive web app features and how they came to be

Until 2015, there was a controversy between the web and native apps. The former were fast to build and well-performing on the web, but slow to load and less compatible with the variety of devices. The latter took away extra time of hired specialists and memory of the consumers’ phones but coped with more functions in less time.

Hybrid applications and Facebook Instant Articles have been a kind of an answer to that controversy, but they still lacked many important functions. For example, hybrid functionality does not work ideally with your phone camera, microphone, and so on. Hybrid app solutions can’t serve when the gadget is out of network, and they don’t have the technical ways to re-engage users.

In June 2015, a Google engineer Alex Russel invented the concept of progressive growth from browser tabs to app-like screen residents. The product was fast, safe, available offline and highly searchable. These progressive web app’s features help to deal with consumer traction. “First download, then use” has turned into “Let’s see how good it is, so maybe in time it can live on my home screen.”

There are more reasons why Russel’s solution is convenient for customers:

  • It is more reliable than native apps due to offline performance and data savings. The new Google standard called “service worker” helps eliminate data waste. Konga, for example, managed to save 63% on the page load time and 8% of the first transaction time. The speed is also incredible, even out of network.
  • It runs on HTTPS, which results in a higher level of security.
  • Responsive design makes for a fairly pleasant UI/UX, though a backward navigation remains a problem.
  • No updating or refreshing is needed.
  • Less phone memory is necessary both for online use and installation.
  • Though there is still no access to the system settings, flashlight, telephony, browser bookmarks, and contact list, PWAs are well-integrated with most of the up-to-date mobile hardware. The ability to be linkable with other apps through intents is yet to come (see more here)

 

There are also reasons that make progressive web app development attractive to the industry leaders like AliExpress, AirBerlin, Flipkart Lite, and Dev.Opera (other examples are available at the special resource):

  • Push notifications motivate users to return (according to Localytics, the average retention with push messaging is 88% compared to the one without it).
  • Development will require less expertise, lasting (and costing) less. You don’t need Java, Swift, Objective-C, or C# experts; one or two JavaScript programmers will do just fine.
  • The product has a high potential to be discovered, and there is no need to pay fees to any stores. Some bloggers are optimistically calling this ‘the future of SEO.’
  • As the interface is close to a native-like, CPA is likely to be favorable.

 

The table below summarizes the characteristics of native, web, native+web, and progressive web apps. Examples are given above the columns.

 

  Native Hybrid Web PWA
Costs & Resources
Cost to develop high moderate low low
Deployment and maintenance high moderate low low
Time to develop much less less less
Phone memory yes yes/no no no/yes
Revenue (CPM) high moderate low high
Separate codebase for each platform/ Version segmentation yes sometimes no no
Functionality
Hardware access yes yes but not ideal yes but not ideal yes
Cross-platform functionality yes limited limited limited
Push notifications yes no no yes
Deep linking when sharing yes no no no
User experience
Loading on homescreen yes no no yes
Working offline yes no no yes
UI/UX consistency strong medium weak medium
Responsive design no no no yes
Performance
Page speed high moderate low high
Dependence on the network no yes yes no
Cross-browser work no yes yes no
Distribution
Availability for iOS&Android yes yes yes limited
Searchability low low high high
App stores: benefits yes yes no no
App stores: restrictions yes yes no yes

 

Along with its benefits, the innovation has its limitations:

  • It is not available for iOS. Thanks to the Cordova plugin, it is possible to reach a kind of a compromise with this platform. It has been suggested that the ideal way to get through this is to work on the PWA and iOS at once.
  • Cross-browser features may be out of work. Currently, the technology is only supported by Google Chrome.
  • The old consumption patterns will stand in the way of searching your URL on the internet.

 

Should you build a progressive web app?

To sum up, the answer to this question depends on how the core business needs are defined:

  • How often will the clients use mobile? If less than once a day, an adaptive or responsive website could serve better.
  • Should the audience be as wide as possible? If reaching Apple users is critical, reconsider the idea.
  • Are there any crucial features that need cross-browser compatibility or access to special hardware? If so, we’d recommend calculating the price of possible alternatives.

 

Before the start

Google has a minimum starter kit and a ‘perfectionist’s guide’ for those who are willing to experiment with the new format. In short, here is what your developers need to research to make a progressive web app:

  • HTTPS server setup;
  • registered service worker (a special registered script compatible with HTTPS only, check browser support here or on the screenshot above);
  • the additional file referred to as the Web App Manifest (more on the issue);
  • application shell, that is, the basic HTML/CSS and Javascript elements;
  • checkup for mixed page content.

It may also be useful to browse through the samples of different native/web/mixed solutions.

May the progress be with you!

Recent posts

Contacts
10828, Fruitland Dr, Studio City, CA, USA 91604
Rotermanni 2, Tallinn 10111, Estonia
Borshchagivska str, 154, Kyiv, 02000
Arkhitektora Artynova St, 12а, 21000, Vinnytsia, Ukraine
Let’s get in touch
Sending...
Your email address will not be published.