Progressive Web Apps - Benefits & Challenges
George Old is a Front End Architect at Salmon. Here's his quick guide to Progressive Web Apps (PWA's). The article looks at what they are, the technical enablers, benefits and challenges.
A Progressive Web App (PWA) is an application that builds upon the foundations of a responsive web application.
A PWA is an application that is:
- Reliable – Regardless of network connectivity the web application still renders usable web pages. The frustration of going through that tunnel whilst about to hit the ‘add to basket’ button and getting the dreaded dinosaur page is now no longer a common gripe with PWA.
- Fast – PWA’s by nature are super-fast, pages load in a fraction of a second and user interactions such as scrolling are optimised to mitigate a janky scrolling experience.
- Engaging – The experience is akin to a native app – ability to add to home screen, push notifications and responsive interactions. They have also been shown to significantly improve mobile conversion.
- Proxy (Service Workers) - Service workers are a client-side technology that acts as a network proxy, intercepting the request between device and server.
- Caching – The service worker allows intercepted server responses to be cached on the local device. When new pages and associated assets are requested, the service worker can check the cache first and return the asset. This speeds up the application because it doesn’t need to request the asset from the server. It also means that when a user has limited network connectivity, the app is still able to render a page from the cache.
The benefits of building a PWA
- Retention - 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.
- Increased conversion - The ability to deliver an amazing user experience helped AliExpress improve conversions for new users across all browsers by 104% and on iOS by 82%.
- Reduced overhead – Build once, run everywhere. No need to develop a dedicated app for each mobile platform.
- Not universally supported – iOS currently doesn’t support the big PWA enablers such as service workers, push notifications and add to home screen. However, this is currently ‘in development’.
- Retro-fitting a PWA to existing application – This can be a lengthy process and could require lots of changes and additions, especially if your application architecture is monolithic and/or tightly coupled. One solution here might be to target an area of your site as a good candidate for a PWA and build that first.