Méthodes d’identification des appareils dans Salesforce LWC

Afin d’écrire du code spécifique à l’appareil dans Salesforce LWC (composants Web Lightning), nous explorerons différentes méthodes de détection d’un appareil dans ce blog. Les méthodes suivantes peuvent être utilisées dans Lightning Web Components (LWC) pour identifier un appareil ou faire la distinction entre un ordinateur de bureau, une tablette ou un appareil mobile :

1. Utilisation des API Web standard navigator.userAgent

Dans Lightning Web Components (LWC), la détection des appareils est implémentée à l’aide d’API Web standard telles que navigator.userAgent, permettant aux développeurs d’identifier les types d’appareils (par exemple, téléphone, tablette, ordinateur de bureau) et les systèmes d’exploitation en analysant la chaîne de l’agent utilisateur. Cette approche offre de la flexibilité et prend en charge les normes Web modernes.

Exemple:

import { LightningElement } from 'lwc';

export default class DetectDevice extends LightningElement {
    isPhone = false;
    isTablet = false;
    isAndroid = false;
    formFactor="Unknown";

    connectedCallback() {
        this.detectDevice();
    }

    detectDevice() {
        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
        // Detect Android
        this.isAndroid = /android/i.test(userAgent);
        // Detect iOS
        const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
        // Detect Tablets
        const isTablet = /Tablet|iPad/.test(userAgent);
        // Detect Phones
        const isPhone = /Mobile|iPhone|Android/.test(userAgent) && !isTablet;
        // Assign properties
        this.isPhone = isPhone;
        this.isTablet = isTablet || isIOS;
        this.formFactor = isPhone ? 'Phone' : isTablet ? 'Tablet' : 'Desktop';
    }
}

2. Utilisez les requêtes multimédias CSS

Dans Lightning Web Components (LWC) et Aura Components, la détection du facteur de forme de l’appareil à l’aide Requêtes multimédias CSS est une approche robuste et déclarative. Les requêtes multimédias permettent aux développeurs de définir des styles qui s’appliquent de manière conditionnelle en fonction de la taille de l’écran, de la résolution, de l’orientation ou d’autres fonctionnalités multimédias de l’appareil, sans recourir à JavaScript ou à des utilitaires spécifiques à Salesforce tels que $Browser. Nous pouvons utiliser des requêtes multimédias CSS pour détecter le type d’appareil ou la taille de l’écran et appliquer des styles ou des classes en conséquence.

Détection de périphériques à l’aide de requêtes multimédia CSS

Vous pouvez définir des points d’arrêt pour cibler des appareils spécifiques tels que des téléphones, des tablettes ou des ordinateurs de bureau. Par exemple:

• Téléphones: Appareils avec une largeur d’écran jusqu’à 767px.
• Comprimés: Appareils avec une largeur d’écran comprise entre 768 pixels et 1024 pixels.
• Ordinateurs de bureau: Appareils avec une largeur d’écran supérieure à 1024px.

Par exemple

html
<template>
  <div class={deviceClass}>
    Content here
  </div>
</template>

@media (max-width: 768px) {
  .mobile {
    display: block;
  }
}
@media (min-width: 769px) {
  .desktop {
    display: block;
  }
}

import { LightningElement } from 'lwc';

export default class DetectDeviceLwc extends LightningElement {
  get deviceClass() {
    return window.innerWidth <= 768 ? 'mobile' : 'desktop';
  }
}

Exemple : 2

Dans le fichier .css du composant LWC

/* Pour les téléphones */

@media screen and (max-width: 767px) {
    .example {
        font-size: 14px;
        color: blue;
    }
}

/* Pour les tablettes */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .example {
        font-size: 16px;
        color: green;
    }
}

/*Pour les ordinateurs de bureau */

@media screen and (min-width: 1025px) {
    .example {
        font-size: 18px;
        color: black;
    }
}

3. Vérifiez la taille de l’écran avec window.innerWidth ou window.matchMedia

Nous pouvons vérifier dynamiquement la largeur de l’écran ou utiliser l’API matchMedia pour déterminer le type d’appareil.

window.innerWidth : Plus simple et direct, mais peut être moins performant pour les événements de redimensionnement fréquents.

