Créons un simple hook React pour détecter les navigateurs et leurs capacités

Le reniflage des agents utilisateurs est l'approche la plus populaire pour la détection des navigateurs. Malheureusement, ce n'est pas très accessible pour un développement front-end pour plusieurs raisons. Les fournisseurs de navigateurs essaient constamment de rendre le reniflage impossible. Ainsi, chaque navigateur possède son propre format de chaîne d'agent utilisateur, très complexe à analyser.

Il existe un moyen beaucoup plus simple d'obtenir la même chose en utilisant l'API CSS du navigateur, que je vais vous montrer. Créons donc un hook React de détection des capacités du navigateur.

Nous allons utiliser la méthode statique CSS.supports(). Il renvoie une valeur booléenne indiquant si le navigateur prend en charge ou non une fonctionnalité CSS donnée. C'est un analogue javascript de @supports at-rule. Cela fonctionne de la même manière que les requêtes multimédias, mais avec des capacités CSS comme sujet.

Hook pour détecter les fonctionnalités prises en charge

L'approche la plus naïve consistant à appeler CSS.supports() pendant le cycle de rendu des composants créera des problèmes dans les environnements de rendu côté serveur, tels que Next.js. Étant donné que le moteur de rendu côté serveur n'a pas accès aux API du navigateur, il produit simplement une chaîne de code.

import type {FC} from 'react';

const Component: FC = () => {
    // ? Don't do this!
    const hasFeature = CSS.supports('your-css-declaration');
    // ...
}

Nous utiliserons plutôt ce simple crochet. Le hook reçoit une chaîne contenant condition de support, une règle CSS que nous allons valider, par ex. affichage : flex.

import {useState, useEffect} from 'react';

export const useSupports = (supportCondition: string) => {
    // Create a state to store declaration check result
    const [checkResult, setCheckResult] = useState<boolean | undefined>();

    useEffect(() => {
        // Run check as a side effect, on user side only
        setCheckResult(CSS.supports(supportCondition));
    }, [supportCondition]);


    return checkResult;
};

Nous pouvons désormais vérifier la prise en charge de différentes fonctionnalités CSS depuis le composant React. Voici la référence MDN @supports

import type {FC} from 'react';

const Component: FC = () => {

    // Check for native `transform-style: preserve` support
    const hasNativeTransformSupport = useSupports('
        (transform-style: preserve)
    ');

    // Check for vendor prefixed `transform-style: preserve` support
    const hasNativeTransformSupport = useSupports('
        (-moz-transform-style: preserve) or (-webkit-transform-style: preserve)
    ');
    // ...
}

Détecter le navigateur de l'utilisateur à l'aide des conditions de prise en charge CSS

Afin de détecter le navigateur de l'utilisateur, nous devons faire un petit piratage.

Le piratage du navigateur n'a rien à voir avec des violations de la loi. Il s'agit simplement d'une déclaration ou d'un sélecteur CSS spécial qui fonctionne différemment dans l'un des navigateurs disponibles.

Voici la page de référence avec différents hacks de navigateur. Après une expérimentation approfondie sur ma machine, j'ai choisi ceux-ci :

const hacksMapping = {
    // anything -moz will work, I assume
    firefox: '-moz-appearance:none',
    safari: '-webkit-hyphens:none',
    // tough one because Webkit and Blink are relatives
    chrome: '
        not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*"'
}

Et voici notre dernier crochet :

export const useDetectBrowser = () => {
    const isFirefox = useSupports(hacksMapping.firefox);
    const isChrome = useSupports(hacksMapping.chrome);
    const isSafari = useSupports(hacksMapping.safari);

    return [
        {browser: 'firefox', condition: isFirefox},
        {browser: 'chromium based', condition: isChrome},
        {browser: 'safari', condition: isSafari},
    ].find(({condition}) => condition)?.browser as 
        'firefox' | 'chromium based' | 'safari' | undefined;
};

Démo complète

Voici une démo fonctionnelle complète du hook.

Réflexions finales

Je ne peux pas dire qu’il s’agit d’une approche stable et à toute épreuve. Les navigateurs sont mis à jour, les propriétés des fournisseurs sont très souvent abandonnées ou remplacées par les standards. En même temps, je peux dire ceci à propos du reniflage des agents utilisateurs. Les deux méthodes présentent des problèmes similaires. Mais CSS.contains() est plus facile à maintenir et beaucoup plus granulaire. Il invite les développeurs à utiliser une approche de dégradation gracieuse ou d'amélioration progressive et à appliquer leurs correctifs de manière granulaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!