Over the weekend frontend-firebrand Alex Russell tweeted that it’s confusing these days to know how to get the major version of a Chromium browser, either via the
User-Agent header (given User-Agent Reduction), or from User-Agent Client Hints.
(btw, I asked DALLE2 Alex’s question “Can you make hide or hare of this?”, and yeah, it mostly can.)
Before I spend any energy improving the docs (thanks for the bug, Alex), let me try to give the simplest answer to the question: how do I find out what major version of Chromium a user is on in the year 2022+?
There’s two ways to go about this.
In Chrome 101, we shipped the terribly named “Phase 4” (that’s on me) part of the User-Agent Reduction project. Prior to version 101, you would see something in the User-Agent (either via HTTP or reflected by
navigator.userAgent) that looks like so:
In Phase 4, we reduced the MINOR.BUILD.PATCH portions of the version to the constant “0.0.0”:
But in terms of browser version changes coming to the UA string, that’s it. So if your use case is simple and you just need the major version of the browser, you can continue to parse the UA string as before (hopefully using an actively maintained project like ua-parser)—it will continue to be updated for each new major version update (as I write this, my browser reports
User-Agent Client Hints
If you want to get slightly fancier, and ditch your existing UA parsing library dependency (but maybe pick up a structured headers parsing library dependency), you can get the Chrome version from the new
Sec-CH-UA: "Chromium";v="106", "Google Chrome";v="106", "Not;A=Brand";v="99"
Admittedly, it looks kinda weird. But the good news is you don’t have to care about Client Hints to receive the header—it’s sent by default. Feel free to consult https://web.dev/migrate-to-ua-ch/ if you do have to care about those.
The other cool thing is you can use the new
navigator.userAgentData.brands API to get the equivalent of
Sec-CH-UA header and do something like the following (maybe working around a known bug) and it will work in Chrome, Chromium, Edge, Opera, Brave, etc.
navigator.userAgentData.brands.some( item => item.brand == "Chromium" && item.version > 105 )
So that’s it. If you need the major version of a Chromium browser you can keep using
User-Agent, or use
But if you need the full version of the browser, or the OS, that’s a different blog post I’ll get to once someone tweets their way onto my TODO list.