Skip to main content
↓ Download as Markdown

Custom Kiosk Shell

note

Information in this section is in preview status. Do not use information in this article without being in contact with Future Ordering.

A custom kiosk shell is a desktop application (typically built with Electron or similar technology) that hosts the Future Ordering frontend web content. The shell manages the user interface, handles navigation, and bridges communication between the web frontend and the FrontendBridge backend service through a ZeroMQ messaging protocol.

Key Responsibilities​

A kiosk shell performs the following functions:

  • Hosts web content: Displays the web frontend inside an embedded browser component (WebView)
  • Manages navigation: Responds to navigation commands from FrontendBridge and reports URL changes back to the backend
  • Bridges messaging: Translates between the ZeroMQ pub/sub bus (used by FrontendBridge) and JavaScript running in the web content via window.__foopBridge
  • Serves plugins: Hosts a local HTTP server that delivers plugin JavaScript files to the frontend on demand
  • Manages application lifecycle: Handles startup, shutdown, and crash recovery

Architecture Overview​

The shell sits between three layers:

  1. Backend (FrontendBridge): Manages navigation state, settings, and plugin invocation via ZeroMQ messaging
  2. Shell (Electron or equivalent): Acts as the bridge between backend and frontend, managing the WebView and translating between protocols
  3. Frontend (Web content): Runs JavaScript plugins that communicate exclusively through window.__foopBridge; has no knowledge of the shell technology or underlying transport

The web page and plugins are decoupled from the shell implementation. If you swap Electron for another technology (e.g., UWP WebView2), only the __foopBridge implementation needs to change—plugin code remains unchanged.

In This Section​

  • FrontendBridge Messaging: Complete reference for the ZeroMQ message protocol between FrontendBridge and the shell, including message types, envelope format, and communication flows
  • Example: Electron Shell: A working implementation of a kiosk shell in Electron, showing how to wire up window.__foopBridge, implement IPC channels, and handle navigation and messaging