Introducing progressive web applications

There is a lot of confusion about Progressive Web Applications (PWAs). Some people conflate them with native apps (Swift iOS/Java Android) and cross platform apps (React Native/Flutter), but they are different. Unhelpfully there are a lot of different definitions bandied around the web, so here's my take on things for clarity.

PWAs are relatively new, but by now are well established, and quickly increasing in popularity as a cost-effective alternative to native apps. Based on the web, they can be accessed as a website via a browser, but crucially they can also be rendered in an app shell so they look, feel and perform like any other native app on a device.

What does this mean in practice? Fundamentally, PWAs offer greater flexibility to the end user. Where a native app is deployed via the app stores, a PWA is deployed via a web browser (earning them the description of 'websites that took all the right vitamins'...) The user is given the option to interact with a PWA via their browser, but they can also add it to their home screen where it will appear as an app icon. The likes of Twitter, Instagram, and Facebook all now provide PWAs.

Characteristics of a PWA

To be considered a PWA, Jeremy Keith asserted the following criteria must be satisfied:

• Served via HTTPS
• Includes an app manifest
• Uses a service worker

In theory, any website that includes the above could be consumed as a PWA. They support the vast majority of native device capabilities, work offline, and can be installed on a device’s home screen — providing all the benefits of traditional web apps, and even a few more.

The best of both worlds

Having always admired the openness and inclusivity of the web, I've always felt comfortable building web apps using open standards. Native apps, however, are a challenge to this as they can be thought of as walled gardens driven and controlled by specific vendors. The growth of native app development is significant, but native apps and app store deployment processes can still be painful to work with.

What I like about PWAs is that you can build them using the same stack you would use to build any web app, their content is indexable, and you can build them once for the web. But you can also present them as native apps and hook into the majority of native device capabilities, such as notifications and location services, for example. It is like having the best of both worlds - it's a huge advantage and a very efficient approach to app development.

What's more, the performance of a PWA when consumed via the native shell is increased compared to browsing a website on a phone because you can utilise the device hardware. This is another important advantage to consider.

Apple or Android?

When building a PWA most things work as expected when it comes to utilising native Android device capabilities. However Apple support for PWAs is lagging behind in some places and is less reliable, so you need to consider this if your target device is Apple. You should also be prepared to find workarounds if your need for native capability is significant, but I would only expect this to improve as popularity and appetite for PWAs increase.

Here is a good list outlining Apple support for PWA that will help you make an informed choice.

PWAs at TPXimpact

PWAs are a core part of our capabilities at TPXimpact. Our rationale for recommending a PWA to our clients focuses on operability and efficiency:

• Operable - PWAs are ideal for use on different devices (phone, tablet, desktop and web) and support a wide range of functional and non-functional requirements. This covers both what the app should do and the qualities it has (security, testability, scalability and performance).
  PWAs are also able to work offline, making them ideal solutions for working in the field or where there is poor network coverage.
• Efficient - We can build the solution once, using a single codebase, and the PWA will adapt and respond to different device characteristics. This makes PWAs much more cost and time efficient to create.