fenêtre.matchMedia : Plus puissant et efficace, en particulier lorsque vous traitez des requêtes multimédias complexes ou lorsque vous devez uniquement répondre à des modifications spécifiques des requêtes multimédias.

Exemple:

import { LightningElement } from 'lwc';

export default class DetectDeviceLwc extends LightningElement {
  isMobile = false;

  connectedCallback() {
    this.checkDevice();
    window.addEventListener('resize', this.checkDevice.bind(this));
  }

  disconnectedCallback() {
    window.removeEventListener('resize', this.checkDevice.bind(this));
  }

  checkDevice() {
    this.isMobile = window.innerWidth <= 768; // Define your breakpoint here
  }
}

function checkScreenWidth() {
  const smallScreenQuery = window.matchMedia("(max-width: 767px)");
  const mediumScreenQuery = window.matchMedia("(min-width: 768px) and (max-width: 1023px)");

  if (smallScreenQuery.matches) {
    console.log("Small screen");
  } else if (mediumScreenQuery.matches) {
    console.log("Medium screen");
  } else {
    console.log("Large screen");
  }
}

// Call the function on page load
checkScreenWidth();

// Add listeners for media query changes
smallScreenQuery.addEventListener("change", checkScreenWidth);
mediumScreenQuery.addEventListener("change", checkScreenWidth);

4. Tirez parti des styles spécifiques à la plate-forme dans Salesforce

Si votre application s’exécute dans Salesforce Mobile App, vous pouvez utiliser des classes SLDS spécifiques pour plus de réactivité.

• Par exemple, utilisez les classes slds-size_1-of-1, slds-medium-size_1-of-2 ou slds-large-size_1-of-3 pour contrôler la disposition en fonction de la taille de l’écran.

Dans les composants Web Lightning (LWC), tirer parti des styles spécifiques à la plate-forme dans Salesforce est une approche efficace pour détecter et s’adapter aux appareils, garantissant une expérience utilisateur transparente. Salesforce fournit un système de conception unifié et réactif via le Système de conception Lightning (SLDS)qui comprend des classes d’utilitaires et des jetons de conception spécifiques à la plate-forme. Ces outils permettent aux développeurs d’adapter le style et le comportement des composants à différents appareils et tailles d’écran sans s’appuyer fortement sur du CSS ou du JavaScript personnalisé.

5. Fonctionnalités de la plateforme Lightning

Utilisez le contexte User-Agent et Platform de Salesforce pour la détection mobile/ordinateur de bureau :

• Dans Visualforce ou Aura, nous pouvons utiliser $UserContext.uiTheme ou $UserContext.uiThemeDisplayed.
• Dans LWC, cela peut être combiné avec une logique côté serveur ou des indicateurs de détection de plate-forme personnalisés transmis depuis Apex ou la configuration.

Logique Apex personnalisée

Si nécessaire, transmettez les informations sur l’appareil d’Apex au LWC à l’aide d’un paramètre ou d’une logique personnalisée pour détecter si l’utilisateur accède à Salesforce à partir d’une application mobile ou d’un navigateur de bureau.

UserInfo.getUiThemeDisplayed(); // Renvoie ‘Theme4d’ pour Desktop, ‘Theme4t’ pour Mobile

@AuraEnabled
public static Boolean isMobile() {     
return UserInfo.getUiThemeDisplayed() == 'Theme4t';
}

Vous pouvez ensuite consommer ces informations dans votre LWC via un appel Apex impératif.

6. SDK Salesforce Mobile (le cas échéant)

Pour les applications intégrées au SDK Salesforce Mobile, vous pouvez directement utiliser les méthodes du SDK pour détecter l’environnement et transmettre le type d’appareil à votre LWC.

Conclusion:

La combinaison d’une ou plusieurs de ces méthodes permet une détection de périphérique plus fiable, vous permettant ainsi d’implémenter un code spécifique au périphérique adapté à votre application. Ces approches sont particulièrement utiles pour garantir que vos composants LWC identifient et répondent avec précision au périphérique approprié.

Références :

Guide de référence Apex

Afficher les appareils avec suivi des appareils mobiles

Vous pouvez également lire :