Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide input method UA CH (Was: We can do better than "mobileness" as a boolean) #43

Open
seebigs opened this issue Jan 22, 2020 · 14 comments
Labels
enhancement New feature or request

Comments

@seebigs
Copy link

seebigs commented Jan 22, 2020

Love the idea of a "mobile" vs "desktop" user experience differentiator, but I worry that using Sec-CH-UA-Mobile: 1 is shortsighted.

We all know that the type (and amount) of content served from one single website address needs to vary greatly depending on how the user will be able to consume it, and that the resulting experience is affected by many concerns such as bandwidth, touch screens, hands-free, and so on. Whatever the future holds (smartwatches, augmented reality, billboards with holographic sharks, etc) this spec needs to be flexible enough to handle it, else we can fully expect vendors to abuse the system to find workarounds.

We don't want Client Hints to become the new navigator.userAgent where we still see libraries trying to parse a combination of Brand, Platform, and Model to try to figure out which UX category this particular device/browser falls into. How do we avoid that?

This new spec needs to provide a direct and dependable answer to the question of which type of experience will best serve this client -- and, this field needs to accommodate future formats.

@seebigs
Copy link
Author

seebigs commented Jan 22, 2020

Sec-CH-Experience: "Mobile", "Desktop", "Watch", "Television", "Headset"

@amtunlimited
Copy link
Contributor

the resulting experience is affected by many concerns such as bandwidth, touch screens, hands-free, and so on.

I would posit that most UA sniffing in that regard either searches for "Mobile" or uses the device/viewport width, and a minority look at these things.

I also don't know of a well lit path for enums that doesn't lead to a very similar problem we have with minority browser vendors now. A device will come up with a new class "foo", websites will only have a version for "desktop" and "mobile", and fail on cases it's not aware of. New devices either risk not being developed for or they pick an already existing option that's well know and fit well enough.

I see one of two options: We let browsers set whatever they want, which will lead to a lot of browser-specific behaviours and edge cases very quickly, or we codify it in a standard, in which case the list is always behind the times and either browsers stay behind the ties with it or we are back to the first problem.

Basically, I forsee the list either ballooning or ossifying.

All of those options might be too many to fit into too few buckets. Is there any benefit to putting it all into one hint instead of looking at other hints like downlink, device-memory, and the like?

@yoavweiss
Copy link
Collaborator

@amtunlimited I agree with your analysis on that list becoming ossified, unless we explicitly GREASE it (which will come with an adaptation cost).

At the same time, I was talking to @bslassey yesterday, and it seems like there's room for more form factors than just "mobile". One example that came up was a feature phone.
I think an explicit opt-in would overcome the ossification concerns. That way, we could have a "mobile" bit to signify "non-desktop", and a Sec-CH-UA-FormFactor (or some such) for more detailed info on that front.

@jonarnes
Copy link

Basically, I forsee the list either ballooning or ossifying.

+1 to this. Speaking from long hands-on experience in that field, device classifications, like form factors, feature-phoneness, and even mobileness, is a moving target. Further, the classifications have different meanings depending on geography, audience and application.

Is there any benefit to putting it all into one hint instead of looking at other hints like downlink, device-memory, and the like?

+1 to this too. downlink, device-memory, ECT, viewport-width is better for "classification". These are even slightly more "dynamic" and we avoid a too high level of abstraction where some clients are put into the wrong bucket.

@bslassey
Copy link

At the same time, I was talking to @bslassey yesterday, and it seems like there's room for more form factors than just "mobile". One example that came up was a feature phone.
One reason I can see value in a hint that separates mobile, desktop and feature phone is the primary input method (touch, mouse, d-pad) is different where as a tablet has the same primary input mode as a smartphone and for many applications separating the two would be unnecessary information that could otherwise be accessed via viewport width by applications that need it.

When it comes to naming, perhaps being explicit about that delineation would be helpful (e.g. Sec-CH-UA-INPUT: touch/mouse/dpad)

@amtunlimited
Copy link
Contributor

I think having these concrete hints is better in general. The composability might need to be examined entropy-wise, but it'll allow for getting what you actually need instead of having to blow your privacy budget on something with an insane amount of entropy like sec-ch-ua-model to look up how big the screen is.

@twirl
Copy link

twirl commented Jan 27, 2020

Copying from the closed issue: the primary goal of detecting ‘mobileness’ for developers is answering two questions: whether they can use hover-based techniques (i.e. user uses mouse or pen) and whether they can use multitouch-based techniques. All other stuff is highly irrelevant. Screen size says nothing in current state of affairs — right now my phone screen has more pixels (both logical and physical) than my laptop one. It would be more or less useful to understand physical characteristics of the screen (DPI) than ’mobileness’.

Detecting mobile user-agents mostly serve the purpose to guess resolution and scaling, since you may simply hardcode them for popular devices, such as iPhone. And providing just 'mobile' flag doesn't help to remove this hardcode.

@yoavweiss yoavweiss changed the title We can do better than "mobileness" as a boolean Provide input method UA CH (Was: We can do better than "mobileness" as a boolean) Jan 27, 2020
@yoavweiss yoavweiss added enhancement New feature or request needs_pr and removed enhancement New feature or request labels Jan 27, 2020
@yoavweiss yoavweiss added enhancement New feature or request and removed needs_pr labels Mar 9, 2020
@ronancremin
Copy link

