I am working on PWA and need to figure out whether the user is accessing through IOS or Android or Desktop.
This is to be done as according to the user we will be showing the particular URL to the user.
So, how can we figure out this?
You could check and parse the User-Agent HTTP header?
It feels quite the normal thing to do according to the title of your question.
Basically User Agent doesn't allow you to be 100% sure that user uses exactly that browser, but for 90% of cases it works pretty well.
I'd suggest you to consider using a library like sniff-fns or any other similar, so there covered most of the cases
Related
I have website link at which I have designed a html/javascript web app. I used iOS and Android app to create an app that encapsulates the web app.
Is there a way to block access to the website link and only allow access to the website link only thru the native apps calling the link.
In short safari, IE, Chrome must not be able to access the link, but the iPhone & Android app should be able to access it.
Is there some way to tell that the app is accessing the site and not the phone or pc browsers.
I am sure there a number of ways to implement this.
Thanks,
It depends on how is the web app implemented. Since native Web Views are pretty much the wrapper for the standard browser (Safari/Chrome), you will find it tough to filter it based on that.
What you can do, however, is to add an extra GET variable (for ex. &ref=youruniquecodehere) or a custom User-Agent, based on which you will be able to identify, whether your application authorized the request (with a proper access code) or if it's a generic request using browser.
However, both of these options can still be bypassed if researched, although it'd require slightly more time. Not sure whether a solution that would work in 100% of cases exists.
Hope that helps, please correct me if I'm wrong.
I spent a lot of time to search for solution but without result.
I check this topics :
Website Bookmark/ Shortcut Icon for Android Help. Cant get passed standard ribbon icon
Whick is very nice ,but here user must click on bookmark.That`s not what i need. May be button,or automatic script that prompt user for this and created automaticaly.For example something like this :
http://socialmedia.biz/2012/02/21/encourage-visitors-to-save-your-site-as-a-mobile-shortcut/
But it`s work only on Apple devices .. What im looking for is a similar solution for android.
Is this possible at all?
May be the only solution is to create simple app that act like a shortcut to my web page?
The page that is talking about has a mobile version ..
Have you looked here [for Chrome]? https://developers.google.com/chrome/mobile/docs/installtohomescreen
May be the only solution is to create simple app that act like a shortcut to my web page? The page that is talking about has a mobile version ..
If this is "allowed" and doesn't go against too many guidelines, this might be your only option. Basically you'd want to create a one Activity application and all it does is call the default Intent for your web page. This should push the user into the default Browser.
You could put the app in the Google Play store and link to it from the site or a script. I'd call the app something like "SITE_NAME Web Shortcut" and make it clear in the description that the only purpose is to launch the browser -- as previously mentioned this doesnt "feel" like something that should be in an app store, and if users think they're getting something extra you'll definitely get bad reviews.
(I'd also make the Activity with #style/Theme.Transparent)
Please be aware that Chrome has changed the way that installs web apps.
Here are the details: https://developers.google.com/web/updates/2018/06/a2hs-updates
There is an install criteria now:
The web app is not already installed
Meets a user engagement heuristic
Be served over HTTPS
Includes a Web App Manifest that includes:
short_name or name
icons - must include a 192px and a 512px icon
start_url
display - must be one of fullscreen, standalone, or minimal-ui
prefer_related_applications must not be present, or be false
-Registers a service worker with a fetch handler
We have developed an ASP.NET MVC 4/Web API single page, mobile website (also using jQuery Mobile) that is intended to be accessed only from mobile devices (e.g., iPads, iPhones, Android tables and phones, etc.), not desktop browsers. This mobile website will be hosted internally, like an intranet site. However, since we’re accessing it from mobile devices, we can’t use Windows authentication. We still need to know which user (and their role) is logging in to the mobile website app.
We tried simply using ASP.NET’s forms authentication and membership provider, but couldn’t get it working exactly the way we wanted. What we need is for the user to be prompted for a user name and password only on the first time they access the site on their mobile device. After they enter a correct user name and password and have been authenticated once, each subsequent time they access the site they should just go right in. They shouldn’t have to re-enter their credentials (i.e., something needs to be saved locally to each device to identify the user after the first time).
This is where we had troubles. Everything worked as expected the first time. That is, the user was prompted to enter a user name and password, and, after doing that, was authenticated and allowed into the site. The problem is every time after the browser was closed on the mobile device, the device and user were not know and the user had to re-enter user name and password.
We tried lots of things too. We tried setting persistent cookies in JavaScript. No good. The cookies weren’t there to be read the second time. We tried manually setting persistent cookies from ASP.NET. No good. We, of course, used FormsAuthentication.SetAuthCookie(model.UserName, true); as part of the form authentication framework. No good. We tried using HTML5 local storage. No good. No matter what we tried, if the user was on a mobile device, they would have to log in every single time. (Note: we’ve tried on an iPad and iPhone running both iOS 5.1 and 6.0, with Safari configure to allow cookies, and we’ve tried on Android 2.3.4.)
Is there some trick to getting a scenario like this working?
Or, do we have to write some sort of custom authentication mechanism? If so, how? And, what?
Or, should we use something like claims-based authentication and WIF?
Or???
Any help is appreciated.
Thanks!
try adding .browser file as discussed here:
http://www.simonantony.net/knowledge-base/articles/browsing-your-site-on-an-iphone-using-chrome-does-not-work/
I know it says chrome, but i've accountered this problem with safari also.
I plan to have a completely separate layout/design for a desktop Vs tablet user. My app is based on Java.
My questions are;
1. What is the best approach to detect whether the request is coming from desktop or tablet (iPad/Xoom, etc)
2. Can this be handled at server-side and not through JS user-agent string?
A live example of redirect is if one tries to access Yahoo. i.e. if the request comes from a desktop browser, we’ll be redirected to www.yahoo.com , while if the request comes from a tablet device like iPad, we’ll be redirected to www.yahoo.com/tablet
I am planning something along the Yahoo example. Not sure how they have implemented it.
I know some of you might be thinking that I should just control 2 separate CSS like desktop.css and tablet.css and detect through CSS media query OR JS user-agent. But the point is the layout/design is so different between the 2 that I just cannot control only via CSS and that is the reason, I plan to have a separate tablet version of my web app and do the redirection.
Please let me know as much suggestions that you can.
Thanks in advance for your help on this.
You have to check for the user-agent string within your HTTP request. Based on that you will be able to identify the device -- provided that the user has not altered the user-agent string sent from the device browser.
I've had to deal with pretty much the same issue, having to differantiate between Desktop or Not-Desktop. I went with a client-side detection using JavaScript. I'm using RequireJS in my solution, and here's my module:
define(function(){
var isTouchDevice = function() { return window.screenX === 0 && 'ontouchstart' in window || 'onmsgesturechange' in window; };
var isDesktop = !isTouchDevice() ? true : false;
return isDesktop;
});
I've added the variable isDesktop for readability.
I want to check whether the user is viewing my site from a mobile device or PC. If it's a mobile device, I want to redirect my site URL like Google does...
If possible I would like to implement this in JavaScript. How can I do this?
You typically use the User-Agent header to detect the browser.
Here's JavaScript code that does basically that (only for mainstream browsers though, you'd have to add the Mobile User-Agents)
http://www.quirksmode.org/js/detect.html
And here's a list of mobile browser identifiers
http://www.zytrax.com/tech/web/mobile_ids.html
The list is not complete and will never be, given the rate new mobiles appear on the market, but what I did back when I did it is to store all received user agents in a database, and then look for them to classify them as mobile and which brand/model.
What you can't rely on though is JavaScript, it's better done in server code (not all mobile browsers execute JavaScript).
There is a related question here on SO but I couldn't find it.
See this existing question.
You will have better luck doing this server side, as many mobile browsers don't even support JavaScript. Basically you want to check the user agent and compare to a list of known mobile browsers.
Here is a simple answer for this query. This won't detect the mobile browser, but it redirects the page to our mobile.html page, through the following script;
Find out the browser window size and redirect it..
winWidth=document.all?document.body.clientwidth:window.innderwidth;
if (winwidth<800)
{
window.location.replace("mobile.html");
}