Progressive Web Apps

Progressive Web Apps: best of the web in an app

The humble webpage has traditionally had a rough time on phones and tablets.

Ever since the release of a certain fruit-related device in 2007 and the subsequent smartphone explosion, the mobile web has played second fiddle to native mobile applications. It’s not hard to see why, with mobile websites often delivering a slow and frustrating user experience, especially in comparison to slick and responsive native apps.

Until recently, web applications, running within the mobile browser, have done little to win back the crown. But over the past couple of years, a new approach to mobile software development has materialised in the form of the Progressive Web App.

The idea behind the PWA is to take the best bits of the mobile web to create a fast, engaging, app-like experience. The ideal Progressive Web App is essentially a website that looks and feels like a native app, without the drawbacks associated with either platform.

The webpage strikes back

As we entered the mid-2010s, enhancements to the mobile web suddenly made web apps competitive again. HTML5, CSS3 and JavaScript have all seen ongoing improvements to offer a much higher standard of performance and functionality on smartphones and tablets. The devices themselves have also evolved to become far more capable.

Before Progressive Web Apps really took off, hybrid apps laid some of the groundwork. These are applications that use mobile browser technologies to function like a native app. However, hybrid apps rely on an ‘app wrapper’ to bring various elements together, and as such they aren’t accessed via a browser, instead requiring an app store download.

The term ‘Progressive Web App’ was coined in 2015 by designer Frances Berriman and Google Chrome engineer Alex Russell. They defined key features that characterise a PWA as an application that works via a mobile browser while delivering the experience you’d expect from a native app. Since then, Google and its partners have been pushing Progressive Web Apps hard.

A recipe for progress

Google has laid out what goes into a Progressive Web App, highlighting the need for a reliable, fast and engaging user experience.

  • The reliable part refers to things like always having something for the user to look at, even when offline or on a dodgy network. For example, utilising the cache to show them information they’ve previously accessed.
  • Being fast is vital to divorce PWAs from the widespread (and often unfair) assumption that any mobile site will inevitably load slowly. This is where the latest mobile browser technologies and performance optimisation come in.
  • By engaging, Google means that a PWA should be as integrated and accessible as any native app on the user’s device. Options to add it to the home screen and enable push notifications go a long way towards this.

So if these are the defining features of Progressive Web Apps, what makes them a more attractive prospect than either traditional web apps or native? What benefits do they offer to the user and why would a developer want to build one? By combining elements of native apps with the mobile web, PWAs should provide the best of both worlds.

As functional as a native application can be, it still needs to be downloaded via an app store and installed, taking up precious time, mobile data and storage. A Progressive Web App, on the other hand, is a 100% in-browser affair, with no substantial download required.

Users have instant access to the PWA’s functionality, with the streaming nature of the web allowing content to be loaded on the fly. And because they’re web-based, PWAs are much easier to discover and share via links and search engines.

A Progressive Web Application can offer the user all this, while maintaining the seamless experience of a native app. If they want to add an icon to their home screen to launch a PWA like any other app, it’s a simple touch of a prompt. Developers can easily add this feature via the web manifest file.

The service worker browser script allows push notifications to be implemented on the user’s device, helping to keep them engaged, and potentially driving conversion. Service workers can also make use of the cache to always display something relevant, even in offline mode, and give the user a consistent, app-like experience.

For anyone interested in developing their own Progressive Web App, getting started is now relatively straightforward, with Google and its partners offering in-depth support alongside numerous tools and resources.

How are these web apps progressing?

The push towards Progressive Web Apps is very much in line with Google’s recent focus on mobile. From ‘mobilegeddon’ to ‘mobile-first indexing’ and Accelerated Mobile Pages, it’s clear that the search giant has a vision of the future web with mobile at its very core. As we highlighted in a previous article, all this comes in the context of mobile browsing overtaking desktop worldwide, making the mobile user experience a critical part of any online presence.

Some big names have been quick off the mark to embrace Progressive Web Apps. Major publications like The Washington Post have already forged ahead, and India’s largest online retailer, Flipkart, has seen a 70% increase in conversions since replacing its native app with a PWA. For more examples of Progressive Web Apps in action, you can visit pwa.rocks.

Full support for Progressive Web Apps is currently limited to platforms maintained by Google and a few partners, with Chrome on Android the most prominent example. But what about the other big smartphone OS?

When it comes to PWAs, Apple is something of an elephant in the room. With the App Store raking in billions, it’s tempting to assume Apple would be dead against the widespread adoption of Progressive Web Apps. Ultimately, though, PWAs are all about a better user experience, something Apple prides itself on, and an area where it can’t afford to be outpaced by Google.

If you’ve been inspired to start working on your own Progressive Web App, you’ll need a reliable platform. CloudNX is the next-gen cloud server solution from Fasthosts, and it’s perfect for app developers. Servers can be scaled on demand to meet your development needs, and you only pay for what you use. With 24/7 support, UK data centres and a full range of enterprise features, Fasthosts gives you a rock-solid foundation to build innovative and engaging mobile experiences.

Be Sociable, Share!