One justification for keeping mobileness as a boolean is compatibility with the "mobile" token currently used in user agent strings (see #120). But user agent strings in the wild already use other tokens to indicate device type e.g. "VR" for virtual reality headsets. Here's a UA string from an Oculus Quest 2:

Mozilla/5.0 (X11; Linux x86_64; Quest 2) AppleWebKit/537.36 (KHTML, like Gecko) OculusBrowser/18.1.0.2.46.337441587 SamsungBrowser/4.0 Chrome/95.0.4638.74 VR Safari/537.36

Many televisions use a "TV" token:

Mozilla/5.0 (SMART-TV; Linux; Tizen 5.0) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/2.2 Chrome/63.0.3239.84 TV Safari/537.36

So a simple mobileness boolean is incomplete if the goal is backwards compatibility, meaning a reduction of functionality.

@summercms
Copy link

Going to add to this issue, as I wanted to open an issue and did a quick search, which lead me to this open issue.

I agree with #94

I was thinking Sec-CH-UA-Mobile: ?1 is really bad and actually not that helpful to developers. Take the following example:

Apple iPhone X has one screen.

and

Samsung Galaxy Fold has more than one screen.

Sec-CH-UA-Mobile would give the same answer to both devices, though developers would want to write different code for each device. So client hints should be expanded.

This lead me to think why this repo doesn't create a new header, something like:

Sec-CH-UA-Device-Type

Then the above example could have the following results:

Apple iPhone X has one screen.

Sec-CH-UA-Device-Type: Mobile Smart
Sec-CH-UA-Mobile: ?1

Samsung Galaxy Fold has more than one screen.

Sec-CH-UA-Device-Type: Mobile Foldable
Sec-CH-UA-Mobile: ?1

I would then suggest a whole range of values (which we currently use for our user agent parser in the repo: https://github.com/Summer-CMS-Modules/sc-parser-module)

Appliance
Bot
Camera
Car
Dect
Desktop
Devboard
Emulator
Ereader
Gaming Console
Gaming Portable
Gps
Headset
Inflight
Media
Mobile Feature
Mobile Foldable
Mobile Smart
Monitor
Pda
Pos
Printer
Projector
Signage
Smart Speaker
Tablet
Television
Watch
Whiteboard

Fingerprinting

I know this repo talks a lot about fingerprinting but I feel this extra information is not going to cause any major issues with regards to that.

@Sora2455
Copy link

Sora2455 commented May 3, 2022

I mean you'd be going from 1 bit of information to 5 bits of information, with most of the values other than "Desktop", "Tablet" and the mobile values will be highly uncommon and so will be highly valuable as fingerprinting values.

Besides, why does the server need to know what kind of device you have?

If you need to serve less content to devices with less bandwidth then use the Downlink and Save-Data client hints. (Which has the advantage of discriminating between high-end devices on high-end plans and low-end devices on low-end plans, and other such combinations.)

If you need to approximate how much content to serve above the fold, use the Viewport-Width client hint.

If you want to serve smaller images to smaller screens, use the picture tag.

If you need to know if the device has a mouse. supports hover and so on, there are Media Queries for those. (any-hover, any-pointer). You can use them to conditionally load CSS files if you want to squeeze every last drop of performance out.

General responsive design should remove 99% of all uses cases that would "require" you to know what kind of device the user is using.

@summercms
Copy link

@Sora2455

I think you missed my point, it's not just about responsive screen development or serving less data to devices.

I repeat and expand the example I said in the previous comment.

Apple iPhone X

Apple iPhone X has one screen.

Sec-CH-UA-Device-Type: "Mobile Smart"
Sec-CH-UA-Mobile: ?1

Below is a developer design example:

image

Samsung Galaxy Fold

Samsung Galaxy Fold has more than one screen.

Sec-CH-UA-Device-Type: "Mobile Foldable"
Sec-CH-UA-Mobile: ?1

Below is a developer design example:

image

As you can see it's more than responsive screen size or serving less data etc. It's a completely different user experience and code design based on the device type. This can be repeated for other device types as well. For example, I wouldn't code the same website for a smart phone and an Oculus Rift headset and just use a responsive design to allow both devices to work. The code would be changed a lot more to fully take advantage of the different device types and offer different functionality between them!

Another example (GoogleBot using Chrome 100 vs a human being using Chrome 100 on a desktop computer):

Sec-CH-UA-Device-Type: "Bot"
Sec-CH-UA: "Chrome"; v="100", "Chromium"; v="100", "?Not:Your Browser"; v="11"

vs

Sec-CH-UA-Device-Type: "Desktop"
Sec-CH-UA: "Chrome"; v="100", "Chromium"; v="100", "?Not:Your Browser"; v="11"

A common developer design is serving a GDPR cookie banner only to the human user and not to GoogleBot.

Why not use feature detecting instead?

There are lots of devices out there that you can't reply on using feature detection and need to use a client hints user agent instead (as a last resort). There are many IoT devices that create this issue!

Scope to add even more device types

When a completely new device type is created in the future manufacturers can add a new value to the Sec-CH-UA-Device-Type header.

Hope my example makes a bit more sense, what I'm suggesting.

@Sora2455
Copy link

Sora2455 commented May 4, 2022

I feel strongly like the ability to detect how many screens the page is rendered on should be a CSS Media query, if anything...

I also feel like the rapid development of new devices will far outpace the specification's ability to enumerate them all, let alone all developers create a unique experience for each one.

@Sora2455
Copy link

Sora2455 commented May 5, 2022

Turns out that there's a JavaScript API specifically for organizing windows across multiple screens: https://web.dev/multi-screen-window-placement/

@summercms
Copy link

summercms commented May 5, 2022

I wanted to add a php Laravel code example for my previous comment.

if (Request::header("Sec-CH-UA-Device-Type")  !== "Bot" ) {
    // Run the cookie banner code (bypass for bots)
}

This header allows coding languages like php to do things, that Javascript can do (using feature detection apis).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

9 participants