Develop Reference

How to create message for browser [duplicate]

Because the canvas bug of samsung stock browser, my program will cause error.
(http://code.google.com/p/android/issues/detail?id=39247)
So I want to disable canvas on all Samsung stock browser.
Could I detect it by navigator object or other way?
I found the same question, but it's solution looks like not perfect
(javascript - regex matching devices on user agent)
Wiki shows Samsung has more models.
(http://en.wikipedia.org/wiki/Samsung_Galaxy_S_III)

You can simply do this
var isSamsungBrowser = navigator.userAgent.match(/SamsungBrowser/i)

The following regex covers almost all Samsung mobile devices.
if(navigator.userAgent.match(/SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i)) {
console.log("it's Samsung");
// your code for Samsung Smartphones goes here...
}

using the userAgent is enough to detect this bug. Look for the string 534.30. For instance:
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {
// Clear the canvas a different way because they are using a known-bad version of the default android browser
}

I think it can be ok:
const isSamsungBrowser = navigator.userAgent.indexOf('SamsungBrowser') > - 1

Some samsung user agents have the word "samsung" in them. If you find "samsung" in the user agent string it's a good indicator. However, most samsung user agents I looked at didn't contain the word samsung. But there is a different check, all samsung model numbers (so far) are in the format "GT-xxxxxx" so we check for the user agent having "android" in, followed by "GT-" somewhere in the UA. (or the word samsung...) This is obviously a little slack but seems to catch them ok so far....

How can I check if a browser is Chromium-based?

I have a Chrome extension, and I am currently writing a website to advertise it.
I know that a Chrome extension can be installed in all Chromium-based browsers (Chrome, Opera, etc.).
Is it possible to check if a browser can download the extension from the web store or is chromium-based?
I found code to detect if it was Google Chrome here. Correct me if I'm wrong, but I think window.chrome doesn't return in all Chromium-based browsers.

window.chrome
As of now, window.chrome works in all chromium based browsers
var isChromium = !!window.chrome;
console.log(isChromium)
Resources
https://browserstrangeness.github.io/css_hacks.html
http://browserhacks.com/
navigator.userAgentData
User-Agent Client Hints API returns information about the browser and operating system of a user. (Introduced in chrome 90)
var isChromium = !!navigator.userAgentData && navigator.userAgentData.brands.some(data => data.brand == 'Chromium');
console.log(isChromium)
Resources
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData
https://web.dev/migrate-to-ua-ch/

Considering that you just want to get to know whether browser is chromium based or not ,
Method 1: ( Server Side Detection)
-- Get Browser name from client request itself and serving the webpage accordingly. For example, If backend is based on Nodejs, You can get browser name as answered in this answer.
Method 2: ( Client Side Detection)
-- On client Side ,You can first get the Browser Name as answered in this answer , and then check it from HARD-CODED Chromium-based browsers Array.

Try this. This check shows true for Chrome, Safari, Edge, Samsung browser… etc
The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing.
function isChromium(){
return window.CSS && window.CSS.supports && window.CSS.supports('(-webkit-appearance:none)');
}

Try using the following expression
navigator.userAgent.includes("Chrome")

I guess:
var isChrome = navigator.userAgent.match(/Chrome\/\d+/) !== null;

JavaScript detect in application usage

I need to detect a usage from Android WebView or iOS UIWebView or any in app usage.
Checking the user agent for mobile like detecting-ios-android-operating-system or any mobile like -
$(document).ready(function() {
if (/Mobi/.test(navigator.userAgent)) {
// mobile!
}
});
Is not enough beacuse I want to disable some button and use the application navigation buttons but if the user is on mobile browser I want to keep the buttons.

You can use the following to detect mobile devices devices:
// detect browser
var android = navigator.userAgent.match(/Android/i) != null; // Check if using Android
var iPad = navigator.userAgent.match(/iPad/i) != null; // Check if using an iPad
var iPhone = navigator.userAgent.match(/iPhone/i) != null; // Check if using an iPhone
Detecting Webviews inside apps is much harder as those are not really distinguished from normal browser views.
From Google Dev docs you can check for Version/_X.X_:
If you’re attempting to differentiate between the WebView and Chrome
for Android, you should look for the presence of the Version/X.X
string in the WebView user-agent string. Don’t rely on the specific
Chrome version number (for example, 30.0.0.0) as the version numbers
changes with each release.
https://developer.chrome.com/multidevice/user-agent#webview_user_agent
And then this posts answer gives good info on detecting for iOS
detect ipad/iphone webview via javascript
Something like this comment: https://stackoverflow.com/a/10170885/5234751
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);

How to detect if web app running standalone on Chrome mobile

Chrome mobile has recently added the ability to add to home screen, similar to iOS. This is cool but it doesn't support it as well as iOS - it doesn't support window.navigator.standalone so you can't detect whether you are running as a standalone app.
The reference says:
How can I detect if the app is running as an installed app?
You can’t, directly.
Notice it says "directly". My question is can we do it indirectly? Is there some tricky way to make an educated guess?

This answer comes with a huge delay, but I post it here just for other people who are struggling to find a solution.
Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone:
Using CSS:
#media all and (display-mode: standalone) {
/* Here goes the CSS rules that will only apply if app is running standalone */
}
Using both CSS and Javascript:
function isRunningStandalone() {
return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
/* This code will be executed if app is running standalone */
}
If you need more information, Google Developers has a page dedicated to this topic: https://developers.google.com/web/updates/2015/10/display-mode

iOS and Chrome WebApp behaves different, thats the reason i came to following:
isInWebAppiOS = (window.navigator.standalone === true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);
Same as here: Detect if iOS is using webapp

