Develop Reference

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".

is there no way to detect webview (chrome/android) with client side language?

I've figured out how to detect when my page is loaded on mobile in webview, but only for iOS with:
var standalone = window.navigator.standalone,
uerAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );
I've researched and it seems like chrome/android has to be done on the server side - do anyone know whether it is possible with JS to detect whether website is opened within webview on chrome/android? For example when your website is opened up within Facebook?

You can set a custom string as user-agent in your app's WebView.So if the user-agent is the custom string,you know that now it's in your app's WebView.
Android:
webView.getSettings().setUserAgentString("your agent");
iOS:
NSUserDefaults.standardUserDefaults().registerDefaults(["UserAgent": "your agent"])

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.

How i can make crossbrowser native-app urls with http url fallback on website?

I need to open vk.com, facebook, twitter apps when user clicks on url, in case this app is installed.
Otherwise, new tab should be opened with http url.
Are there some ready solutions for this?
I need this to work at ios, android & windows devices.

This can be done using a URL scheme. Unfortunately, different operating systems (ios, android, etc) respond to different URL schemes for their mobile apps. So, first you will have to find out what device the user is using. This can be obtained by making use of the navigator.userAgent property:
var ua = window.navigator.userAgent;
The ua variable is a string representing user information, such as, which browser they are using. So you can use String's match method to look for specific values:
var IS_IPAD = ua.match(/iPad/i) != null,
IS_IPHONE = !IS_IPAD && ((ua.match(/iPhone/i) != null) || (ua.match(/iPod/i) != null)),
IS_IOS = IS_IPAD || IS_IPHONE,
IS_ANDROID = !IS_IOS && ua.match(/android/i) != null,
IS_MOBILE = IS_IOS || IS_ANDROID;
Now that you know which device the user is using, you can use the correct URL scheme. Android uses Intents with an intent:// prefix and IOS uses the format appname://parameters. So, you can do:
if(IS_IOS){
window.location = "myapp://view?id=123";
}else if(IS_ANDROID){
window.location = 'intent://view?id=123#Intent;package=my.app.id;scheme=myapp;launchFlags=268435456;end;';
}
You may want to use a timeout for IOS (Android will bring to the Play Store if app is not installed) to see if the app loaded or not. If the app didn't load then you can set the window location to your standard URL.
This solves the problem for Android and IOS, however, it doesn't cover Windows mobile devices. Though, I'm sure it's a similar approach. I haven't found any particular libraries that abstracts and handles this code for you but it's fairly simple to implement.
Resources / Further Reading:
How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed
URL schemes for iOS and Android (2/2)

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>