A Case for Progressive Web Applications in 2017

TL;DR — If your company is or is planning on doing business in emerging markets, architecting your web applications for performance through progressive enhancements is one easy way to drastically improve accessibility, retention, and user experience.

Disclaimer: It so happens that not only people in emerging markets suffer from poor networks.

Starting last year, Progressive Web Applications (PWAs) became a really hot topic all over the interweb, as you can see here, here, here, here, or and here. Even your run of the mill Google search returns a staggering amount of chatter:

Google Web Search for ‘progressive web applications’
Google Web Search for ‘progressive web applications’

This three part series is here to tell you why they’re a good thing. In part 1, we’ll talk about why progressive enhancements are good for you, your customers, and your business. Part 2 will walk through a simple example of how to add progressive enhancements to an existing application. Finally, part 3 will test it out using another shiny tool from Google–Lighthouse–which will explain why.

And finally, I’m going to wrap it all up by putting it in the context of emerging markets.

PART 1: PWAs ARE GOOD FOR YOU

First things first: What is a PWA?

A PWA is built by baking performance early into the development through progressive enhancements. There’s a great summary of it in Pete LePage’s piece ‘Your First Progressive Web App:’

PRCAFSDRIL makes a horrible acronym, but … the point still stands.

While all of these are great for any application, the first three — progressive, responsive, and connectivity independent — are the most important: they’re what I’d summarize as the ‘accessibility aspects’ of these applications. Accessibility, in this case, basically means that any user on any device on any network can access and interact with a web application with no noticeable difference in experience. For emerging markets, this means that you and your team should be focused on configuring the application for 2G.

Google has been advocating for PWAs for a few years — in fact, last year, at their 2016 Chrome Developer Summit, progressive enhancements the focus of most discussions. And rightfully so — PWAs are slated to have a huge impact. For example, the adoption of features like Service Workers by browser vendors will drastically improve how applications are consumed on mobile devices around the world. And since PWAs can provide a much richer browsing experience, the end goal seems to be one that inches towards completely blurring the line between a web app and native application experience.

Performance goals should be for the least of your customers.

– Someone at Chrome Dev Summit 2016

Building for the next billion in mind

According to Forbes, over 70% of world economic growth over the next few years will be from emerging markets. And emerging markets are natively built on mobile. This gives PWAs a great opportunity to be a fundamental driving force of growth.

Accessibility, as I pointed out earlier, is one of the core tenets of a PWA. Even with the proliferation of the mobile cellular networks over the last few years (as shown in diagram), accessibility continues to remain an issue especially for internet users, particularly ones in emerging markets who are still remanded to slower networks than the developed world.

Mobile network coverage and evolving technologies. Source: ITU
Mobile network coverage and evolving technologies. Source: ITU

The unique accessibility problem PWAs can be configured to solve is a combination of factors including cost (2x the monthly cost of a person in a developed country), device fragmentation (mostly an Android issue), and availability of better network options (i.e 3G, 4G, or LTE).

The high cost of cellular data forces mobile users to access applications that consume as little data as possible (which is why WhatsApp is so popular in emerging markets) and for much shorter durations. I’ve personally experienced this while browsing Facebook in Nigeria: I ran through over 3GB of data in two days.

Fixed- and mobile-broadband prices, $$$. Source: ITU
Fixed- and mobile-broadband prices, $$$. Source: ITU

However, the cost of cellular data will continue to drop as the technology matures and as more suppliers compete for market dominance in emerging markets.

The next big issue is the fragmentation of the mobile device market, which is especially true in Android-dominated emerging markets:

Global Smartphone Sales. Source: Gartner
Global Smartphone Sales. Source: Gartner

For Android, fragmentation has been a bittersweet pill. On one hand, consumers have access to thousands of devices, in all shapes and sizes, price tiers, colors, different performance, whatever. On the other, developers and product teams are stuck in a awkward place, unsure of which screen size or performance benchmark to build their applications against.

Here’s an example of just how big the problem is:

Android OS Fragmentation by Device. Source: OpenSignal
Android OS Fragmentation by Device. Source: OpenSignal

Note: The chart above shows only device fragmentation and doesn’t include OS, screen size, brand, etc. Read more.

Finally, as developing countries become prime investment destinations, infrastructure will continue to be built out to support better networks like LTE and other alternate forms of access to the web services like Safaricom’s MPESA platform and for new comers like Flutterwave.

Even with these existing problems, there’s still an immense opportunity for growth. Three quarters of people have still yet to come online, and the platforms, services and apps they adopt are going to be the ones that are best configured for their network and device realities.

Global Internet Usage. Source: ITU
Global Internet Usage. Source: ITU

What does all these mean for you, your customers, and your business?

There’s a chance for you to capture some of that 3.9 billion person market. It’s really a tremendous opportunity, and anything short of that would be a gross understatement.

Fast growing online retail giants like Konga.com and Jumia (an Andela partner), both operating in Africa, see the opportunity: they’re taking a proactive, optimistic approach by leveraging the current and future capabilities of PWAs to better serve their potential billions. So far, they’ve reaped significant rewards by baking progressive enhancements into their web applications: Konga was able to cut data usage by 92%, allowing users to do more with their current data plans. And Jumia was able to increase conversions significantly by 7.85% (vs 4.5% for native app). That makes a big difference.

If you’re a CEO/CTO, product owner, or product manager, you’ll only find yourself at considerable ease when you know all of your customers have been served. And as a customer, you’ll have better access to your favorite web applications with a richer browsing experience. It’s a win-win for both parties, especially the enterprising business who can drastically increase conversion, reduce bounce rate, increase their visibility and assure better data security.

Google has some more compelling case studies as to why progressive enhancement should be the roadmap of your web application.

At Andela we’re constantly mulling over how to best empower the next generation of technology leaders. As we expand through the continent of Africa, finding some of the most talented individuals, we’re always looking for better ways to reach them. Luckily I’m part of the team–Marketing Tech–rebuilding our website to adhere to the accessibility standards progressive web apps are setting and of which I’ve made a case for in this post.

In the next chapter, Part 2, we’ll build a simple progressive web application. Here’s a quick teaser:

You can quickly begin progressive enhancements by:

1.Adding W3C compliant Web App Manifest file.

Example manifest.json file in root directory (preferably)

{
        "name": "Andela",
        "short_name": "Andela",
        "description": "Extend your engineering team with world-class developers",
        "lang": "en-US",
        "start_url": "/",
        "display": "standalone",
        "orientation": "portrait",
        "theme_color": "#3359DF",
        "icons": [
          {
            "src": "static/homescreen-128.png",
            "sizes": "128x128",
            "type": "image/png"
          },
          {
            "src": "static/homescreen-144.png",
            "sizes": "144x144",
            "type": "image/png"
          },
          {
            "src": "static/homescreen-152.png",
            "sizes": "152x152",
            "type": "image/png"
          },
          {
            "src": "static/homescreen-192.png",
            "sizes": "192x192",
            "type": "image/png"
          },
          {
            "src": "static/homescreen-64.png",
            "sizes": "64x64",
            "type": "image/png"
          }
        ],
        "background_color": "#3359DF"
      }
      

2.Installing a Service Worker

Example service worker registration in a sw.js file (you can name this whatever you like)

  //register service worker
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', function () {
            navigator.serviceWorker.register('/sw.js').then(function(registration) {
              console.log('SW Status: Registered Successfully');
            }).catch(function(error) {

            });
          });
        }
      

3.Serving your web application over HTTPS

Adios for now. See you in Part II.