Procedimiento: Almacenamiento de las preferencias del usuario

En este artículo, se muestra cómo almacenar la configuración de la interfaz del usuario, también conocida como preferencias de usuario, mediante las opciones -preferences y -onPreferencesChanged del SDK de Immersive Reader.

Cuando la opción CookiePolicy del SDK se establece en Enabled, la aplicación de Immersive Reader almacena las preferencias de usuario, como tamaño de texto, color del tema y fuente mediante el uso de cookies. Estas cookies son locales para un explorador y un dispositivo específicos. Cada vez que el usuario inicia Immersive Reader en el mismo explorador y dispositivo, se abrirá con las preferencias de usuario de la última sesión iniciada en ese dispositivo. Sin embargo, si el usuario abre la aplicación de Immersive Reader en un explorador o dispositivo diferente, las opciones se configuran inicialmente con la configuración predeterminada de Immersive Reader y el usuario debe volver a establecer sus preferencias para cada dispositivo que use. Las opciones de SDK -preferences y -onPreferencesChanged del Lector inmersivo proporcionan a las aplicaciones una manera de llevar las preferencias de un usuario a varios exploradores y dispositivos, de modo que el usuario tenga una experiencia coherente dondequiera que use la aplicación.

En primer lugar, al proporcionar la opción de devolución de llamada -onPreferencesChanged del SDJ al iniciar la aplicación de Immersive Reader, este envía una cadena -preferences a la aplicación host cada vez que el usuario cambie sus preferencias durante la sesión de Immersive Reader. A continuación, la aplicación host será la responsable de almacenar las preferencias de usuario en su propio sistema. Después, cuando el mismo usuario vuelve a iniciar el Lector inmersivo, la aplicación host puede recuperar las preferencias de usuario del almacenamiento y suministrarlas como una opción de SDK de cadena -preferences al iniciar la aplicación Lector inmersivo, de modo que se restauren las preferencias del usuario.

Esta funcionalidad se puede usar como medio alternativo para almacenar las preferencias de usuario cuando el uso de cookies no es deseable o factible.

Precaución

No intente cambiar mediante programación los valores de la cadena -preferences enviada a la aplicación de Immersive Reader o desde ella, ya que puede provocar un comportamiento inesperado y dar lugar a una experiencia de usuario degradada. Recuerde que las aplicaciones host nunca deben asignar un valor personalizado a la cadena -preferences ni manipularla. Al utilizar la opción de cadena -preferences, use solo el valor exacto que se devolvió en la opción de devolución de llamada -onPreferencesChanged.

Habilitación del almacenamiento de las preferencias de usuario

El parámetro launchAsync del SDK de Lector inmersivo options contiene la devolución de llamada -onPreferencesChanged. Se llamará a esta función siempre que el usuario cambie sus preferencias. El parámetro value contiene una cadena, que representa las preferencias actuales del usuario. A continuación, la aplicación host almacena la cadena del usuario.

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

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

Estructura JSON de preferencias de ejemplo

Este es un ejemplo del aspecto del parámetro value cuando se analiza, junto con los tipos de 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
    }
}

Y aquí el ejemplo del JSON translationLanguage descodificado.

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

Carga de las preferencias de usuario

Pase las preferencias de usuario a la aplicación de Immersive Reader mediante la opción -preferences. A continuación encontrará un ejemplo trivial para almacenar y cargar las preferencias del usuario:

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);
    }
};

Paso siguiente

Explorar la referencia del SDK de Immersive Reader