Software development

PW-what? A guide to progressive web apps

PW-what? A guide to progressive web apps

It’s been years since the beginning of the smartphone age. With it came the era of native apps, ones that many of us cannot go a day without. Apps have played and continue to play a massive role in our daily lives. From communicating with colleagues to checking what your friends and family are up to, the possibilities are endless. And usually, if you can think of it, there’s an app for it.

Many business owners have asked themselves multiple times: should we have an app? Of course, the only answer to that is… it depends.

Building and maintaining an app is cumbersome and often quite expensive. This is because if one is not using cross-platform technologies such as React-Native, Flutter or something similar, you will need to build your app for each target platform. Annual costs for licensing on the app store are also a major deterrent. Luckily, over the past few years, an alternative solution has been created. This option combines the joys of a native app with the technology we use on the web. This is known as the progressive web app (PWA).

What is a progressive web app?

“A progressive web app is an app built using web technologies we all know and love, such as HTML, CSS and JavaScript, but with a feel and functionality that is in most cases as good an actual native app,” says Norman van der Mescht, a BBD executive who is currently working on the implementation of a continental PWA based solution. 

Thanks to a couple of smart additions, you can turn almost any website into a progressive web app to utilise app-like features. This means that you can build a PWA rather quickly and in a cost-effective way when compared to a native app. Plus, “you can offer many of the features of native apps, like push notifications, client-side storage, and more. The technology allows one to build once and target both desktop and mobile as either a browser or as an installable app on Windows, Android and Apple devices barring that the operating system and browser support the used PWA functionality.

Van der Mescht mentions that “without even realising it, you’re probably familiar with and have already used progressive web apps.” He explains that Facebook, for example, can be downloaded onto your smartphone or desktop home screen as a PWA if you visit their website and install it. Upon opening the web app, exactly as one would do for any other app, you’ll notice that you get most (if not all) the features, or very similar to the native app. Many websites ask the user if they can enable notifications or geographic information in order to provide tailored experiences for them. This is enabled by using PWA API.

What’s the difference between native and web apps?

A 2020 study has shown that on average a native app loses around one-fifth of its users for each step between the user’s first contact with the app and when they start using the app. Van der Mescht confirms the steps by stating that, “a user must first find the app in an app store, download it (which costs users data which is often expensive for many countries), install it and then (finally) open it.” Only then does the user decide whether they like it or not. That’s a lot of steps where you could be losing potential consumers. “When a user finds your progressive web app, they will be able to immediately start using it, eliminating the unnecessary download and installation stages.”

During a recent project, Van der Mescht’s team was challenged with building one singular application that renders correctly on all KaiOS, Android 5+ and iOS 10+ devices, mobile browsers, desktops and smart feature phones (a phone with small GPUs, minuscule memory and little to no storage). This challenge presented a lot of variants that needed to be accounted for. After a deep investigation between the options, Van der Mescht’s team found that a PWA will run on all platforms and meet the necessary criteria – and be within the threshold of all devices. “A major benefit to building a PWA was that our client’s full native application was around 40MB, whereas the PWA was only 1MB.” This proved extremely useful, especially when taking into account the limitations of low-end smart feature phones as well as the cost involved in order to get access to the app.

“PWAs are not a silver bullet by any means, but like most things IT, it is important to use the right tools for the job. A PWA gives you access to many of the software and hardware features available on a device, whereas a native app gives you the ability to access them all. If your app requires some fast, native rendering features, such as a game, this is where native apps overtake.”

A well-designed native or cross-platform mobile application consumes less data over time and is much faster due to some of the resources (such as the basic UI structure and images) residing on the device, allowing them to not have to reload with every use.

A PWA only takes the best of a mobile app’s characteristics, resulting in improved user retention and overall performance, without the complications involved in maintaining a mobile application. While browsers have been quick to adopt the technology for this, there are still some limitations. On iOS, all browsers (including Chrome, Firefox, Opera, etc.) are forced to be based on Apple’s WebKit. This effectively makes the core of all browsers on iOS having to be based on Safari’s capabilities. As Apple doesn’t support everything as yet, it makes releasing a PWA a bit of a chore to achieve the same experience across mobile operating systems and browsers.

Benefits of a progressive web app

The main reason why everyone is chasing after apps is that they offer greater engagement in a shorter amount of time. Apps also provide an excellent experience that can serve a brand well.

But why should you lean towards a PWA, instead of going native? Here are a few good reasons why:

  • Single codebase which is cheaper to maintain
  • Portability to other platforms, like the trend towards Super Apps, Harmony OS, or any platform that provides a capable browser
  • Frictionless transition between web to native-like experience via install promotions to your repeat customers
  • It enables a consistent omnichannel experience

However, native apps are victorious in certain situations.

When building natively, you have access to the native operating system provided components, which provides platform consistency as well as that native-feeling animations and feedback that you will not get in a PWA. This means you can build a much slicker UI for native due to it being developed regarding the hardware’s specific technical capacities. This means that the application can make the most out of the device. This creates a more enjoyable user experience due to the interface being smoothly combined with the smartphone. However, to achieve this, you need engineers who know native mobile languages (such as Swift for iOS) so that they can develop the interface from scratch.

Take out the guesswork

An effective digital strategy harnesses the power of emerging and existing technology to help you unify processes, embed positive growth and gets the most out of your business. It’s all about optimising technology in the way that works best for your business – and that is exactly what we do best. Having been at the forefront of software development for over 36 years and with in-depth analysis, technical background and deep understanding of your current and future needs and challenges, we are adept at creating the right strategy and solution for your business.

If PWAs are on your radar, or you feel they should be, contact us today to build a world-class progressive web app.

What’s next? We’re ready!