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

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;

Related

Navigator vibrate break the code on ios browsers

I want to use navigator.vibrate on my page.
This is my code:
var canVibrate = "vibrate" in navigator || "mozVibrate" in navigator;
if (canVibrate && !("vibrate" in navigator))
{
navigator.vibrate = navigator.mozVibrate;
}
$(document).on('click', '.answer', function (eve) {
$this = $(this);
navigator.vibrate(222);
// some other code ...
This works on Android devices but on iOS (I tested on Firfox, Chrome and Safari on some iOS devices) the code will be broken at this line.
Why is that?
Apple's mobile web browser simply does not have support for it.
Firefox and Chrome for iOS are wrappers around Safari's rendering engine.
Quentin is correct that Apple devices do not support the API.
The given code fails to check for vibration support when actually calling the method. To avoid the vibrate function being caught undefined:
const canVibrate = window.navigator.vibrate
if (canVibrate) window.navigator.vibrate(100)
We don't want our app to break down and be unusable on iOS devices.
But we really want to use navigator.vibrate() on Android or wherever possible.
One thing you can do is you can create your own policy over browser policies. Ask "Can we make iOS devices ignore navigator.vibrate()"?
The answer is "Well, yes you can do that by using a user agent parser."
(Such as Faisal Salman's UAParser to detect if the user's device was an iOS or Mac OS device.)
In your code, wrap all the navigator.vibrate() calls inside conditions like,
if(nameOfUsersOS != "iOS" && nameOfUsersOS != "Mac OS") { navigator.vibrate(); }
Note: You must replace nameOfUsersOS with your own variable name.
Note: This is only one possible approach. Policy makers of Apple can and sometimes do change their minds. That means in the future they could allow the good Vibration API just like they allowed the Web Speech API recently. You must use the solution in kotavy's answer unless your policy is like "no vibration for Apple users forever".

js-cookie library working on Android but not iOS devices

I am building a web app that uses js-cookie. I use the following to import the js-cookie library into my html/javascript file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscookie/2.1.4/js.cookie.js"></script>
My js-cookie code works perfectly with Android devices: Cookies are created and retrieved, just as expected. However, the same code fails to write/read cookies when executed on iOS devices (iPhones). The browser doesn't matter; I have tested with the latest versions of Safari, Chrome, and Firefox for iOS.
The cookies, when written, come back as undefined when I attempt to read them on iOS devices. Here is a snippet of code that I use to write the cookies:
//Set expiration cookie...
nowDate = new Date();
expiresDate = new Date(nowDate.getTime() + (120 * 120000));
//cookie expires in 4 hours
Cookies.set('expires', expiresDate, { expires: expiresDate });
Any subsequent attempt to read these cookies works perfectly on Android devices, but not on iOS devices. Here's an example piece of code I use to read the cookie:
expiresCookie = Cookies.get('expires'); //get expiresCookie
What am I doing wrong?
The browser you use on iOs has no impact because, it's always the Safari engine. On iOs, chrome, firefox and others are just frame around the safari webview. That's for the pro tip.
Now, in your problem. Can you access to the classical cookie API ? You can do it using this :
document.cookie
If no, you have a very big problem. Maybe you've already moved to iOS 11 and be included in the no-more-cookie policy :
http://adage.com/article/digitalnext/ios-11-kill-cookie/311444/
Or maybe you have enabled an ad-block/do-not-track feature.
First, I think you have a trouble with you link to the script. If you did your first tests on android maybe your device still keep this file in your cache.
try with this url for having latest version: https://cdnjs.cloudflare.com/ajax/libs/js-cookie/latest/js.cookie.js
Then, check also that your url is not in file location (file:///.../file.html) instead of http (http://domain/file.html). Browsers doesn't save cookies when there is no domain and no http communication.

Use specific JavaScript code when on iOS and Chrome

I have two JavaScript snippets. One of them works well on all browsers except Google Chrome on iOS and the other snippet works really well for Google Chrome on iOS.
I would like to use a specific JavaScript code when a user visits my site with Google Chrome on iOS but use a different JavaScript code for every other browser.
I would suggest to use ua-parser
var parser = new UAParser();
if(parser.getBrowser().name === "Chrome" && parser.getOS().name === "iOS") {
//....
}

Any way to detect URI schema is available in windows using JavaScript in IE

I found few ways to detect where window support current URI scheme for Firefox and Chrome browser, if application not registered i will download and register those application uri
Chrome
var appWindow = window.open('alert:"Hello%20World"',"_self");
if(appWindow!=null){alert("it is worked")}
Firefox
$("body").append('<span id="__protoProxy"></span>');
function queryWord(aWord)
{
var protoProxy = document.getElementById('__protoProxy');
if (protoProxy)
{
var word = aWord.replace('"','\"');
protoProxy.innerHTML = '<div style="display:none;"><iframe id="iframe01" src="alert://'+ word + '"></iframe></div>';
}
}
queryWord('hello world');
if(document.getElementById('iframe01').contentDocument.body.innerHTML!=""){alert("it is worked")}
IE
but in IE i am unable to perform this action even though URI is not registered in windows, IE open window to select app from windows store.
Is there any way to detect in IE ?
Is there any way to detect it commonly across all browser ?
How does citrix launcher works in all browser?
This question appears to be a duplicate, however since there is a bounty I receive an error that it cannot be closed.
In any case, check out this thread and see if it works for you.
Link.

WebSocket supported in Android Stock Browser or not?

using https://github.com/einaros/ws
Server:
var WebSocketServer=require('ws').Server,wss=new WebSocketServer({port:8004});
wss.on('connection',function(s) {
s.on('message',function(_){console.log('received: '+_);});
});
Client:
var s=new WebSocket('ws://mysite.com:8004');
//android default browser dies here <---------------?
s.onopen=function(){
$('body').css({'background':'green'});
s.send('hi');
};
I have to ask why android default browser does not open the connection?
I visit www.websocket.org/echo.html on the default android browser and it says This browser supports websocket. so what is the problem?
This simple code works on iphone safari, windows chrome, android mobile chrome no problem.
On android default browser I can also console.dir(window.WebSocket); and it shows the WebSocket Object no differently than other browsers.
If someone knows why, please tell.
Thanks
UPDATE
if (!window.WebSocket && window.MozWebSocket) {
window.WebSocket = window.MozWebSocket;
alert('MozWebSocket');
}
else if (!window.WebSocket) {
alert("WebSocket not supported by this browser");
}
else{
alert('wtf!? '+window.WebSocket);
}
This gives me a console log of:
wtf!? function WebSocket(){[native code]}
The Android stock browser does not, in fact, support WebSocket.
Some work was apparently done in preparation for adding support, so the API in the browser is there, i.e. you can create a WebSocket object. It's just that this doesn't actually do anything behind the scenes.
This results in a simple feature support check, which just attempts to create the socket object, showing WebSocket support. Check the readyState for a created WebSocket object instead, and you'll see that this never changes from "0".
Starting with Android 4.4, there is no stock browser anymore. The Web view component has been switched to Chrome for Android - and this does support WebSocket.

Categories

Resources