For the IOS we have window.navigator.standalone property to check..
But for Chrome on Android, it doesn't support this property. Only way to check this is by calculating screen width and height.
Below is the code to check that:
navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)
I got reference from below link:
Home Screen Web Apps for Android Thanks to Chrome 31

An old question but significantly better solutions available today for Chrome Android.
One of the ways(cleanest IMO). You may add Web App Manifest with a 'start_url' key with a value that adds a query string parameter to your usual homepage.
ex:- if homepage url is https://www.example.com.
in Web App Manifest set
"start_url": "https://www.example.com/?user_mode=app"
Google's guide about Web app manifest:https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

With IOS, localstorage for the standalone and web mode are different. With android KitKat and Chrome, when you save a value in localstorage on the web version, you're able to retrieve it in standalone mode.
So, you just have to save document.documentElement.clientHeight to localstorage when user is browsing the web version (before adding to homescreen). Then, just compare the current value of document.documentElement.clientHeight with localstorage value. If the current value is >, it's standalone mode.
I tried it on several devices.

For Google Chrome (Android) from version 39 onwards with web application manifest (json) and in case, it is a single page application, I use this 'trick':
In the manifest.json I put: "start_url": "standalone.html".
Normally it is (in my case index.html), but from index.html I make an identical clone: standalone.html (or whatever you fancy).
Then, to check, I use Javascript like this:
var locurl = document.location.href;
if (locurl.indexOf("standalone.html") != -1) {
console.log("app is running standalone");
} else {
console.log("app is running in normal browser mode");
}
That works.
It might work too in Google Chrome (mobile) version 31-38 with this meta-tag:
<meta name="application-url" content="http://my.domain.com/standalone.html">.
Not tested, yet.

There is no 'proper' way to do it on Android, hence no API support yet.
The workaround we used in my company -
On first login, store screenheight in localstorage.
By screenHeight i mean document.documentElement.clientHeight before page loads, since then doc grows and its not accurate measure for real available screen height.
Whenever user logs in next time - check current screenheight vs stored - if it becomes bigger, the user has gone fullscreen.
There is no scenario upon which it can become smaller, IF YOU DO store FIRST TIME value for screen height.
Caveat - user that will clean cash.
We chose to ignore that, since most users don't do it or do it relatively rarely, and it will suffice(in our opinion) for some time until there will be API fix for this( hopefully there will be :) )
Option b - check available screenheight vs device screen height, the matchup for a few test devices & browser modes showed some pattern( available height < 70 in webapp) - i strongly believe a wider comparison can get values that will suffice for 90% of devices in 90% cases.
All of this is a workaround, of course, i m not pretending its a solid stable way to get to desired functionality - but for us it worked, so i hope this helps somebody else who fought this bug(cant call missing such crucial api feature other way). Good luck :)

To detect if it's running on MIT AI2 webview:
if (typeof window.AppInventor!="undefined") { return true; }

you have to work with window.navigator.standalone, this API is only works on mobile IOS safari, not event on your macbook or iMac's safari...

Simple javascript detect user's device

I want to add javascript into my template to detect that every time users view my websites with what kind of device (Smartphone, tablet or PC).
Currently, I try to do it with javascript, here it is:
var smartPhone = "smartphone";
var Ipod = "ipod";
var userDevice = navigator.userAgent.toLowerCase();
function DetectPhone()
{
if (userDevice.search(smartPhone) > -1)
return true;
else
windows.location = "/pageforphone.aspx";
}
function DetectIpod()
{
if (userDevice.search(Ipod) > -1)
return true;
else
windows.location = "/pageforpod.aspx";
}
Did I write the codes right? Honestly, no iPhone...
Of course, if these were completed with Php or Asp.net would be better, but is it true that people always turn the javascript off on their palm devices?
Also, i think iphone or ipod or any other tablets are quite similar, is it ok that i use same redev pages for those devices? Actually i am not very understanding what is the differences among them and what should i be aware when i redev my web pages.

The premise of the question, that browser-sniffing is acceptable, is false. You should never engage in browser sniffing, simply because you cannot confidently accomplish what you set out to accomplish. User Agent Strings are not immutable, and are often times changed by plugins installed on the client machine, or by the client themselves (not uncommon, since bad programmers may lock them out of a site based on their UA-String).
Rather than asking what device the user is one, you should instead be asking what functionality is the device capable of. This brings you to feature detection, where you set out to do X, test to see if the user agent is capable of doing X, and then proceed to do or not do X. For instance:
if ( !!document.createElement("video").canPlayType ) {
console.log( "HTML5 Video Supported" );
}
This is more reliable than trying to see if the user is on an iPhone, iPad, Windows Tablet, or HTML5 Enabled Browser. You can use tools like Modernizr to perform a lot of these tests for you - over 40 in fact.

There many mobile devices on the market + each device can have more than one browser installed. I would prefer using some library rather than funding "iPhone" in user agent string (I'm using Android phone with Opera browser myself)
For example:
http://detectmobilebrowsers.mobi/
http://wurfl.sourceforge.net/ - server side, has a large database of devices and features supported
http://modernizr.com - client size JavaScript library, detects which HTML5 features available on browsers (e.g. geolocation API, video, Index DB, local storage, etc.)
Both of them are regularly updated with latest mobile devices released and provide you with information which features are supported on given device

This is how I use javascript to detect iOS devices
<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
var isiPhone = ((agent.indexOf('iphone'))!=-1)
if (((agent.indexOf('iphone'))!=-1) {
document.location = "mobile.aspx?device=iphone";
}
if (((agent.indexOf('ipod'))!=-1) {
document.location = "mobile.aspx?device=ipod";
}
if (((agent.indexOf('iPad'))!=-1) {
document.location = "mobile.aspx?device=ipad";
}
</script>