VBCS as a Progressive Web App: Mobile-First Strategies

What makes a VBCS app a PWA

A Progressive Web App (PWA) is a web application that behaves like a native mobile app — installable on the home screen, capable of working offline, and optimised for touch interfaces. VBCS supports PWA deployment with some configuration.

VBCS PWA configuration

In VBCS application settings, enable PWA mode. This adds a Web App Manifest and registers a service worker. Configure:

• App name and short name (shown when installed)
• Theme color and background color
• App icon (at minimum 192×192 and 512×512 PNG)
• Display mode: standalone removes the browser chrome

Offline data strategy

VBCS’s built-in offline support caches the application shell (HTML, CSS, JavaScript). Data caching requires additional strategy:

Option 1: IndexedDB via a JavaScript action — store fetched records locally and sync changes when connectivity resumes. Build a sync queue that accumulates offline writes and processes them on reconnection.

Option 2: Periodic sync — for read-heavy apps, pre-fetch and cache all needed reference data when the user first opens the app. Works well for inspection checklists, job cards, and catalogue browsing.

Detecting connectivity

// Check connectivity state
var isOnline = navigator.onLine;

// Listen for changes
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);

Bind a VBCS variable to the connectivity state and use it to show/hide sync status and disable submit buttons when offline.

Mobile layout considerations

For field workers on phones:

• Use large touch targets (minimum 44×44px) for all buttons
• Avoid horizontal scrolling tables — use card layouts instead
• Reduce form field density — one or two fields per screen for critical workflows
• Auto-capitalise and restrict keyboard type for inputs (type="number", type="tel")

Camera and GPS integration

PWAs can access device hardware:

• Camera: use <input type="file" accept="image/*" capture="environment"> for photo capture
• GPS: use navigator.geolocation.getCurrentPosition() to capture location on form submission

Integrate these into VBCS forms using JavaScript actions and file upload service connections to OIC.

Testing on mobile devices

Test on actual devices, not just browser developer tools. iOS Safari and Android Chrome have subtle differences in PWA behaviour. Key things to test: install to home screen, offline mode, camera access, keyboard behaviour, and scroll performance with large lists.