Cape Town, 13 Mar 2019
Saratoga has had a rich partnership with one of South Africa's most prominent media organisations for a number of years, and this has enabled its development teams to continually work with new and exciting technologies.
As Saratoga's client continues to make significant technological investments in their digital content delivery, Saratoga recently had the opportunity to enhance its Web site delivery by upgrading to a Progressive Web Application.
Google approached Saratoga with the new Progressive Web Applications (PWA) technology, which allows a Web site to act like an app, including the offer of offline availability. For some of the publications in Saratoga's 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 down the application features.
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 preemptively 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 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 Saratoga the speed and low latencies it required to meet the stringent speed requirements placed on the PWA.
Saratoga 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.
Saratoga built the engine using the JAMS (JavaScript, APIs and Markup) stack, with NodeJS, React and Redux Sagas. Saratoga's 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 Saratoga a LightHouse score of 96% on performance. It supported server rendered pages for search engine optimisation (SEO), 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, Saratoga had the opportunity to work with a publication that was very excited to implement the features of the PWA framework it had built, but due to time constraints, Saratoga decided to migrate their current designs instead of including a new design in the process as well.
The first publication Saratoga implemented the PWA framework for went live after one month, and the SEO team was very happy, as 404s drop to none, and a lot of work went into making sure all the redirects resolved properly. Saratoga had a proof of concept for the media group and this paved the way for its 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 Saratoga's most recent PWA projects is for a news site that has recently completed a revamp and is now looking to launch a new Web site. This publication was very excited about Saratoga's PWA implementations for other publications, and wanted to go live using a similar design. Saratoga's team has now streamlined its implementation to the point where it can launch a site with the framework and have the site ready for sign-off in a week.
Whether it's PWA or other exciting technology developments, Saratoga's teams are always looking to provide its customers and partners with innovative and effective solutions.
Written by Willo van der Merwe, Principal Consultant at Saratoga.
Our love for tech doesn't stop at delivering innovative solutions, we also invest in our developers and the tech industry at large. That's why Saratoga is a sponsor of the 2019 DevConf taking place in Cape Town in March. Connect with our Saratogans at the conference to chat about this project or some of our other exciting engagements.
Share