Use HERE Core in a web browser

The original and most feature-rich way to use HERE Core is to develop desktop applications. However, because HERE Core apps are typically created using web standard technologies (HTML, CSS, and JavaScript), developers might want to develop web apps that can run either in a desktop HERE Core environment or in a generic web browser.

When developing apps that run in a web browser, you can use the HERE Core Web package. It uses the same TypeScript definitions as the desktop HERE Core package.

The HERE Core Web package provides the following functionality:

• Interoperability: See Web-based interoperability

• Layouts: See Layouts in a web browser, including tab icons

• Keyboard navigation and accessibility

• Runtime logging

Download and install

To use the HERE Core Web package in your application, do the following:

1. Install the npm package: > npm install @openfin/core-web

2. Import the bindings you need from @openfin/core-web

The specific bindings you need to import depend on what you are using the package to do. Refer to web interop and web layouts, as appropriate.

Keyboard navigation and accessibility

Core Web layouts render stacked views under a tab strip. Keyboard navigation and screen reader support for that strip are enabled by default when you initialize a layout; no extra setup is required. To change which tab-strip elements are reachable by keyboard, set tabNavigation and arrowNavigation in ViewTabAccessibilityOptions as described in Configure navigation. For tab icons and other layout settings, see Tab icons in Core Web layouts and Configure layout behavior.

Keyboard interactions

Focus enters the tab strip with Tab and lands on the active tab. Within the strip, focus Moves: only one tab is in the tab order at a time, and arrow keys move between tabs.

Key	Default behavior
Tab	Move focus to the next element in tabNavigation, then out of the strip
Shift + Tab	Move focus backward through tabNavigation, then out of the strip
Arrow keys	Move focus among elements listed in arrowNavigation
Mod + Enter	Move focus from the tab strip into the active tab's web content
Delete or Backspace	Close the focused tab when enableDeleteKeyClose is true
Home or End	Jump to the first or last navigable element when enableHomeEndNavigation is true

By default, tabNavigation includes the active tab and the add-tab button; arrowNavigation includes all tab-strip elements (inactive tabs, active tab, close buttons, and the add-tab button). Arrow keys activate the tab that receives focus.

info

• Arrow keys do not initiate a tab drag, even when drag-to-reorder is enabled.

• Modifier combinations (Ctrl/Cmd/Alt + arrow) are ignored by the tab strip so they remain available to the shell or the browser.

• When a tab is closed from the keyboard, focus follows focusOnCloseStrategy (default: next).

Configure navigation

Pass accessibilityOptions when you call fin.Platform.Layout.create(). Use viewTabOptions to control which elements users can reach with Tab and arrow keys, and related behavior such as closing tabs with Delete.

The possible tab-strip elements are:

• active-tab
• inactive-tab
• active-tab-close-button
• inactive-tab-close-button
• add-tab-button

await fin.Platform.Layout.create({
  container,
  layoutName: 'main',
  accessibilityOptions: {
    viewTabOptions: {
      tabNavigation: ['active-tab', 'add-tab-button'],
      arrowNavigation: [
        'inactive-tab',
        'active-tab',
        'active-tab-close-button',
        'inactive-tab-close-button',
        'add-tab-button'
      ],
      enableDeleteKeyClose: true,
      enableHomeEndNavigation: true,
      focusOnCloseStrategy: 'next'
    },
    focusContentHotkey: 'Mod+Enter' // Ctrl+Enter on Windows/Linux; Cmd+Enter on macOS
  },
  layout: { /* ... */ }
});

Set focusContentHotkey to false to disable the shortcut that moves focus into web content. In Core Web, focus transfer from iframe content back to the tab strip is not reliably supported due to browser security restrictions; the hotkey is one-way only (tab strip to web content).

If an array is empty, the corresponding key navigation does not include tab-strip elements at all. The tabNavigation and arrowNavigation arrays can overlap; array order does not matter.

Accessibility

The tab strip uses standard WAI-ARIA Tabs roles. Screen readers (VoiceOver, NVDA, JAWS) announce:

• The strip as a tab list (role="tablist") with horizontal orientation.

• Each tab (role="tab") by its title, selected state (aria-selected), and position in the set.

• The close button as a native button with an accessible label, e.g. "Close Reports, button."

• Each view container as a tab panel (role="tabpanel") labelled by its tab.

These roles and labels do not change how tabs look or behave with a pointer.

Overflow tabs

When the strip overflows, hidden tabs remain part of the same tab list. As focus reaches a tab in the overflow region, the additional-tabs dropdown opens so the focused tab is visible. Arrow navigation continues seamlessly across visible and overflowed tabs.

Configure logging

As with the HERE Core desktop library, you can configure the level of logging messages that HERE Core Web generates. The strings indicating the levels are the same as the log levels in the desktop Container API.

You pass the log level when starting each component:

Initializing the web broker

init({
  sharedWorkerUrl: `${location.origin}/openfin-shared-worker.js`,
  logLevel: 'debug'
});

Connecting to a web broker

const fin = await connect({
    connectionInheritance: 'enabled',
    options: { brokerUrl },
    platform: { layoutSnapshot },
    logLevel: 'debug'
});

Examples

To review fully-worked examples of using HERE Core Web, see the Web Starter repository on GitHub.