Introduction to Progressive Web Apps (PWA)

What is a Progressive Web App?

Google defines a Progressive Web App (PWA) as  “A Progressive Web App uses modern web capabilities to deliver an app-like user experience.”

They must be reliable, fast and engaging. The main benefits of Progressive Web Apps are they enable smartphone capabilities such as

  • Push Notifications
  • Offline experiences
  • Near instant loading
  • Background Sync (Coming very soon)
  • Add to Home screen

Google provides a useful checklist for PWA’s.

What do my users see?

Your visitors wont see much different one first viewing of the website, however behind the scenes the files of the website have cached, making the repeat visit to the website near instant-loading.

Why use Progressive Web Apps & PWA techniques?

The primary reason to use it is to give a visitors a superior user experience.

Progressive web apps are

  • Instant Loading: caching UI and work offline or in bad WiFi areas
  • Engaging :  App-like look and feel or better user experience
  • Discoverable: Google and Other search engines can crawl/index PWA’s and shared via Social Media
  • Cross-Platform: They are designed to work on any browser
  • Responsive: They are built to run on phone, tablet or desktop.
  • Fast updates: No more waiting for App Stores to approve your updates
  • Background Syncing – Soon PWA technology will allow the app data to be updated in the background.
  • Repeat Engagment:  Push notifications to visitors of your PWA.
  • Installable: Can be added to the home screen.

In developing world, progressive web apps can be transformative where users are often on slow data connections such as 2g and 3g with less powerful smart phones. The average of a single web page is 2.3 MB.

Jana, a mobile advertising company, researched the  statistic between the minimum wage in a country and the cost of a 500MB a month pay-as-you-go mobile data plan.

A minimum wage worker in Germany can pay for a 500mb data plan in just under one hour’s work. In the United States of America, it would take 6 hours of work. However, in Brazil, Nigeria and Mexico, you’d need to work for nearly a whole week to afford that 500MB plan

Chart to show hours of minimum wage work needed to pay 500mb mobile data plan

Building websites to be offline first is massively important for the developing world. It speeds up performance and saves visitors money!

Back in the ‘developed world’, years of research, from Google, Amazon, Yahoo and others  have shown speed matters. Google says 53% of users will abandon a site if it takes longer than 3 seconds to load!

Near-instant loading increase user experience in the developed world (and saves them data/money)

Do Progressive Web Apps actually work?

Yes. Google has a list of case studies of progressive web applications used by other companies.

Twitter

Twitter is one of the highest profile companies to embrace PWA’s, They relaunched their mobile website as a PWA in 2017. The Twitter PWA has been a massive success

  • 65% increase in pages per session
  • 75% increase in Tweets sent
  • 20% decrease in bounce rate

Further the lead Engineer is said “The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.”

Forbes

Forbes created their progressive web app experience also in 2017 they reported the following results

  • 43% increase in user sessions
  • 20% more Ad viewership
  • 3x longer scrolling
  • 100% higher engagement

Housing.com

Housing.com is one of India’s top startups. On track to receive 50 million visits this year, it has become one of the leading online real estate platforms in India

  •  38% more conversions
  •  40% lower bounce rate
  •  10% longer average session
  •  30% faster page load

Washington Post

The Washington Post created a PWA based on Accelerated Mobile Pages Project (AMP) – the AMP version of the website “installs” the progressive web app assets behind the scenes which allows for near-instant loading experience.

  • 23% increase in mobile search users who return within 7 days
  • 88% improvement in load time for AMP content versus traditional mobile web
  • 1000+ articles The Washington Post publishes in AMP HTML daily

Alibaba

Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions.

  • 76% higher conversions across browsers
  •  14% more monthly active users on iOS; 30% on Android
  •  4X higher interaction rate from Add to Homescreen

Finally

You don’t need to restructure your app using PWA, you can implement a subset of techniques to help improve user experience – this is the approach I implemented on developing FraserClark.com and Broomhall House