Progressive Web Apps

Ever built a web application that behaves and feels like a mobile application, including the ability to function in areas with no network coverage? It may sound like a fantasy, but with the latest advancements in web technologies it has become possible to provide a complete app-like experience on the web.

Our journey to discovering new ways of thinking about web applications began when our client in the agriculture industry came to us with a unique problem. Their sales representatives needed to place orders for fertilizer on their own devices while they are at customers on farms with poor network coverage. At the same time, administrative personnel also needed to use the same application in always connected environments.

Our typical approach to this problem would have been to build native apps for each of the mobile platforms and a web application for desktops. Fortunately for us, a new and innovative way of developing mobile applications started gaining traction. The latest advancements in web technologies have opened up an exciting possibility for web apps: the ability to behave and feel like native mobile apps. Google named this new type of mobile applications Progressive Web Apps. This sounded like a good fit for the problem we were trying to solve, so instead of going the normal route, we decided to do things differently and give Progressive Web Apps a try.

Why build a Progressive Web App?
A Progressive Web App is a website that is built using modern web technologies, but acts and feels like a mobile app. Most of the characteristics that enable this app-like behaviour satisfied our requirements for the application we needed to build for our client:

Progressive - Since Progressive Web Apps are built with progressive enhancements in mind, we can cater for the wide variety of browsers that the sales representatives will be using. From sales reps using Chrome on their mobile devices to administrators using Edge on their desktops, the app would work for all users, regardless of their browser choice. As browser technologies improve and the sales representatives update their browsers, the application will progressively unveil more app-like features, such as push notifications and background syncing.

Reliable - Sales representatives often visit their customers on their farms which are in remote areas with poor and sometimes no network coverage. Since they are creating and editing orders while they are in these areas, it is crucial that the application can function fully in offline environments. An added bonus is whenever the application regains connectivity, any changes that were made while the device was offline can be synced to the server in the background.

Fast - A high level of performance across a variety of devices and network states means we can give the sales representatives the best user experience while they are out and about visiting their customers on farms in remote locations. An app that responds quickly to user interactions also boosts productivity, enabling sales representatives to complete their daily tasks in a shorter time.

Responsive - Sales representatives can use the same application on all of their devices, be it mobile, tablet, or desktop. They can create the order on a tablet while they are at the customer and later check the orders for the day on their laptops at home.

App-like - Progressive Web Apps have an icon on the homescreen, load as an immersive full screen experience and can even send push notifications to users, which makes them behave and feel like mobile applications. The sales representatives are currently using a native mobile application and therefore we wanted to give them a similar experience to what they are used to.

Fresh - Users can be prompted to update their application whenever a new version is available, meaning they will always have access to the latest version of the application. Our client would no longer be reliant on an app distribution platform to install latest version of applications on all the sales representatives’ devices.

Safe - Progressive Web Apps are always served via HTTPS, ensuring that customer and user data is kept safe when transferred over the network. We also know we are up to date with the latest security, since browsers are updated with the latest patches for vulnerabilities.

Engaging - Push notifications can be used to alert sales representatives about important updates on their orders that need their attention or even notify them when it is their customer’s birthday.

Installable - Sales representatives can easily install the app directly from the browser with nothing more than a link, allowing for a seamless distribution channel. This removes the hassle of publishing the app to an app store.

Advantages for the development team

The decision to develop a Progressive Web App did not only involve advantages for the user’s experience, but also the advantages for the development team:

Familiar Technology - Our team could utilize our existing knowledge of web development and technologies to build the app. The fact that only one skill set is required to develop the application, rather than having to learn the native language of multiple mobile platforms, makes training and hiring people a lot easier as well.

Single Code Base - Having a single code base lowers development and maintenance costs. Single code bases also give you consistency. Multiple code bases are plagued by inconsistency, because multiple teams work on it.

Future Support - With the lifetime of the app being a couple of years, we need to cater for the possibility of future platforms. When new platforms such as Chrome Operating System become mainstream, we know we already have support for it.

Embracing Change

“The key is to embrace disruption and change early. Don’t react to it decades later. You can’t fight innovation.” - Ryan Kavanaugh

As part of our engagement with our client we have written many native mobile applications in the past. For this solution, we could have gone the familiar route, but we decided to investigate Progressive Web Apps instead. This was a decision that not only benefited us, but it will also benefit our client and the sales representatives in the years to come.

Helping our client through this journey we have found that it can be challenging to try out new things and we learned a lot of lessons along the way. But we also learned that there was no obstacle that we could not overcome. This project has proven to us that with the correct mindset and technical expertise, being at the forefront of change can be very rewarding with benefits that far outweigh the risks of being on the cutting edge.