Source: {source}
\n {isMobile ?I'm on mobile
:I'm on desktop
}\n \n\n```\n\n> **Note** Read more about Astro request headers here: [Astro Docs](https://docs.astro.build/en/guides/server-side-rendering/#astrorequestheaders)\n\n#### Usage with Astro API routes (server-side)\n\n`useUserAgent` can also be used inside your API routes, to perform some logic based on the client user-agent.\n\nIn the example below, an API route is used to redirect a user to a different mobile page when he is using a mobile client, otherwise it serves the normal content.\n\n```typescript\nimport type { APIContext } from 'astro';\nimport { useUserAgent } from 'astro-useragent';\n\nexport async function get({ request }: APIContext) {\n const uaString = request.headers.get('user-agent');\n const { isMobile } = useUserAgent(uaString);\n\n if (isMobile) {\n return Response.redirect('https://mobile.mysite.com/', 307);\n }\n\n const greetings = {\n message: 'hello from astro API'\n };\n\n return new Response(JSON.stringify(greetings), {\n status: 200\n });\n}\n```\n\n> **Note** Read more about Astro API routes here: [Astro Docs](https://docs.astro.build/en/guides/server-side-rendering/#api-routes)\n\nWe have also setup an example repository available here: [example-useragent](../../apps/example-useragent)\n\n### Parsed object interface\n\nThe parsed `UserAgent` object will have the following interface:\n\n```typescript\nexport interface UserAgent {\n readonly source: string | null; // The original user agent string.\n readonly browser: string | null;\n readonly browserVersion: number;\n readonly cpu: string | null;\n readonly deviceType: string | null;\n readonly deviceVendor: string | null;\n readonly engine: string | null;\n readonly engineVersion: number | null;\n readonly os: string | null;\n readonly osVersion: number | null;\n readonly isAndroid: boolean;\n readonly isChrome: boolean;\n readonly isChromeOS: boolean;\n readonly isDesktop: boolean;\n readonly isEdge: boolean;\n readonly isFirefox: boolean;\n readonly isIE: boolean;\n readonly isIos: boolean;\n readonly isIpad: boolean;\n readonly isIphone: boolean;\n readonly isMac: boolean;\n readonly isMobile: boolean;\n readonly isOpera: boolean;\n readonly isSafari: boolean;\n readonly isTablet: boolean;\n readonly isWindows: boolean;\n readonly isBot: boolean;\n readonly isAIBot: boolean;\n readonly isChromeFamily: boolean;\n readonly isAppleSilicon: boolean;\n getUA(): string;\n getBrowser(): IBrowser;\n getCPU(): ICPU;\n getDevice(): IDevice;\n getEngine(): IEngine;\n getOS(): IOS;\n}\n```\n\n## Caveats\n\nUserAgent-based mobile detection isn’t always accurate. Instead, use the following client-side function:\n\n```javascript\nfunction isMobile() {\n const match = window.matchMedia('(pointer:coarse)');\n return match && match.matches;\n}\n```\n\n## Changelog\n\nPlease see the [Changelog](CHANGELOG.md) for more information on what has changed recently.\n\n## Acknowledgements\n\n`astro-useragent` is a port from [next-useragent][next-useragent] to Astro. so big thanks to the contributors behind next-useragent package.\n\n[astro-ssr]: https://docs.astro.build/en/guides/server-side-rendering\n[npm]: https://npmjs.com/package/astro-useragent\n[next-useragent]: https://github.com/warent/next-useragent\n\n\n\n[version-badge]: https://img.shields.io/npm/v/astro-useragent.svg\n[downloads-badge]: https://img.shields.io/npm/dt/astro-useragent\n[github-actions]: https://github.com/codiume/orbit/actions\n[github-actions-badge]: https://github.com/codiume/orbit/actions/workflows/node.js.yml/badge.svg\n[typescript]: https://npmjs.com/package/astro-useragent\n[typescript-badge]: https://img.shields.io/npm/types/astro-useragent\n[makepr]: https://makeapullrequest.com\n[makepr-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg\n","readmeFilename":"README.md"}