I have been keeping track of the development of Progressive Web Apps (PWA) for a while now in the belief that they will offer a great alternative to native apps on mobile devices.
This series of blog posts will record my journey of learning and introducing PWAs into the enterprise:
- PWAs in the Enterprise (this post)
- Creating an Enterprise PWA
- 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
- Progressive Web App using Azure Static Web Apps
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 was to link the process of printing the label with a corresponding transaction in our stock system, 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 send 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.