Menu
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.)
525
If in Angular 1 you can use the $window object. That object is gone in Angular 2, however, but there is also ng-device-detector which works on Angular 2 and does a decent job at getting device, OS, and browser info. I would just use pure JS or third party library specifically made for this function.
Mobile Angular UI is an open-source framework for developing hybrid mobile apps. Mobile Angular UI makes use of Twitter Bootstrap and AngularJS that helps to create attractive HTML5 hybrid mobile and desktop apps.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.
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.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
