srfrnk / ng-device-detector Goto Github PK
View Code? Open in Web Editor NEWAngular module to detect OS / Browser / Device
Home Page: http://srfrnk.github.io/ng-device-detector
License: MIT License
Angular module to detect OS / Browser / Device
Home Page: http://srfrnk.github.io/ng-device-detector
License: MIT License
Thank you for sharing this, just what I was looking for. Just an FYI you appear to not be in the bower directory.
I know that Opera from version 15 is practically a Chrome clone, so it is detected as Chrome. But I think it would be nice if it is detected as Opera and the its right version.
Getting the following error in the latest version.
Error: [$injector:modulerr] Failed to instantiate module ng.deviceDetector due to:
Error: [$injector:modulerr] Failed to instantiate module reTree due to:
Error: [$injector:nomod] Module 'reTree' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Last version that was working for me was 1.1.2.
Does the new version require including reTree myself, on top of ng-device-detector.min.js?
I am testing this lib with chrome, if the device set to BlackBerry PlayBook (screen resolution 600 * 1024).
isDesktop() return true
isMobile() return false
isTablet() return false
get any idea why is that?
and get the same result for Nokia N9
Would be great to have a similar NPM Package.
Hi , i have downloaded the
"re-tree": "0.0.2",
"ng-device-detector": "3.0.1" through package.json . They get successfully downloaded into node_modules directory .
But now when the same module is loaded included in my module as a dependency like below :
var myApp = angular.module('myApp', [ require('ng-admin'),'base64','ngCookies', 'ngStorage', 'ng.deviceDetector']);
i get below error :
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ng.deviceDetector due to:
Error: [$injector:nomod] Module 'ng.deviceDetector' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
In index.html page, the modules are also loaded properly:
<script type="text/javascript" src="vendorjs/re-tree/re-tree.js" charset="utf-8"></script>
<script type="text/javascript" src="vendorjs/ng-device-detector/ng-device-detector.js" charset="utf-8"></script>
Could you please help me here ?
There are ECMAScript 5 features used (e.g. Object's "keys" and "reduce" methods), so this module doesn't work in IE8 ;)
"Chrome" is detected correctly on iOS now, but the version is not correctly identified. The current user agent string is Mozilla/5.0 (iPhone; CPU iPhone OS 9_2 like Mac OS X) AppleWebKit/601.1 (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/13C75 Safari/601.1.46, the version returned is then 0. It should return version 47.0.2526.107.
Tested from Lumia 930.
{{deviceDetector}}
outputs:
{
"raw":{
"userAgent":"Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537",
"os":{
"windows":false,
"mac":true,
"ios":true,
"android":true,
"linux":false,
"unix":false,
"firefoxos":false,
"windows-phone":true,
"ps4":false,
"vita":false,
"unknown":false
},
"browser":{
"chrome":false,
"firefox":false,
"safari":true,
"opera":false,
"ie":true,
"ps4":false,
"vita":false,
"unknown":false
},
"device":{
"android":true,
"ipad":false,
"iphone":true,
"ipod":false,
"blackberry":false,
"firefoxos":false,
"windows-phone":true,
"ps4":false,
"vita":false,
"unknown":false
},
"os_version":{
"windows-3-11":false,
"windows-95":false,
"windows-me":false,
"windows-98":false,
"windows-ce":false,
"windows-2000":false,
"windows-xp":false,
"windows-server-2003":false,
"windows-vista":false,
"windows-7":false,
"windows-8-1":false,
"windows-8":false,
"windows-nt-4-0":false,
"unknown":false
}
},
"os":"ios",
"browser":"safari",
"device":"android",
"os_version":"unknown",
"browser_version":"0"
}
I'm going to work on a PR in a bit, on an initial glance, looks like the string like iPhone...
in raw string might be messing with the regex. (I could be completely wrong though)
User agent:
Mozilla/5.0 (X11; CrOS x86_64 4731.85.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
is from Chrome OS (the one prebundled in Chromebooks), so the operating system is detected as unknown
.
From this part CrOS x86_64
it can be extracted that the operating system is Chrome OS. The browser is as expected Chrome.
More Chrome OS user agents here: http://www.webapps-online.com/online-tools/user-agent-strings/dv/operatingsystem52026/chrome-os
Hello,
I'm trying to inject the deviceDetector in a config section like so:
angular.module('core', ['devideDetector']).config(
function (devideDetector) {
console.log(devideDetector);
}
);
But it throws me an error, can you help me?
Thanks
"Chrome" on iPad 2 is detected as "Safari"
"ng.deviceDetector" can not be found when injecting it to my application.
I have tested this on both 1.4.4 and 1.4.7.
I have not tried any other versions.
Hi,
I have problems with the isTablet() method, it doesn't detect some tablets (like my Nexus 7) like a tablet, only as a mobile.
The list of TVS User Agent
https://udger.com/resources/ua-list/device-detail?device=Smart%20TV
I've added checking IE11 Trient version, but when I bower install, previous version is downloaded.
I think you need to clear bower cache forcely or bower version up.
Could you check this issue?
When I try to install the 3.0.1 version, bower prints "mismatch Version declared in the json (2.0.4) is different than the resolved one (3.0.1)", and it installs the 2.0.4 version.
How can I install the latest version using bower?
Thanks in advance!
Although Windows 10 is not officially released there are preview builds with the new user agent:
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
and for Windows Phone:
Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; DEVICE INFO) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Mobile Safari/537.36 Edge/12.0
You can simply detect them with Windows NT 10.0
and Windows Phone 10.0
Here're more details: https://msdn.microsoft.com/en-us/library/hh869301%28v=vs.85%29.aspx
Release v1.1.4
breaks backwards compatibility because people now needs to inject re-tree.js as well.
So if people had the following in their bower.json
, suddenly it'll just break on next install:
"dependencies": {
"ng-device-detector": "~1.1.3"
}
See Semantic Versioning for more info.
IE11 has 'Trient' instead of 'MSIE' in navigator.userAgent string.
so I want to merge this PR
#20
BUT I can't fixed BROWSER_VERSIONS_RE_MAP when Brower IE Trient version.
Could you check is also?
Where is it? i can't get this module work without it...
It would be very convenient to have isMobile()
isTablet()
and isDesktop()
methods.
Hello, it will be really nice if the readme could include some example of usage, as well as some typical "result" that can be expected
and also state: which kind of browser does it detect (only the firefox/ie/chrome or also some "uncommon" ones like konqueror etc. ?)
what happens when it fails to detect etc.
Thanks, it would help a lot people to decide whether or not to use your module
HI. I just replied that PR is merged.
but I can't install re-tree module by bower install command because bower repository doesn't apply it
plz check this it~
thanks
Seems that Edge isn't detected and just returns browser-unknown. Not quite sure how we should be detecting it as the user-agent is a little bare. I don't think we need "browser-edge", since they just renamed IE and then marketed it as a brand new product... nothing changed in regards to support unless anyone can prove me wrong
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Thanks for putting this together. Pretty handy. Here's a potential improvement.
My UserAgent string is: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36"
And here's what deviceDetector finds:
browser: "chrome", browser_version: "49.0.2623.87", os: "mac", os_version: "mac-os-x-11", device: "unknown"
Really, the OS should be "OSX" and the device should be "mac", instead of having an "unknown" device.
There should be a space in-between "Mac OS", which is causing it to have a class of "os-undefined".
ie. os:{
mac:/\bMac OS\b/.test(ua),
},
instead of
os:{
mac:/\bMacOS\b/.test(ua),
},
Please update to version 1.1.1
Thanks.
It seems deviceDetector.browser_version
in Chrome + iPad always returns "0",´
Chrome 49.0.2623.73
iOS 9.2.1
Can we differ that devices somehow? In examples I've seen tablets don't have word Mobile in navigator.
This project seems active, while searching for the angular browser detection.
I don't have Windows mobile though. Found this from other angular based user agent detection: https://github.com/angular-adaptive/adaptive-detection/blob/master/src/angular-adaptive-detection.js thought will create an issue.
I want to convert to rails-assets
https://rails-assets.org/components
However bower.json is missing version, please add one.
Thanks.
I think it means tags
When I opened with ng-device-detector in chrome and list out all the things
it shows that safari value also sets true..
Would it be possible to extract the logic populating deviceInfo
into a re-usable service so that the developper is able to get information from other user agents then the one returned by $window.navigator.userAgent
?
My use case is a profile page with a list of open sessions. Each open session has a UA, but I'd like to replace it with more user friendly icons.
Example of the code I'd love:
<tr ng-repeat="(i, session) in sessions track by session.id">
<!-- ....... -->
<td><span class="device-icon" device-detector="session.userAgent" tooltip="session.userAgent"></span></td>
<!-- ....... -->
</tr>
That way I could style .device-icon.os-*
and .device-icon.browser-*
.
The last release in npm (https://www.npmjs.com/package/ng-device-detector) is 4.0.0, and on github is 4.0.2
workarround:
npm install --save https://github.com/srfrnk/ng-device-detector#v4.0.2
Hi, great module. I used in my web app and work excelent. But, i want compilate my webapp with Ionic to make an app. And i want to detect if the aplication is launcher via App o via the browser of the phone. Which variable i can used to detect this? Is possible detect this?
Firefox 5.0 on iPad Air 2 is detected as "Safari".
The raw UA is:
Mozilla/5.0 (iPad; CPU OS 9_3_4 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) FxiOS/5.0 Mobile/13G35 Safari/601.1.46
Is there any chance to detect messenger browser?
userAgent:
"userAgent":"Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13B143 [FBAN/MessengerForiOS;FBAV/48.0.0.20.47;FBBV/17291106;FBDV/iPad2,5;FBMD/iPad;FBSN/iPhone OS;FBSV/9.1;FBSS/1; FBCR/;FBID/tablet;FBLC/cs_CZ;FBOP/1]"
I create a module with ng-device-detector dependency, and prepare a unit test to verify the module. But, I observed the unit test can not start properly.
// viewModule.ts
var myApp = angular.module('viewModule', [ 'datatables', 'ng.deviceDetector', 'data-service']);
// test-case
describe('TestViewer', function (){
beforeEach(module('datatables'));
beforeEach(module('ng.deviceDetector'));
beforeEach(module('data-service));
//it-test-logic
}
As I start the unit test, it returns 'TypeError: $controller is not a function', However, when I delete ' ng.deviceDetector' dependency, the test starts normal.
var myApp = angular.module('viewModule', [ 'datatables', 'data-service']);
describe('TestViewer', function (){
beforeEach(module('datatables'));
beforeEach(module('data-service));
//it-test-logic
}
The "ng-device-detector": "4.0.3" is already included in package.json - 'devDependencies' and 'dependencies' setting.
Do you know what is the missing piece to cause this problem. Your advice is appreciated.
Many thanks.
Hi! Great module, thanks for the work so far.
Would it be possible to include "Browser Versions" and/or possibly "OS Versions"? Here is a service we currently use in angular, all be it, not as refined as yours:
'use strict';
angular.module('my-services').factory('app_services_browser',
function() {
return {
information: function() {
var unknown = '-';
var width = null;
var height = null;
// Screen
var screenSize = '';
if (window.screen.width) {
width = (window.screen.width) ? window.screen.width : '';
height = (window.screen.height) ? window.screen.height : '';
screenSize += '' + width + " x " + height;
}
// Browser
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browser = navigator.appName;
var version = '' + parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion, 10);
var nameOffset, verOffset, ix;
if ((verOffset = nAgt.indexOf('Opera')) != -1) {
browser = 'Opera';
version = nAgt.substring(verOffset + 6);
if ((verOffset = nAgt.indexOf('Version')) != -1) {
version = nAgt.substring(verOffset + 8);
}
}
else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
browser = 'Microsoft Internet Explorer';
version = nAgt.substring(verOffset + 5);
}
else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
browser = 'Chrome';
version = nAgt.substring(verOffset + 7);
}
else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
browser = 'Safari';
version = nAgt.substring(verOffset + 7);
if ((verOffset = nAgt.indexOf('Version')) != -1) {
version = nAgt.substring(verOffset + 8);
}
}
else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
browser = 'Firefox';
version = nAgt.substring(verOffset + 8);
}
else if (nAgt.indexOf('Trident/') != -1) {
browser = 'Microsoft Internet Explorer';
version = nAgt.substring(nAgt.indexOf('rv:') + 3);
}
else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
browser = nAgt.substring(nameOffset, verOffset);
version = nAgt.substring(verOffset + 1);
if (browser.toLowerCase() == browser.toUpperCase()) {
browser = navigator.appName;
}
}
// Trim the version string
if ((ix = version.indexOf(';')) != -1) {
version = version.substring(0, ix);
}
if ((ix = version.indexOf(' ')) != -1) {
version = version.substring(0, ix);
}
if ((ix = version.indexOf(')')) != -1) {
version = version.substring(0, ix);
}
majorVersion = parseInt('' + version, 10);
if (isNaN(majorVersion)) {
version = '' + parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion, 10);
}
// mobile version
var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
// cookie
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (typeof navigator.cookieEnabled == 'undefined' && !cookieEnabled) {
document.cookie = 'testcookie';
cookieEnabled = (document.cookie.indexOf('testcookie') != -1) ? true : false;
}
// system
var os = unknown;
var clientStrings = [
{s: 'Windows 3.11', r: /Win16/},
{s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/},
{s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/},
{s: 'Windows 98', r: /(Windows 98|Win98)/},
{s: 'Windows CE', r: /Windows CE/},
{s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/},
{s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/},
{s: 'Windows Server 2003', r: /Windows NT 5.2/},
{s: 'Windows Vista', r: /Windows NT 6.0/},
{s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/},
{s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/},
{s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/},
{s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/},
{s: 'Windows ME', r: /Windows ME/},
{s: 'Android', r: /Android/},
{s: 'Open BSD', r: /OpenBSD/},
{s: 'Sun OS', r: /SunOS/},
{s: 'Linux', r: /(Linux|X11)/},
{s: 'iOS', r: /(iPhone|iPad|iPod)/},
{s: 'Mac OS X', r: /Mac OS X/},
{s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/},
{s: 'QNX', r: /QNX/},
{s: 'UNIX', r: /UNIX/},
{s: 'BeOS', r: /BeOS/},
{s: 'OS/2', r: /OS\/2/},
{s: 'Search Bot', r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}
];
for (var id in clientStrings) {
var cs = clientStrings[id];
if (cs.r.test(nAgt)) {
os = cs.s;
break;
}
}
var osVersion = unknown;
if (/Windows/.test(os)) {
osVersion = /Windows (.*)/.exec(os)[1];
os = 'Windows';
}
switch (os) {
case 'Mac OS X':
var result = /Mac OS X (10[\.\_\d]+)/.exec(nAgt);
osVersion = (result !== null ? result[1] : '');
break;
case 'Android':
osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
break;
case 'iOS':
osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
break;
}
return {
screen: screenSize,
browser: browser,
browserVersion: version,
mobile: mobile,
os: os,
osVersion: osVersion,
cookies: cookieEnabled
};
}
};
}
);
The code originally came from this SO post http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript
Cheers
Ben
deviceDetector return incorrect browser for UC Browser and Opera browser, it returns Chrome.
I've tried adding device-detector
in various places include the tag. Not seeing any change in the source when I do this. Am I missing something?
Otherwise, thanks for an awesome lib!
My Pixel is showing up as a mobile phone essentially, it should be considered a desktop.
browser: "chrome"
browser_version: "46.0.2490.52"
device: "chrome-book"
isDesktop: false
isMobile: true
isTablet: true
os: "chrome-os"
os_version: "unknown"
Hi,
I needed some time to find out, that the re-tree library is actually a needed dependency for the deviceDetector to work. Without it, it does not load as a Provider.
It should be added in the readme and the package.json as a dependency.
Hi, it's me again. I implement the change, and it works fine in some cases, when i enter via app/cordova. When the Browser is Safari, the deviceBrowser show me the cordova string, but when the Browser is Chrome, show the chrome string.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.