An introduction to Progressive Web Apps

Many people believe that web apps can’t compete with native mobile applications and to be honest, they’ve had good reason. Websites traditionally require an internet connection to run and when smartphones first came around, it took the web industry a while to transform their websites to behave responsively on mobile devices. Poor mobile UX and flaky network connections are what has kept the public thinking this way.

Progressive Web Apps are making it possible for websites to compete with native apps by allowing websites to run offline, entice users back to the app using web notifications and making them installable on the home screen.

Google recently invited some developers from our team to a two-day training programme and help us get started with Progressive Web Apps by going through the new technology and how we can use it today. The Toaster dev team were also lucky enough to go to the Polymer Summit in London last year where PWAs were a big feature, so we’re very excited about implementing these technologies across our projects.

In this short article, we’d like to give an overview of what PWAs are, their key benefits and why we’re using them at Toaster.

What are PWAs?

Coined and endorsed by Google, PWA isn’t a technology in itself but a terminology made possible by a set of new API’s available to web developers. It aims to push developers to build fast, reliable and engaging web applications.

There are many business cases on why PWA would be great for your app, with a plethora of big name web companies sharing their stats since they upgraded their site to use PWAs.

For example Alibaba saw an increase of 76% conversion rate, 4x high interaction rates when introducing the add to homescreen option and 30% more active users on Android.
And Flipkart tripled the time-on-site from 70s to 3.5 minutes after introducing PWA. These are big companies, so it’s encouraging that they’re seeing these kind of results.

Key features of a PWA

Other features

Responsive. Make use of all of the responsive tools out there for you to use. Media queries are bread and butter for most web developers, but there are many new elements and APIs available on the platform for us to use.

Fast and snappy. Users expect native apps to be snappy and run at 60fps. They therefore expect web applications to act the same way. If they’re slow and clunky, there will be a higher drop off rate. If you’re new to this, check out videos from Paul Lewis (AKA Aerotwist). He gives very clear explanations on how the browser manages paint cycles and what you can do to optimise your site.

Progressive. They should deliver all of the features to browsers that support them, but for older browsers, the site will deliver a working version without the bells and whistles

Discoverable. As always, SEO is extremely important for driving traffic to your app, and this is something that native apps are not really good at. Making your app searchable from search engines is a big bonus over native apps.

Linkable. The web is driven by URLs, and the ability to link to any part of your app from a link is extremely powerful. Native apps have tried to compete with app schemes, but these don’t match the power of web URLs. When you design the architecture of your app, make sure this isn’t forgotten.

PWAs at Toaster

There are a lot of reasons why Toaster started looking into Progressive Web Apps. We’re always looking at new and innovative ways to improve performance of the websites we build. Also, 40% of mobile users are reported to leave a website if it hasn’t loaded after 3 seconds after all. Using service workers to cache our sites, and implement offline capabilities in the websites we build seemed like a no-brainer to us.

The video below should give you a good indication of how much service workers can improve loading time.

Being able to offer clients new technology such as web notifications is a great way to help them achieve their goals by increasing engagement across their site, as well as benefiting the end user too. This is one of the main reasons we started looking into PWAs - it benefits both parties and helps build a better web for all.

The great thing about following the PWA methodology is that it creates tangible benefits the user will appreciate. Even if the user does not save your app to their home screen, making performance upgrades such as caching your site, making your site run at 60fps and using clever techniques to use less data on mobile will improve the users' experience and they will notice a difference. If a user has had a pleasant experience on your web app, they’re likely to return.

Stay tuned for future articles on Progressive Web Apps. We will be sharing our experiences and insights with deploying PWAs in production, along with guidance and tips for integrating it into apps.