Ben  Franklin Ben Franklin | 06 Aug 2019

What is a Progress Web App?

       A progressive web app, or PWA, is a way of developing that aims to make apps that load faster and are more performance focused. In short, PWAs are websites that make use of modern web standards and technologies, with the aim of delivering an ‘app-like’ experience to its users. A PWA can be ‘installed’ to a user’s device and works offline just like a native app.

       After installing a PWA to a device, the application should now work offline. The app leverages data caching in order to keep the data you looked at online stored on our device for use when you are offline. One of the best examples of this is the Financial Times app, a powerful PWA that allows users to consume content at will at any time, without fear of being interrupted by a lack of internet connection or reliable connection speeds.

How are they different to normal apps?

Native applications are products built specifically for a platform; iOS and Android for example. To the end user, there is not a whole lot of difference – other than the fact that progressive web apps do not have an app store presence like native apps do i.e. App store or Google Play. Possibly the greatest benefit of PWAs is that they’re built using web technologies, rather than platform specific languages. Unless they’re built with cross-platform frameworks, a native app will be built in Swift or Objective-C for iOS or Java in Android for example – and whilst Java is a widely used programming language, more developers will be comfortable with web standard languages like Javascript.

What are the benefits?

The main positive features of PWAs are:

  1. Progressive – As suggested by the name, they will work wherever the ‘web’ works. PWAs will work regardless of the browser chosen.
  2. Secure – It is a requirement of PWAs that they are served over a secure connection. So, a HTTPS protocol will protect the connection between your device and any connected service.
  3. Searchable – Like normal websites, they will appear on search engines and are fully indexable as ‘applications.
  4. Linkable – Easily shareable via URL like any normal website.
  5. Installable – Can be installed on the user’s home screen, making it more easily accessible than a standard website where a user would have to type out the full URL or search Google.
  6. Offline – No need to display the usual ‘no internet’ connection or ‘weak connection’ messages. After it’s installed on the user’s machine, a PWA will work offline.
  7. Up to date – Thanks to the core feature of PWAs, a service worker, the data can be updated if you are on a working internet connection.

What are the limitations?

As with any emerging technology, there are cons to go with the many pros. Some weaknesses are as follows:

  • Not all devices support the full range of PWA features
  • iOS support from version 11.3 and up
  • There is no official approval body like there is for native apps
  • No store presence
  • No in-app purchases and limited flexibility for loyalty programs and future engagement
  • iOS does not yet support notifications

How do I choose between a PWA or a native mobile app?

Now comes the moment of truth, you’ve got an idea, but how should it be implemented? There’s certain things that need to be thought through before development begins and some key features of native apps shine through, but there are use cases for PWAs too.

 PWANative app
Low budgetX 
DistributionX 
App Store Presence  X
Use of hardware features of the device is key to the product X
Cross-platformX 
Search engine indexingX 
In-app purchases X
The app should be purchased X
Integration with third-party apps X
AccessibilityX 
Maintainability across development teamsX 
Short go-live deadlineX 

Progress Web Apps in the real world

Not convinced, here’s a few examples of progressive web apps in use today:

  • Financial Times - https://app.ft.com/ Already mentioned in this post, The Financial Times created this great PWA so that their readers can continue reading articles on the move without fear of interruption.
  • George.com - https://developers.google.com/web/showcase/2018/asda-george This article by Google outlines the rewards reaped by George for investing time in producing a PWA solution.
  • QR Code scanner - https://qrcodescan.in/ A neat use of the device camera to create a QR code scanner.
  • Voice memos - https://voice-memos.appspot.com/ A simple app that plugs into the devices microphone to record and store recordings.
  • 2048 - https://2048-opera-pwa.surge.sh/ Great little use of a PWA to create a short game

If you think that your business could benefit from this technology, contact our Technical Director, Ben Franklin – enquiries@quba.co.uk or 0114 279 7779