PWAs in the Enterprise

I have been tinkering with Progressive Web Apps (PWA) for a while now, biding my time for a project to come along that it would be a good fit for.

Recently, just like the proverbial waiting on a bus, along came two at once (to be precise, one project which required two PWAs).

This series of blog posts will record the learning, joys, trials and tribulations that I experienced on my journey introducing PWAs into the enterprise, from setting up the initial code project to scanning a barcode with a handheld device:

• PWAs in the Enterprise (this post)
• Creating a new Git Repo with SSH credentials for the first time
• Configuring a Server to be a Certificate Authority
• Issuing a Certificate from the new Certificate Authority

The Brief

We have two 24/7 factories manufacturing product that is packaged and transferred to storage or one of our further processing factories. Adhesive labels with the details are printed and stuck to the packaging at the end of the line.

The existing procedure involved printing 7 labels - one stuck on each face of the packet, and one to a whiteboard on the factory wall. Each morning, at the start of their shift, the factory managers would collect the “7th” labels from the wall and enter the total quantities onto our stock system. This meant that there was no visibility of what was manufactured until the morning after, when there was a quantity in stock spike for the manufactured stock.

The business requirement : printing the label would update the stock in real time.

Technical Considerations

The initial proposed technical solution was to add a new screen to our existing web-based stock management system, but this conflicted with some operational “facts of life”:

• The replacement printing functionality needed to be available 24/7 - the operators expected these labels as soon as they wrapped up a fresh batch of stock and clicked the print button, before it was forklifted away.

• Our stock system has scheduled restarts (tea-break, lunch time, after office hours), to import product info updates from Microsoft Navision, refresh the application caches and recalculate stock balances.

• There are also frequent updates to the stock system to introduce new functionalities or hot fixes, that require an application restart.

• The associated system downtimes were acceptable for the existing office-based stock system users, but would severely interrupt the workflow of the manufacturing factory workers.

• I was also reluctant to add the label printing functionality to the stock system application. Label formatting in ZPL and communicating with networked Zebra printers was not a concern of a stock management system - I wanted to encapsulate this functionality in a separate app, with a call to an API in our stock system to update the quantity in stock.

Why a PWA?

For the project, I envisioned two PWAs with very focused purposes - this focus meant very simple UI requirements, with no need for any Javascript UI libraries/frameworks. Alongside them, a separate web API solution would accept the packet details, transform into the ZPL commands and then to the Zebra printer for printing the label.

The first PWA would replace a VB6 program installed on two PCs that sent details to a Zebra printer for printing the adhesive labels, but didn’t send this information to our stock system (which didn’t exist at the time the VB6 program was created).

The second, would be a companion PWA used on a handheld scanner to read the barcode printed on the adhesive label, to record movement of the stock through our different factories.

Using PWAs would satisfy both the business, operational and technical requirements.

• The desktop PWA installed on the local computer would always be operational and print the labels immediately.
• Due to the offline capability, should the stock management system be unreachable for whatever reason (scheduled restart, system update, network failure…..), both the desktop and handheld PWAs would continue to function and would “eventually” update the stock management system

Other non-functional benefits:

• Easily installable, no need to register in an app store. As you only need to browse to the PWA URL once to install locally (as a desktop shortcut on a computer or a homescreen tile on a mobile device)
• Behaves like a native app on mobile device/phone.
• Uses existing web development technologies and works cross-platform.
• Easy to update all instances automatically - the existing VB6 program would need each client installation to be manually updated.
• Better security as PWAs are essentially websites under the hood, but with the requirement that they have to run over HTTPS.