VegaOS App Structure | NAGRAVISION Documentation Portal

Introduction

The Vega OS platform’s Vega App Framework is based on React Native (RN). This allows modern apps to be created and be tightly integrated with the underlying system for media playback.

In addition to supporting a Vega app with RN components, an existing web-based TV app can be wrapped within a Vega WebView. The latter offers an optional path to incrementally adopt a native architecture if desired.

App with WebView

Wrapping an existing app is easily achieved by defining a WebView referencing the URI of the existing hosted page. For optimal page loading performance the app can be embedded within the app payload and therefore referenced via a file:// URI.

Significant flags

domStorageEnabled={true}
Allows for the W3C localStorage feature.
allowSystemKeyEvents={true}
Ensures Key Events for remote button presses are delivered to the JavaScript layer, especially important when your app needs to associate the BACK button with business logic.

See https://developer.amazon.com/docs/vega-api/0.22/webview-component-reference.html for full details of WebView configuration.

Full App.tsx example

TypeScript

import {WebView} from '@amazon-devices/webview';
import * as React from 'react';
import {useRef} from 'react';
import {View, StyleSheet} from 'react-native';

export const App = () => {
  const webRef = useRef(null);
  return (
    <View style={styles.container}>
      <WebView
        // headers: {},
        ref={webRef}
        domStorageEnabled={true}
        mediaPlaybackRequiresUserAction={false}
        allowSystemKeyEvents={true}
        hasTVPreferredFocus={true}
        source={{
          // Replace with your URL.
          uri: 'https://example.com/index.html',
          // or to reference a file located at <root>/assets/index.html
          // uri: "file:///pkg/assets/index.html"
        }}
        javaScriptEnabled={true}
        onLoadStart={(event) => {
          console.log('onLoadStart url: ', event.nativeEvent.url);
        }}
        onLoad={(event) => {
          console.log('onLoad url: ', event.nativeEvent.url);
          webRef.current.clearCache(true);
        }}
        onError={(event) => {
          console.log('onError url: ', event.nativeEvent.url);
        }}
      />
    </View>
  );
};

// Styles for layout, which are necessary for proper focus behavior
const styles = StyleSheet.create({
  container: {flex: 1},
});

Manifest

The manifest.toml file describes the app and which Vega OS services it needs to use. Our working example is below, with specific attention drawn to the settings required for DRM playback:

...
[[wants.service]]
id = "com.amazon.drm.key"
[[wants.service]]
id = "com.amazon.drm.crypto"
[[needs.privilege]]
id = "com.amazon.privilege.security.file-sharing"
...

Full manifest.toml example

schema-version = 1

[package]
title = "Basic UI React Native Application for project nagrahellovega"
version = "0.1.0"
id = "com.amazondeveloper.nagrahellovega"

[components]
[[components.interactive]]
id = "com.amazondeveloper.nagrahellovega.main"
runtime-module = "/com.amazon.kepler.keplerscript.runtime.loader_2@IKeplerScript_2_0"
launch-type = "singleton"
categories = ["com.amazon.category.main"]

[wants]

# Web renderer service for rendering web content
[[wants.service]]
id = "com.amazon.webview.renderer_service"

# If Web App needs keyboard support
[[wants.service]]
id = "com.amazon.inputmethod.service"

# If Web App needs video playback
[[wants.service]]
id = "com.amazon.media.server"

# Required for emitting metrics from video playback
[[wants.service]]
id = "com.amazon.mediametrics.service"

# Required for video playback on stable APIs
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"

# If Web App needs audio playback
[[wants.service]]
id = "com.amazon.audio.stream"

# Required for audio management features to work in WebView, features like audio focus, volume control
[[wants.service]]
id = "com.amazon.audio.control"

# To enable accessibility support for your app, it's highly recommended you add UCC service with Service Registrar
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"

# Uncomment below section to enable encrypted media playback (DRM content)
[[wants.service]]
id = "com.amazon.drm.key"
[[wants.service]]
id = "com.amazon.drm.crypto"
[[needs.privilege]]
id = "com.amazon.privilege.security.file-sharing"

# Enable Group-IPC to access media services
[[wants.service]]
id = "com.amazon.gipc.uuid.*"
[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*"

# You may add other services as needed