We’ve had a rich partnership with one of South Africa’s most prominent Media organisations for a number of years, and this has enabled our development teams to continually work with new and exciting technologies. As our client continues to make significant technological investments in their digital content delivery, Saratoga recently had the opportunity to enhance their website delivery by upgrading to a Progressive Web Application.
Google approached us with the new Progressive Web Applications (PWA) technology, which allows a website to act like an App, including the offer of offline availability. For some of the publications in our client’s organisation, this was an exciting new technology to explore.
What exactly is PWA?
A PWA is not an API or a technology, but an approach. Progressive Web Application’s aim is to progressively add features as the device supports them, instead of scaling the application features down.
For instance, the page will be downloaded and the application started. If the browser supports service workers it will register the service worker, which might install a caching function and perhaps start to pre-emptively populate this cache. If the device supports it, the service worker might further request for push notifications to be sent to the PWA.
PWAs use a combination of existing tools and technologies to create fast, reliable and engaging applications. In its intended form, a PWA should be indistinguishable from a native app, but with the benefit of being multi-platform and being deployable without the App Store.
Successful implementation
To successfully implement the PWA, Google recommends that the application implements an application shell where the header, footer and menu are static and only the inner content area is updated with requests. For us, this meant converting the existing framework from a Server Rendered site to a Single Page Application. A Single Page Application would give us the speed and low latencies we required to meet the stringent speed requirements placed on the PWA.
We did not want to maintain two code bases, so the decision was made that the PWA will serve all form factors and be the chosen engine serving all traffic to the chosen site.
We built the engine using the JAMS (JavaScript, APIs and Markup) stack, with NodeJS, React and Redux Sagas. Our designer came up with a beautiful new, accessible, modern and mobile first design. The engine was performing excellently with this new lean design. It was fast, responsive and gave us a LightHouse score of 96% on performance. It supported Server Rendered pages for Search Engine Optimization and on the client, it pre-cached articles in the background, providing a smooth experience, with near instant page loads.
Expanding the PWA implementation
Getting business to buy into a new framework is often a hard sell, and the publications within the Media Group were cautious of the risks of a new framework, and the possible burden of a new design. Fortunately we had the opportunity to work with a publication that was very excited to implement the features of the PWA framework we had built, but due to time constraints we decided to migrate their current designs instead of including a new design in the process as well.
The first publication we implemented the PWA framework for went live after one month, and the SEO team was very happy as 404’s drop to none, and a lot of work went into making sure all the redirects resolved properly. We had a proof of concept for the Media Group and this paved the way for our PWA framework to be rolled out across more publications. The implementation of the framework on a second and third site went live two weeks apart, and the positive results soon rolled in with bounce rates down by 66% and engagement skyrocketing.
One of our most recent PWA projects is for a news site which has recently completed a revamp and is now looking to launch a new website. This publication was very excited about our PWA implementations for other publications and wanted to go live using a similar design. Our team has now streamlined our implementation to the point where we can launch a site with the framework and have the site ready for sign off in a week.
Whether it’s Progressive Web Application or other exciting technology developments, our teams are always looking to provide our customers and partners with innovative and effective solutions.
Written by Willo van der Merwe, Principal Consultant at Saratoga.
