Cordova

In this section, we explain how to get started with the StayTuned SDK for hybrid projects based on cordova.

Prerequisites

  • Node >= 12

  • Npm >= 6

  • Cordova 10

  • cordova-android >= 9

  • cordova-ios >= 6

Installation

Cordova Plugin

To add the cordova plugin to your project, run

cordova plugin add @staytuned-io/cordova-plugin-staytuned

You also need to add this to your config.xml file

<preference name="AndroidXEnabled" value="true" />
<preference name="android-minSdkVersion" value="21" />
<preference name="android-targetSdkVersion" value="29" />

Typescript Wrapper

The SDK has a typescript project to wrap cordova calls into Promise based functions

npm install @staytuned-io/cordova-typescript

Web Components

You can also add to your project pre-built Stencil views (mini player, content view, track view).

npm install @staytuned-io/cordova-components

As we are using the Stencil Framework for our web components, you may need to have some more setup to do. See Stencil Framework Integration. On most Frameworks, you'll need to call the defineCustomElements function as follow

import { defineCustomElements } from "@staytuned-io/cordova-components/loader";
defineCustomElements();
React
React

Add this to your root tsx file

import { defineCustomElements } from "@staytuned-io/cordova-components/loader";
defineCustomElements();
declare global {
namespace JSX {
interface IntrinsicElements {
"st-mini-player": React.DetailedHTMLProps<any, HTMLElement>;
"st-content-detail": React.DetailedHTMLProps<any, HTMLElement>;
"st-track-detail": React.DetailedHTMLProps<any, HTMLElement>;
"st-content-widget": React.DetailedHTMLProps<any, HTMLElement>;
}
}
}