26

I have done some research on SO but the similar Q&A are for detecting if it has connection or not, but not about connection type.

The purpose of my website is that, if a user is on mobile(phone or tablet) and on wifi, play a video clip; if a user is on mobile and not on wifi, play a video clip; if a user is not on mobile, then play the video clip.

The reason for the different behavior is to avoid possible surcharges happen to the user due to the relatively larger size of the video clip. That is not related to speed - nowadays speed difference of LTE v.s. wifi maybe only little; it is more for the concern of users getting charged for the data usage without wifi connection.

So my question is, using AngularJS(<2.0), 1) How to detect the device is desktop or mobile 2) How to detect the device is connected to wifi or not

(I guess for Q1, the fallback is to use Bootstrap @media, but it isn't ideal.)

Kurt Kriegler
  • 35
  • 1
  • 6
jamesdeath123
  • 4,268
  • 11
  • 52
  • 93
  • Correlating mobile network connections with metered ones is a mistake. I've had unlimited 4G contracts on my mobile, and know people with metered FTTC connections. – Quentin Jan 02 '17 at 20:54
  • @Quentin it may be true for some use case but for a more general situation, data usage may cause unexpected charges to the user if they connect without wifi. – jamesdeath123 Jan 03 '17 at 02:11
  • No, the general situation is that it might cause charges if they connect with WiFi or 3G or 4G or whatever and it might *not* cause charges if they connect with WiFi or 3G or 4G or whatever. – Quentin Jan 03 '17 at 06:59
  • @Quentin research of our users shows that most of them are in the former case. – jamesdeath123 Jan 03 '17 at 20:32

3 Answers3

35

You don't need Angular to do such check.

In order to detect if a device is a desktop or a mobile, use navigator.userAgent, see this answer

In order to detect the connection type, use navigator.connection, see this answer
Be careful, this API support is not universal, see here.
Another way to do it is to try this plugin, which relies on internet speed check, but I have never used it.
Finally, if you REALLY need this info for smartphone users, convert your website on Cordova, then distribute your app.

Community
  • 1
  • 1
Jacques Cornat
  • 1,612
  • 1
  • 19
  • 34
  • mobile device detection via user agent is not always reliable, as user agents can be modified or spoofed. – stax Aug 30 '23 at 13:27
29

With respect to finding out whether what device is used, this angular plugin can save some headaches:ngx-device-detector

install it: $ npm install ngx-device-detector --save, add to the constructor. Then call this.deviceService.IsMobile() forexample to check if device type is mobile. It has other methods for checking if device is tablet or desktop and other methods that return usefull information about the browser.

JustLearning
  • 3,164
  • 3
  • 35
  • 52
3

i encourage devs to use feature detection, not browser or desktop/mobile detection. e.g modernizr has a feature detection for low-bandwidth connections, though it won't work in all browsers: https://modernizr.com/download#lowbandwidth-setclasses&q=connect

the danger, as it states, is that unknown devices are assumed to be fast.

to get a sense of desktop vs mobile, there's a technique for listening to touch events. c.f.: What's the best way to detect a 'touch screen' device using JavaScript?

regarding whether you should autoplay a video clip, if it's an HTML5 player, it won't autoplay on mobile anyway, for the reasons you mention, unless it's tied to a touch event (like hitting play).

i have gotten around this by "saving off" a touch event from earlier, like getting to the screen with the video player, and then re-using that event to autoplay. all that said, please consider if auto-play is truly what you want, as a lot of users find it annoying.

Community
  • 1
  • 1
zim
  • 2,386
  • 2
  • 14
  • 13