Como armazenar as preferências do usuário

Este artigo demonstra como armazenar as configurações da interface do usuário ou as preferências do usuário por meio das opções -preferences e -onPreferencesChanged Immersive Reader SDK.

Quando a opção CookiePolicy SDK é definida como Enabled, o aplicativo Immersive Reader armazena as preferências do usuário, como tamanho do texto, cor do tema e fonte, usando cookies. Estes cookies são locais para um navegador e dispositivo específico. Cada vez que o usuário inicia o Leitor Imersivo no mesmo navegador e dispositivo, ele abre com as preferências do usuário de sua última sessão nesse dispositivo. No entanto, se o usuário abrir o aplicativo Immersive Reader em um navegador ou dispositivo diferente, as configurações serão inicialmente configuradas com as configurações padrão do Immersive Reader, e o usuário precisará definir suas preferências novamente para cada dispositivo que usar. As opções do -preferences SDK do -onPreferencesChanged Leitor Imersivo fornecem uma maneira de os aplicativos percorrerem as preferências de um usuário em vários navegadores e dispositivos, para que o usuário tenha uma experiência consistente onde quer que use o aplicativo.

Primeiro, ao fornecer a opção SDK de retorno de -onPreferencesChanged chamada ao iniciar o aplicativo Immersive Reader, o Immersive Reader envia uma -preferences string de volta para o aplicativo host cada vez que o usuário altera suas preferências durante a sessão do Immersive Reader. O aplicativo host é então responsável por armazenar as preferências do usuário em seu próprio sistema. Em seguida, quando esse mesmo usuário iniciar o Leitor Imersivo novamente, o aplicativo host poderá recuperar as preferências desse usuário do armazenamento e fornecê-las como a -preferences opção SDK de cadeia de caracteres ao iniciar o aplicativo Leitor Imersivo, para que as preferências do usuário sejam restauradas.

Esta funcionalidade pode ser usada como um meio alternativo para armazenar as preferências do utilizador quando a utilização de cookies não é desejável ou viável.

Ativar o armazenamento das preferências do usuário

O parâmetro launchAsync options do Immersive Reader SDK contém o retorno de -onPreferencesChanged chamada. Esta função será chamada sempre que o utilizador alterar as suas preferências. O value parâmetro contém uma cadeia de caracteres, que representa as preferências atuais do usuário. Essa cadeia de caracteres é então armazenada, para esse usuário, pelo aplicativo host.

const options = {
    onPreferencesChanged: (value: string) => {
        // Store user preferences here
    }
};

ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, YOUR_DATA, options);

Exemplo de Estrutura JSON de Preferências

Veja um exemplo da aparência do value parâmetro quando analisado, juntamente com os tipos para cada campo:

{
    "displayOptionsState": {
        "textSize": "number",
        "fontFamily": "string",
        "textSpacing": "number",
        "formattingEnabled": "boolean",
        "theme": "string",
        "themeSetByUser": "boolean",
        "syllabificationEnabled": "boolean",
        "nounHighlightingEnabled": "boolean",
        "nounHighlightingColor": "string",
        "verbHighlightingEnabled": "boolean",
        "verbHighlightingColor": "string",
        "adjectiveHighlightingEnabled": "boolean",
        "adjectiveHighlightingColor": "string",
        "adverbHighlightingEnabled": "boolean",
        "adverbHighlightingColor": "string",
        "pictureDictionaryEnabled": "boolean",
        "posLabelsEnabled": "boolean"
    },
    "readAloudState": {
        "readAloudSpeed": "number",
        "voice": "string"
    },
    "translationState": {
        "shouldTranslateWords": "boolean",
        "translationLanguage": "string" // encoded JSON
    }
}

E aqui o exemplo para o translationLanguage JSON decodificado.

{
  "text": "string",
  "key": "string",
  "data": {
    "tlc": "string",
    "slc": "string"
  }
}

Carregar preferências do utilizador

Passe as preferências do usuário para o aplicativo Immersive Reader usando a -preferences opção. Um exemplo trivial para armazenar e carregar as preferências do usuário é o seguinte:

const storedUserPreferences = localStorage.getItem("USER_PREFERENCES");
let userPreferences = storedUserPreferences === null ? null : storedUserPreferences;
const options = {
    preferences: userPreferences,
    onPreferencesChanged: (value: string) => {
        userPreferences = value;
        localStorage.setItem("USER_PREFERENCES", userPreferences);
    }
};

Próximo passo