Arguably, the fiercest competition centres around the two main interfaces linking businesses to customers: websites and mobile apps. However, while the flexibility and convenience of mobile apps have seen them steal a march on browser-based interactions, the rise of a newer type of technology may yet turn the rivalry on its head: progressive web apps.

What is a progressive web app, and what does it have to offer?

Simply put, a progressive web app (PWA), is a website with all the benefits of an app. Although PWAs are typically built using commonly used web technologies such as HTML, CSS, and JavaScript, they implement innovative techniques to produce a faster, more reliable, and more engaging version of your website or eCommerce store. Besides offering increased performance, PWAs also have a richer list of features – for example, they work offline and can also link up with your camera, microphone, or GPS. Moreover, given that there is no need to develop separate iOS and Android versions, many developers are also starting to favour them over regular mobile apps.

Benefits for companies:

• Increased conversion rates;
• Users spend more time there than on a regular website;
• Increased organic search traffic;
• More affordable to create and maintain than native apps.
  

Since they offer such a positive experience from the outset, PWAs are also proving popular with users. Not only can you start using a PWA without having to download all the content, PWAs also have great SEO as their URLs are indexed by Google, making them faster to locate and install.

Benefits for users:

• Faster, almost instant load-up times;
• Possible to browse even when offline;
• Lower data usage, less memory space;
• One-click access (save the app as an icon on your phone home screen).
  

Studies have shown that the combined benefits of a PWA lead to significantly higher levels of performance and customer engagement than would be achieved by a regular website. Naturally, this will result in increased revenue for companies.

Where do I start?

Intrigued? Then perhaps the next step is to build your first PWA. As we mentioned above, because you can easily base your PWA on your currently existing website and there is no need to develop and coordinate iOS and Android versions, a PWA is usually markedly cheaper (and more straightforward) to build than a native app. Here is how to do it in 5+1 simple steps:

1. Make sure you have HTTPS: Not only does the protocol add an extra layer of security, it also makes it possible for service workers to allow home screen installation of PWAs.

2. Create an application shell: This is the entry point for users. The PWA shell should exist entirely in your index HTML document with inline CSS. This ensures it loads as fast as possible and your user isn't left staring at a blank screen.

3. Register a service worker: A service worker (a script that runs in the background) will enable you to then enjoy all the extra features of PWAs, such as push notifications, caching and install prompts.

4. Add push notifications and a web app manifest: Push notifications can be added automatically if you’re using a program like Firebase, while you also need a manifest.json so people can install your application.

5. Configure + launch: Once these steps have been taken, the only thing left to do is to configure the basic settings and launch your PWA!

+1. Analyse: Okay, that is not quite true: Once it is up and running, it is of course vital to keep track of how well your PWA is doing and adjust your approach accordingly. The RAIL (Response, Animation, Idle and Load) system is a great way to interpret the key metrics.

How popular are PWAs?

No doubt, you are wondering: is it time to make the switch and set to work on a PWA? While only a relatively small percentage of companies or websites have started working with PWAs, plenty of big brands have already enjoyed some impressive results. The luxury cosmetics brand Lancôme, for example, built a PWA because it needed a fast app-like solution to drive traffic and sales. Their PWA works even on a weak internet connection and has push notifications to engage users. These and other similar small but significant changes saw Lancôme achieve a 17% increase in conversions and a 53% increase in mobile sessions on iOS.

In 2017, Twitter launched probably one of the most well-known PWAs to date: Twitter Lite. Because 80% of Twitters users were on mobile, the company saw it as essential to provide more engaging access with lower data consumption. At 600 KB, Twitter Lite is much smaller than its equivalent Android app (23.5 MB), while it also offers web push notifications and temporary offline browsing. The results: Twitter achieved a 65% increase in pages per session and a 75% increase in tweets sent.

Look to the future

Due to their flexibility and outstanding functionality, some industry experts have predicted PWAs will outstrip demand for both regular websites and mobile apps in the future. Right now, though, you may find yourself asking: if I already have a perfectly good working website and maybe even an app, why should I worry about getting a PWA too? If you want to avoid making things too complicated, probably the simplest solution is to switch directly from a conventional static HTML website to a PWA. 

At this moment in time, PWAs offer an enviable combination of significant popularity among the most forward-looking companies – indicating their viability is strong – but still a low level of take-up among the rest. In other words, now is the perfect time to join in and make sure you stay ahead of the curve. After all, when you discover a new technology that not only offers great features to the end user, but also can save you money in terms of development costs and help streamline your business processes, the choice is simple.