SRF Native Bridge

Integrate the bridge in a web view

• Run npm install --save srf-native-bridge
• If you need to support SRF apps that still use the old version of the native bridge, include the following code directly in your HTML file. This code should not be loaded later, because old apps need to be able to execute these functions immediately after loading.

<script>
  function fetchMetaData() {
    window.legacyAppReady = true;
  }

  function setAutoplayEnabled(autoplay) {
    window.legacyAutoplayEnabled = autoplay;
  }

  function setDeviceInfo(data) {
    window.legacyDeviceInfo = data;
  }
</script>

• Initialize the bridge with the metadata of the page:

import { SRFBridge } from 'srf-native-bridge';

SRFBridge.init({
  title: 'Your Page Title',
  weburl: 'https://www.srf.ch/sport',
  subscriptionLists: ['sport_subscription_list'],
});

After these steps, the bridge connection is established, and you can start to send and receive events using the public API, which is exported and documented in index.ts.

Setup dev environment

To start developing new features for the bridge, simply run:

• npm install
• npm run dev which will watch the source files and start a web server with a demo page on http://localhost:8080/dev/

Add a new event to the bridge

• Add the new event with its payload to event-types.ts
• (optional) If you want to provide a convenience function to the JavaScript users of the bridge, add it to the public API in index.ts
• Release the package

Hint: you do not need to manually update the package version. This happens automatically when you release the package, see section Release.

Test

• npx tsdx build; npx tsdx test will build and run all tests.
• npx tsdx lint will run the linter

Release

To create new release do the following:

• Merge all features you want to publish in the main branch
• Run npm login (the SRF username and password can be found in safe.srgssr.ch - 2FA as well!)
• Run npm run release and follow the instructions

Note: We use np to publish this package to NPM.

Additional docs