🌐

PWA Player

@xiboplayer/pwa

The rendering engine that powers all players. Can run standalone in any browser.

npmSelf-hosted GitHub

📡Offline-first with Service Worker

🎬Video, PDF, HLS, tickers, web pages

📊Proof of play statistics

🔄REST API v2 + SOAP fallback

Features

Offline-first — Service Worker caching with parallel chunk downloads and progressive streaming
XLF layout rendering — video (MP4/HLS), images, audio overlay, PDF, text/ticker, web pages
Campaign scheduling — priority-based campaigns, dayparting, interrupts, and overlays
Playback control — skip to next/previous layout via keyboard or click the timeline overlay (when enabled via controls config)
Multi-display sync — BroadcastChannel-based lead/follower synchronized playback for video walls
Real-time commands — collectNow, screenshot, changeLayout, overlayLayout via XMR WebSocket
Proof of play — per-layout and per-widget duration tracking
Screen Wake Lock — prevents display from sleeping during playback

Same-Origin Requirement

The PWA must be served from the same domain as the Xibo CMS. All API calls go to the CMS origin, and browsers block cross-origin requests.

For kiosk/desktop use, the Electron or Chromium wrappers handle CORS at the proxy level — no same-origin restriction.

Deployment

On the CMS (recommended)

Copy the build output to the CMS web directory:

# Build from source (PWA is part of the SDK monorepo)
cd xiboplayer
pnpm install && pnpm --filter @xiboplayer/pwa run build

# Deploy to CMS container
podman cp packages/pwa/dist/. xibo-cms-web:/var/www/cms/web/chromeos/

Access at: https://your-cms.example.com/player/pwa/

With Electron or Chromium wrapper

The Electron and Chromium packages bundle the PWA automatically. No manual deployment needed — install the package and run.

All keyboard shortcuts and mouse hover are disabled by default in the Electron and Chromium wrappers. Each control group must be explicitly enabled via the controls section in config.json. When running the PWA standalone in a browser, shortcuts are available without configuration.

Key	Control group	Action
`T`	`controls.keyboard.debugOverlays`	Toggle timeline overlay — shows schedule with conflict indicators
`D`	`controls.keyboard.debugOverlays`	Toggle download overlay — shows media download progress
`V`	`controls.keyboard.videoControls`	Toggle video controls on all videos
`→` / `PageDown`	`controls.keyboard.playbackControl`	Next layout
`←` / `PageUp`	`controls.keyboard.playbackControl`	Previous layout
`Space`	`controls.keyboard.playbackControl`	Pause / resume
`R`	`controls.keyboard.playbackControl`	Revert to scheduled layout

Debug Overlays

Debug overlays are controlled exclusively by controls.keyboard.debugOverlays in config.json. They are not triggered by the DEBUG log level — log levels only affect logging verbosity.

Timeline Overlay (`T`)

Current layout highlighted with a ▶ marker
Time range and duration for each entry
[def] tag on default/fallback layouts
OFFLINE badge when CMS connectivity is lost
Conflict indicators showing suppressed layouts
Click-to-skip — click any layout to jump to it

Download Overlay (`D`)

Active downloads with progress bars and speed
Queue depth
Idle status when all media is cached

Service Worker Architecture

Progressive streaming — large media served via chunk streaming with Range requests
XLF-driven downloads — parses layout XLF to download exactly the media needed
Layout-ordered downloads — currently-playing layout downloads first
Adaptive chunk sizing — adjusts based on device RAM (4GB/8GB+ tiers)