Использование Embedded App и Background App

Background App — это смартапы, которые не представлены на экране пользователя. Они работают в фоновом режиме.

Embedded App — один из типов Background App. Этот сценарий может обрабатывать:

  • запрос пользователя - например, с помощью Embedded App можно управлять сайтом с помощью голоса;
  • ответ сценария на клиенте — например, с помощью Embedded App можно управлять перемещением пользователя по страницам сайта.

Чтобы использовать смартапы типа Embedded App, добавьте Embedded App в массив backgroundApps Assistant Client. Для этого используйте метод assistant.addBackgroundApp, который возвращает объект смартапа:

  • remove: () => void — удаляет данный Background App из backgroundApps;
  • onCommand: <T>(subscriber: (command: AssistantSmartAppData<T>, messageId: string) => void) => { clearSubscribers: () => void } — подписывает на команды для данного Background App и возвращает объект с методом для очистки подписчиков;
  • sendServerAction: (serverAction: unknown, messageName?: string, requestId?: string) => void — отправляет serverAction в данный Background App.

Подключение Embedded App на примере AssistantBar:

import React, { FC } from 'react';
import { createAssistantClient, AppInfo } from '@sberdevices/assistant-client';
import { AssistantBar } from '@sberdevices/assistant-web-sdk';

const assistant = createAssistantClient(assistantParams);

const appInfo: AppInfo = { ..., frontendType: 'EMBEDDED_APP' };
const getState: Promise<Record<string, unknown>> = () => Promise.resolve({});

const myEmbeddedApp = assistant.addBackgroundApp({ appInfo, getState });

interface FrontendAction {
    type: 'SET_COLOR';
    payload: {
        color: 'green' | 'orange' | 'red';
    }
}

myEmbeddedApp.onCommand<FrontendAction>((command) => {
    dispatchAction(command.smart_app_data as FrontendAction)
});

myEmbeddedApp.sendServerAction({ type: 'SET_COLOR', payload: { color: 'orange' } });

export const BarWithAssistant: FC = () => {
    return <AssistantBar {...props} assistant={assistant} />;
};

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней