Building a Progressive Web App for Agon Systems

How do you provide retail staff around the world with high-quality training for a product that’s growing exponentially?

We’ve been working with Agon Systems for a number of years; creating their brand identity, designing and building their website, leading their digital marketing strategy, creating exhibition stands, stationery and presentation boxes, and most recently, building a single-page website for one of their biggest distribution products: Concept Tag.

The Concept Tag is a new type of retail security tag that is revolutionising the industry. Its unique locking mechanism makes it almost impenetrable, and recent extensive trials resulted in losses being reduced by up to 66%.

These impressive statistics have led to a huge uptake in the product from retailers around the globe. To aid their ever-increasing customer base, Agon Systems reached out to us to help them provide a training system that could be used as a tool for retail staff.

Choosing the right solution for Agon Systems

We begin every project with an open mind on how to best deliver a product that serves the client’s needs. Only by listening to their requirements and considering all available options can we offer the best solution.

For this project, there were three target users: retail staff, retail installers and retail managers. Staff tend to have a mobile phone with them at all times so on-demand training could be achieved through an app or mobile website. Installers travel to stores around the country, fitting the releaser units to till-spaces. Mobile phone and laptop access would be their main way to watch the training. Managers organise group training sessions for the staff, carrying around a tablet or laptop and delivering the training using a projector.

Native App

During our initial discussions with Agon Systems, the word ‘App’ was floated around as a possible solution. Given the high percentage of smartphone owners in the retail staff demographic, it seemed like a logical option. But upon investigation into the pros and cons, the results were less convincing:

Pros of a native app

1. Access to information without an internet connection
2. Native gesture controls like ‘swiping’ and access to device hardware if required
3. A branded experience on a user’s phone

Cons of a native app

1. Time-consuming and therefore expensive to develop
2. iPhone, iPad, Android versions need to be created, along with a web version for Windows, Blackberry, other operating systems, tablets, desktops and ‘standard’ mobile phones
3. Slow to update if changes are required
4. App store financial charges
5. Large initial download size for not a lot of information
6. In the UK alone, half of smartphone users install zero apps per month
7. Often synonymous with shady device permissions

Progressive Web App

We, therefore, proposed an alternative solution, a ‘*Progressive Web App*’ (PWA). This is a new web platform feature gaining rapid support and acclaim that’s revolutionising the mobile-web landscape (sounds remarkably similar to the effect Concept Tag is having on the retail-security sector!).

A PWA is a website that uses cutting edge (but pretty well supported) technology to allow the site to be available offline. It can also be ‘installed’ on the user’s device without going through an app store, giving a blazingly fast and beautifully branded experience with very few downsides.

The pros and cons list looks remarkably different for a PWA:

Pros of a PWA

1. Access to information without an internet connection
2. Gesture controls like ‘swiping’ and some access to device hardware if required
3. A branded experience on a user’s phone
4. Quicker and therefore cheaper to develop
5. One version of the ‘app’ for all devices and computers
6. Immediate updates
7. No app store charges
8. Tiny amounts of data usage
9. No mandatory installation
10. No device permissions required
11. Shareable via URLs

Cons of a PWA

1. No offline/installation support on IOS (yet!)

Designing a PWA

As a PWA is in essence a website that can be installed and used offline, we were able to approach the project in the same way we would a ‘normal’ responsive website. But we were also able to use some ‘app-like’ design standards to help those viewing the site on a smaller device feel right at home.

As most of the training content would be provided in a video format, we designed a custom media player to keep the PWA consistently on-brand.

On larger screens, we were able to shift to a more traditional ‘desktop’ experience with ease. The beauty of a PWA is that this is a single website using responsive design techniques to optimise each device. We don’t have to release separate iPhone, iPad and Android versions.

Developing a PWA

Using a Javascript framework to build a website is not uncommon these days. I ranted about them on this blog last year. In that piece, I wrote the following:

I still wholeheartedly stand by that opinion and was therefore not happy to build this PWA using a client-side only framework.

The solution I went with was a pre-rendered site using VueJS. Vue is a tremendous framework that is akin to a child of React and Angular where only the best features have been kept. It’s also pretty lean. Using a Webpack build system, I was able to prerender all static routes to simple minified .html files.

When a page is served, if the browser has Javascript, Vue takes over and handles super-snappy page changes. If Javascript fails or takes too long to download, it doesn’t matter. All the page content is available without a reliance on Javascript. Then the PWA magic can start.

The technology required to turn a website into a PWA is called the Service Worker. It’s effectively a proxy that sits between the browser and the network, catching and caching network requests. In our case, it does the following:

1. The browser requests an asset, ie. an image, JS file or page
2. The service worker checks to see if it has already saved that asset in the cache
3. If it’s in the cache, it immediately returns it to the browser, ceasing the need for a network request
4. If it doesn’t have it in the cache:
5. It requests the asset from the network
6. It saves a copy of the response in the cache for next time
7. It returns the response to the browser

On the first visit to the site, the Service Worker requests a couple of additional files including the key pages for the site, the CSS and the JS. From that point onwards, the network is not required to use the PWA.

The Apple-shaped elephant in the room

This is the biggest problem facing PWA adoption. Apple are being a bit stubborn in adding Service Worker support to Safari. They’ve shown some ‘positive signals’ but at the time of writing, they haven’t committed to implementing it. I can appreciate why, they make an inordinate amount of money from app sales and selling PWA’s hasn’t really been explored yet.

But given they are the 9th richest company in the world, you’d hope they could be a bit more relaxed about it. Apps aren’t going anywhere fast. Games and deep-device integration will always be initially suited to native apps. It’s a great way of pushing hardware to the limit as native apps are one abstraction closer to the device.

Fortunately, Service Workers have been designed with progressive enhancement in mind. A PWA will still work like any other website in a browser that doesn’t support Service Workers.

More critically for this specific PWA, a growing proportion of Agon Systems’ customers are coming from emerging markets where the use of Android smartphones is almost exclusive due to the eye-watering pricing of Apple products. In these markets, mobile internet is also very expensive. Reducing the number of network requests saves the user’s money. And unlike a native app, minor content changes don’t mean a full app update, just a single page request.

Launching a PWA

Much like any other website, launching this for Agon Systems was as straightforward as pointing a domain to our server, adding an SSL certificate with Let’s Encrypt and uploading the static html files. There is a small Node JS server handling the URL routing for static and dynamic pages.

Google Analytics can still be used for a PWA, even when the user is offline. The pageviews are stored and when the network becomes available again, sw-offline-google-analytics will submit the time-altered events to GA.

We’re delighted to launch this app as part of our investment in the continued development of service we provide along with the Concept Tag itself.
Sean Welch
MD at Agon Systems

Visit the PWA