What are progressive web apps?

Simply put, progressive web apps are applications that look and load like regular web pages but have extra functionality. These additions include the ability to work offline, push notifications and device hardware access. They can be bookmarked to a phone’s home screen, launch without the browser UI screen and includes other features you’d typically associate with apps.

The term ‘progressive’ is where these other features come together. Enhancing the website to contain native app-like capabilities such as:

• Local storage
• Notifications
• Background synchronisation through service workers
• Audio & video capture

The history of progressive web app technology

The history of progressive web apps starts with a trip down memory lane to a key moment in our industry’s history, 2007. The year of the first iPhone launch.

This came at a point in time when Web 2.0 was taking shape and the HTML5 standard was still being defined. Web pages were starting to become more dynamic with interactive maps, near broadcast quality video, and local browser storage changing the way we used the web on desktop devices.

A lot of the features of PWAs are continuations in the development of those key technologies. However, at that time there was still a large gap between what was possible on desktop and mobile devices.

When the original iPhone launched (and more so with Palm’s WebOS) there was a move away from developing native apps in traditional embedded and application languages like C and C++. Instead, development with HTML, CSS and JavaScript became more prominent.

However, due to technical limitations and concerns over app quality, security and privacy, the native model stuck around, supported by a proprietary and curated app ecosystems controlled by the phone and OS vendors.

2018 - should we adopt, adapt or reject?

For PWA adoption and development there are some significant hurdles that publishers need to overcome regarding vendor and platform uptake of the progressive enhancement features. Back in 1997, browser technology was quite fragmented with a limited lowest common denominator between browser platforms.

The three mobile and tablet platforms: Safari; Chrome; and Edge vary significantly in their support of features, with basics such as offline storage requiring different implementations across each platform. For the moment history is repeating itself, creating a situation similar to 1997 before browser standardisation became practical.

It’s difficult to conclude if the lack of support for PWAs was due to a lack of a standardised technology or whether the ‘walled garden’ app ecosystem simply refused to embrace them. As with most disruptive technologies that gather significant community mindshare, it’s still unsure whether progressive web apps will be adopted, adapted or rejected.

However, it’s not all doom and gloom for PWAs, Apple’s March 2018 iOS 11.3 release started to support service workers and improved offline support, potentially paving the way for progressive web apps.

Why should you use a progressive web app?

There are clear benefits of using PWAs, mainly due to the control that the developer/publisher can keep without restrictions from the various app ecosystems, or without sacrificing security and privacy.

As the PWA is based on HTML downloaded from a typical WWW server, there is no need to register approved apps and then manage versions of these. As with a website, there is typically only one version or an opt-in beta version. Portability is important here too, as the use of commonly used and industry standard WWW technologies means that an existing website can be adapted to become a PWA.

This can be done without the need to learn and write new software based on the individual programming languages and frameworks required by specific phone and tablet OS vendors. There are going to be cases where features that are required by a native app are not possible with a PWA at the current time, however, WWW technology continues to march on and shows no sign of slowing down.

How PWAs can improve efficiency in your business

Progressive web apps can be a great investment for any business that has a sales team on the road, an online catalogue, e-commerce site or a central hub of content for distributors and retailers.

Particularly for sales agents working in the field, too often time is wasted and valuable sales are lost because they can’t access the ordering system or online brochure they need due to lack of internet. A progressive web app would enable them to work offline and still have access to all the resources, they can place orders that will be saved and synchronised as soon as an internet connection is available.

PWAs also have a centralised control that enables push notifications which can greatly increase communication efficiency, we know emails can get missed easily and a phone call is not always practical if you have an extensive client list. Applying this in the context of the distributor with a trade portal PWA, it would allow them to send instant stock updates to retailers if a product was to sell out, flash-sale price reductions or inform them of a new product added to the catalogue.

Now let’s consider this from an e-commerce perspective, how do we get customers to the PWA in the first place? By using an Accelerated Mobile Page (AMP) as an entry point to your PWA, it allows almost instant access from a search engine. Once on-site, the progressive web app will take over and operate much faster than a standard website, due to its ability to work off a template and cache itself. This combination results in a great UX, which is demonstrated by a comparison of the Debenhams PWA example in the video below. 

All your customers really care about, is that your site is quick and easy to use – they don’t really care what it’s called. Applied in the right way, PWAs have the potential to massively increase efficiency and optimise processes across a variety of sectors. If you think your business could benefit from a progressive web app, contact our team and we will be happy to talk them through in more detail.