The Brief
This is the second app mentioned in my post on PWAs in the Enterprise.
It shares most of the same technical and non-functional requirements.
The app is to be used by the yardspeople on a handheld scanner to track the real-time movement of stock around the company’s multiple factories. The units of stock are labelled with barcodes that can be read by the scanners, displaying the details retrieved from the main stock appplication to the user.
Currently, users access the existing desktop-focused stock system on their mobile phone or record the movements on paper and keying into the stock system later on the office computer. Accessing the stock system on a mobile phone was not included in the original system design and no effort was made to cater for this scenario. Both horizontal and vertical scrolling was required to enter in the required details. This consisted of product codes and quantities being keyed in - easy enough to do on a desktop keyboard, but more involved on a mobile phone’s touchscreen keyboard.
Initially, the solution was to add a new screen to the existing stock system that was tailored for the scanner. Thankfully, due to the success of the first PWA, we decided that a similar approach would be better suited for this.
My Approach
Based on the positive experience from my previous project, I chose to use Progressive Web App aaproach again for the scanners.
This time however, I was able to simplify and improve the process:
-
No need for an internal server acting as a Certificate Authority to issue a digital certificate (necessary for PWA’s HTTPS requirement) - use Azure Static Web Apps.
-
Minimising the dependency on our other web applications brought about by the use of HTTP Requests - use Azure Service Bus.
-
Delegating authentication to a dedicated service - use Azure Active Directory authentication.
-
Automated testing of the frontend - use Playwright.
Progressive Web Apps
Under the hood, Progressive Web Apps are just web applications that run in browsers, like websites, but provide an app-like experience:
- can installed by anyone, anywhere, on any device with a single codebase.
- can still work when the device is offline.
- supports push notifications and periodic updates.
Static Web Apps
Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a code repository:
- commits or accepted pull requests on a watched branch will automatically trigger a build and deploy the app and its API to Azure.
- free SSL certificates, which are automatically renewed.
- Azure Active Directory authentication integration
- customizable authorization role definition and assignments
Here are some of the main learning resources I used:
SWA-CLI
The Static Web Apps (SWA) CLI is an open-source commandline tool that emulates the production cloud-based environment when you are developing the app on your dev computer.
When published to the cloud, an SWA links together many services that work together as if they’re the same application (web app, Azure Functions, AAD authentication, configuration…).
These services must communicate with each other - Azure SWA handles this integration for you in the cloud. The SWA-CLI provides a similar experience locally - providing proxies and mocks of the cloud elements.
Azure Functions
Azure Functions is an event driven service that executes code triggered by events occurring in Azure, third party service or on-premises systems.
Browser based apps cannot interact directly with the next stage in the process flow, Azure’s Service Bus - therefore, I get to use Azure Functions to act as a middle-man, accepting the request and passing it onto the Service Bus. (If you reallly want to, there is a way by converting Node js to browser js)
Azure Service Bus
Azure Service Bus is a fully managed enterprise message broker with message queues and pub-sub capabilities.
Service Bus is used to decouple applications and services from each other - this will allow my app to send details indirectly to our other web applications without needing to know their URLs for sending HTTP requests.
Playwright
Playwright is a tool for creating/generating end-to-end tests for web apps.
I have previously tried out testing frontends with Selenium - although suitably impressed, it never took off for me. Playwright however, blew me away - and this small PWA I was working on was a perfect project to try it out on.