Stocker les préférences de l’utilisateur
Cet article explique comment stocker les paramètres d’IU de l’utilisateur, ou préférences utilisateur, via les options -preferences et -onPreferencesChanged du kit de développement logiciel (SDK) Immersive Reader.
Lorsque l’option du kit de développement logiciel (SDK) CookiePolicy est définie sur Activée, l’application Immersive Reader stocke les préférences utilisateur, telles que la taille du texte, la couleur du thème et la police, à l’aide de cookies. Ce sont des cookies locaux spécifiques à un navigateur et un appareil. À chaque fois que l’utilisateur lance Immersive Reader dans le même navigateur et sur le même appareil, l’application s’ouvre avec les préférences de l’utilisateur de la dernière session sur cet appareil. Toutefois, si l’utilisateur ouvre l’application Immersive Reader dans un autre navigateur ou sur un autre appareil, les paramètres sont initialement configurés avec les paramètres par défaut d’Immersive Reader, et l’utilisateur doit à nouveau définir ses préférences, et ce, pour chaque appareil qu’il utilise. Les options -preferences
et -onPreferencesChanged
du SDK Lecteur immersif offrent aux applications un moyen d’activer l’itinérance des préférences d’un utilisateur entre différents navigateurs et appareils, de sorte que l’utilisateur bénéficie d’une expérience cohérente partout où il utilise l’application.
Tout d’abord, en fournissant l’option de rappel de -onPreferencesChanged
du kit de développement logiciel (SDK) lors du lancement de l’application Immersive Reader, celle-ci renvoie une chaîne -preferences
à l’application hôte à chaque fois que l’utilisateur modifie ses préférences pendant la session d’Immersive Reader. L’application hôte est alors responsable du stockage des préférences de l’utilisateur dans son propre système. Ensuite, lorsque ce même utilisateur lance à nouveau le Lecteur immersif, l’application hôte peut récupérer les préférences de l’utilisateur à partir du stockage et les fournir comme option de chaîne -preferences
du SDK lors du lancement de l’application Lecteur immersif, afin que les préférences de l’utilisateur soient restaurées.
Cette fonctionnalité peut être utilisée comme autre façon de stocker les préférences utilisateur lorsqu’il n’est pas recommandé, ni possible d’utiliser des cookies.
Attention
N’essayez pas de modifier par programmation les valeurs de la chaîne -preferences
envoyée à destination et en provenance de l’application Immersive Reader, car cela peut provoquer un comportement inattendu entraînant une dégradation de l’expérience utilisateur. Les applications hôtes ne doivent jamais attribuer une valeur personnalisée ou manipuler la chaîne -preferences
. Quand vous utilisez l’option de chaîne -preferences
, utilisez uniquement la valeur exacte qui a été retournée à partir de l’option de rappel de -onPreferencesChanged
.
Activer le stockage des préférences utilisateur
Le paramètre launchAsync options
du kit de développement logiciel (SDK) Immersive Reader contient le rappel de -onPreferencesChanged
. Cette fonction est appelée à chaque fois que l’utilisateur modifie ses préférences. Le paramètre value
contient une chaîne qui représente les préférences actuelles de l’utilisateur. Cette chaîne est ensuite stockée, pour cet utilisateur, par l’application hôte.
const options = {
onPreferencesChanged: (value: string) => {
// Store user preferences here
}
};
ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, YOUR_DATA, options);
Exemple de structure JSON de préférences
Voici un exemple de ce que ressemble le paramètre value
lors de l’analyse, ainsi que les types pour chaque champ :
{
"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
}
}
Et ici, l’exemple pour le code JSON décodé translationLanguage
.
{
"text": "string",
"key": "string",
"data": {
"tlc": "string",
"slc": "string"
}
}
Charger les préférences utilisateur
Transmettez les préférences de l’utilisateur à l’application Immersive Reader en utilisant l’option -preferences
. Voici un exemple tout simple pour stocker et charger les préférences de l’utilisateur :
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);
}
};