Erstellen wir einen einfachen React-Hook, um Browser und ihre Funktionen zu erkennen

User Agent Sniffing ist der beliebteste Ansatz zur Browsererkennung. Leider ist es aus mehreren Gründen für eine Frontend-Entwicklung nicht sehr zugänglich. Browser-Anbieter versuchen ständig, das Schnüffeln zu verhindern. Daher hat jeder Browser sein eigenes User-Agent-String-Format, dessen Analyse sehr komplex ist.

Es gibt eine viel einfachere Möglichkeit, dasselbe mit der Browser-CSS-API zu erreichen, die ich Ihnen zeigen werde. Erstellen wir also einen React-Hook zur Erkennung von Browserfunktionen.

Wir werden die statische Methode CSS.supports() verwenden. Es gibt einen booleschen Wert zurück, der angibt, ob der Browser eine bestimmte CSS-Funktion unterstützt oder nicht. Dies ist ein Javascript-Analogon von @supports at-rule. Es funktioniert ähnlich wie Medienabfragen, jedoch mit CSS-Funktionen als Betreff.

Hook zum Erkennen unterstützter Funktionen

Der naivste Ansatz, CSS.supports() während des Komponenten-Rendering-Zyklus aufzurufen, führt zu Problemen in serverseitigen Rendering-Umgebungen wie Next.js. Da der serverseitige Renderer keinen Zugriff auf Browser-APIs hat, erzeugt er lediglich eine Codezeichenfolge.

import type {FC} from 'react';

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

Wir werden stattdessen diesen einfachen Haken verwenden. Der Hook empfängt eine Zeichenfolge mit Support Condition, einer CSS-Regel, die wir validieren werden, z. B. Anzeige: 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;
};
</boolean>

Jetzt können wir innerhalb der React-Komponente prüfen, ob verschiedene CSS-Funktionen unterstützt werden. Hier ist die MDN @supports-Referenz

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)
    ');
    // ...
}

Erkennen Sie den Benutzerbrowser anhand der CSS-Unterstützungsbedingungen

Um den Browser des Benutzers zu erkennen, müssen wir ein wenig hacken.

Browser-Hack hat nichts mit Gesetzesverstößen zu tun. Es handelt sich lediglich um eine spezielle CSS-Deklaration oder einen speziellen CSS-Selektor, der in einem der verfügbaren Browser anders funktioniert.

Hier ist die Referenzseite mit verschiedenen Browser-Hacks. Nach gründlichem Experimentieren auf meiner Maschine habe ich diese ausgewählt:

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:"*"'
}

Und so sieht unser endgültiger Haken aus:

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

Vollständige Demo

Hier ist eine voll funktionsfähige Demo des Hooks.

Letzte Gedanken

Ich kann nicht sagen, dass dies ein absolut sicherer und stabiler Ansatz ist. Sehr oft werden Browser aktualisiert, Anbietereigenschaften aufgegeben oder durch Standards ersetzt. Gleichzeitig kann ich Folgendes zum User-Agent-Sniffing sagen. Beide Wege haben ähnliche Probleme. Aber CSS.contains() ist einfacher zu warten und viel detaillierter. Es lädt Entwickler dazu ein, den Ansatz der eleganten Verschlechterung oder der progressiven Verbesserung zu nutzen und ihre Patches granular anzuwenden.

Das obige ist der detaillierte Inhalt vonErstellen wir einen einfachen React-Hook, um Browser und ihre Funktionen zu erkennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!