Header image of What Are Progressive Web Apps?

April 5, 2018 | Shaun Bremner

What Are Progressive Web Apps?

Progressive Web Apps

As web technologies have grown, the differences between native mobile apps and web apps are starting to shrink. Desktop and mobile browsers are now able to interact with devices in ways previously only native apps were capable of. PWAs (Progressive Web Apps) are a product designed to combine all the modern features of the web, giving a rich user experience similar to that of a native app, but in a mobile or desktop browser.

There are a number of technologies at use in PWAs that work hand in hand with key UX fundamentals, which include:

  • Content download, to allow offline viewing
  • Push Notifications
  • Native Sharing
  • Instant page loading
  • Smooth navigation animations
  • Responsive Layout
  • Add to homescreen prompt.

Not only do PWAs load faster, they are often a lot smaller than their native counterpart. This is clear to see on Android with the Twitter app (25MB) and Twitter’s PWA, Twitter Lite (600kb). This small size and the use of the ‘Add to Homescreen’ Prompt, makes installing PWAs very fast and unobtrusive. This is also a great advantage as Comscore found last year that 51% of mobile app users do not download a single app in any given month.

This combination of technology and UX design gives a much more fluid experience on the web, however, the best way to understand these concepts is to see them in action.

Financial Times PWA

A number of companies have developed web apps and seen very positive results. One of the most well known is that of the Financial Times.

As soon as a user opens the FT web app, the page loads instantly while articles are downloaded in the background. This allows the content to be read offline or on a slow connection without having to get the same data again when the page is reloaded. The user is also prompted to add the page to the devices homescreen. This allows the web app to sit alongside the native apps of the device and gives much easier and faster access to the content.

The FT also took advantage of the offline capabilities of PWAs, allowing users to read stories without a connection, which greatly increases reliability for web apps.

Forbes PWA

In 2017 Forbes updated their mobile site to a progressive web app. The new design used featured images as the top stories and takes advantage of gestures to swipe through articles. After the redesigned web app, Forbes saw user engagement raise by 100%, a 43% increase in sessions per user, a 20% increase in advert views.

While Google is leading the way with progressive web apps, Apple is beginning to introduce the necessary technical features required. Most recently in iOS 11.3, Apple added the ability to create an offline web app, which can be added to the device’s home screen. Microsoft is also making headway, scraping the web to find PWAs and adding them to the Windows 10 app store.

While PWAs are still in their early stages and under active development, it’s easy to see how they have the ability to completely change the mobile app landscape. Gartner Research believe by 2020, progressive web apps will have replaced 50% of the general app marketplace, and it’s clear to see how the publishing and news industry can take advantage of them.

Guest Post by Ben Holmes, PageSuite Web Developer.

References

(Comscore, 2017) The 2017 U.S. Mobile App Report – https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

(Gartner, 2017) Progressive Web Apps Will Impact Your Mobile Strategy – https://www.gartner.com/doc/3645344/progressive-web-apps-impact-mobile

(Google Chrome Developers, 2017) Forbes – Redefining Modern Web Development – https://youtu.be/JmC0xkCMFCE

(Mevish, 2018) Twitter vs Twitter Lite: Is Lite App Worth it? – https://www.guidingtech.com/twitter-vs-twitter-lite-app-comparison