Migrate `useDetectOs` hooks from `nodejs.dev`

[HinataKah0]

Background:
See here

These waiting to be migrated components rely on useDetectOs hooks:

• Hero
• InstallTabs

Please migrate useDetectOs hooks alongside the utility functions util/detectOS.ts and util/downloadUrlByOS from nodejs.dev.
Please take a note on this issue.

[FHachez]

Hey, I'd love to give this a go if it's ok.

[HinataKah0]

Sure, go ahead! 😄

[FHachez]

Top.

The detectOS rely on navigator.appVersion in case navigator.appVersion.includes('Win').
Do you know more about NavigatorID.appVersion? I see that it's deprecated.
Do you expect to keep this for the first version?

According to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/appVersion

The window.navigator.appVersion, window.navigator.appName and window.navigator.userAgent properties have been used in "browser sniffing" code: scripts that attempt to find out what kind of browser you are using and adjust pages accordingly. This lead to the current situation, where browsers had to return fake values from these properties in order not to be locked out of some websites.

The other solution is to rely on the UserAgent but this is of course not infallible:

The window.navigator.userAgent property may also contain the version number (for example "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1"), but you should be aware of how easy it is to change the user agent string and "spoof" other browsers, platforms, or user agents, and also how cavalier the browser vendor themselves are with these properties.

[ovflowd]

Correct, appVersion is indeed a deprecated API. (In general terms, userAgent is also "deprecated" or at least browsers such as Chrome and Edge will stop updating their user-agents with newer OS/Arch metadata.

Hence why on the hook, we have this workaround that uses a new Browser API (NavigatorUAData): https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData

That allows us to get the "bitness"/entropy of the browser's architecture. That API respects Website Permissions, hence why it's an asynchronous call. (on the useDetectOs Hook).

For detectOs.ts you might mimic what we did on https://github.com/nodejs/nodejs.org/blob/main/public/static/js/legacyMain.js#L83-L106 (maybe) (which is the legacy JavaScript snippet for the nodejs.org prior Next.js (actually still running there until we switch to these new Components). Which still relies on userAgent but it is what we have 😅

[ovflowd]

Privacy is really becoming a thing, huh

[ovflowd]

Fixed by #5322