Skip to content

Useragent

Wrapper around the User-Agent Client Hints API.

๐ŸŽฌ Usage

<script>
    import {useragent} from "@sveu/browser"

    const {
        is_supported,
        mobile,
        arch,
        model,
        platform,
        platform_version,
        bitness,
        brands
    } = useragent()
</script>

๐Ÿ‘ฉโ€๐Ÿ’ปAPI

โ†ฉ๏ธ Returns

Name Description Type
supported Is the userAgentData supported Readable<boolean>
mobile Is the device mobile Readable<boolean>
arch The device architecture Readable<string>
model The device model Readable<string>
platform The device platform Readable<string>
platform_version The device platform version Readable<string>
bitness The device bitness Readable<number>
brands The device brands Readable<UserAgentDataBrand[]>

๐Ÿงช Playground

Source Code ๐Ÿ‘€

Source Code
import {
    async_state,
    on_destroy,
    to_readable,
    to_writable,
    unstore,
} from "@sveu/shared"

import { support } from "../support"

interface UserAgentData {
    mobile: boolean

    architecture: string

    model: string

    platform: string

    platformVersion: string

    bitness: string

    brands: UserAgentDataBrand[]
}

interface UserAgentDataBrand {
    name: string

    version: string
}

/**
 * Get user agent
 *
 * @remarks This function use the User-Agent Client Hints api. See https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData
 *
 */
export function useragent() {
    const mobile = to_writable(false)

    const arch = to_writable("")

    const model = to_writable("")

    const platform = to_writable("")

    const platform_version = to_writable("")

    const bitness = to_writable("")

    const brands = to_writable<UserAgentDataBrand[]>([
        { name: "", version: "" },
    ])

    const supported = support("userAgentData")

    if (unstore(supported)) {
        const { state } = async_state<UserAgentData>(
            // @ts-expect-error navigator.userAgentData is not supported in all browsers
            navigator.userAgentData.getHighEntropyValues([
                "architecture",
                "model",
                "platform",
                "platformVersion",
                "bitness",
            ]),
            {
                mobile: false,
                architecture: "",
                model: "",
                platform: "",
                platformVersion: "",
                bitness: "",
                brands: [{ name: "", version: "" }],
            }
        )
        const unsubscribe = state.subscribe((v) => {
            if (!v) return

            mobile.set(v.mobile)

            arch.set(v.architecture)

            model.set(v.model)

            platform.set(v.platform)

            platform_version.set(v.platformVersion)

            bitness.set(v.bitness)

            const _brands = v.brands.map((b: any) => {
                return {
                    name: b.brand,
                    version: b.version,
                }
            })

            brands.set(_brands)
        })

        on_destroy(unsubscribe)
    }

    return {
        supported,
        brands: to_readable(brands),
        mobile: to_readable(mobile),
        arch: to_readable(arch),
        model: to_readable(model),
        platform: to_readable(platform),
        platform_version: to_readable(platform_version),
        bitness: to_readable(bitness),
    }
}

Last update: 2023-03-09