I have written this basic code to detect the kind of app where my hybrid Android app is running, desktop, tablet, and phone:
var deviceDetector = (function() {
var userAgent = navigator.userAgent.toLowerCase();
var detectDevice = function(ua) {
ua = ua.toLowerCase();
// Check for ChromeOS specifically
if (/cros/.test(ua)) {
return "desktop";
}
// Check for Android TV specifically
if (/android.*tv/.test(ua)) {
return "desktop";
}
// Check for tablets
if (/ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP)))/.test(ua)) {
return "tablet";
}
// Check for phones
if (/mobi|ipod|phone|blackberry|opera mini|fennec|minimo|symbian|psp|nintendo ds|archos|skyfire|puffin|blazer|bolt|gobrowser|iris|maemo|semc|teashark|uzard/.test(ua)) {
return "phone";
}
// Default to desktop
return "desktop";
};
var detectedDevice = detectDevice(userAgent);
return {
device: detectedDevice,
detect: detectDevice,
isMobile: detectedDevice !== "desktop",
userAgent: userAgent
};
})();
It works quite well in the majority of cases but fails in Chromebooks since instead of showing the Tablet or Desktop UIs, it always displays the Android Mobile one.
The app still works fine, but for the landscape modes, it loses its main advantages and the UI breaks from time to time. Do you have any idea how I can fix it or to detect the proper User-Agent? It should return it’s running in a desktop.
Notes:
I already tried to contact the Chromium OS forum without any replies: https://groups.google.com/a/chromium.org/g/chromium-os-discuss
Furthermore, if you wonder how do I know that is returning the wrong user agent? The Play Store videos show me previews. This is how it looks in ChromeOS at the present time:
And this is how it should look:
There are considerable differences. The 1st UI is not as responsive as it should be and that is correct since it’s planned for phones, not for large screen devices.
This is the Play Store preview video:
And these are the tested devices by the Play Store:
Only in ChromeOS, the UI is somehow broken since it’s using the wrong User-Agent.
11
From what I found since the app is running in a kind of container, there is not a proper way to detect it via JavaScript (for now). I had to create a kind of hack for my app before the WebView was loaded (I’m using .NET 8):
// Set the custom user agent if ChromeOS is detected
if (IsChromeOS(this))
{
string chromeOSUserAgent = "Mozilla/5.0 (X11; CrOS x86_64 12345) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36";
MyWebView.Settings.UserAgentString = chromeOSUserAgent;
}
private bool IsChromeOS()
{
try
{
PackageManager packageManager = PackageManager;
// Check for system feature
bool hasArcFeature = packageManager.HasSystemFeature("org.chromium.arc.device_management");
// System properties
bool isChromeOSDevice = Build.Fingerprint != null && Build.Fingerprint.Contains("chrome");
// Known device models
string[] knownChromebooks = { "Chromebook", "Chromebox", "ChromeOS" };
bool isKnownChromebook = knownChromebooks.Any(keyword => Build.Model.Contains(keyword, StringComparison.OrdinalIgnoreCase));
return hasArcFeature || isChromeOSDevice || isKnownChromebook;
}
catch
{
return false;
}
}
I got some inspiration from here: How to find if android app is started by AndroidOS or ChromeOS’s android container?
In a way, you’re injecting a custom user agent. It’s not exactly the best/correct answer (for me) because it is not bullet proof since it might fail in some cases. I still raised a ticket in the ChromiumOS forums, but I’d say it’s a good enough “hack” for the moment. If anyone has a better solution please feel free to add it.