Develop Reference

Javascript Not Working on Android Default Browser

I am working on a web site that is served via a Mikrotik Router.
It's a site to provision internet for users up to 100m away.
When you connect to our Wifi, a sign in page is supposed to pop up where you enter your credentials to authenticate and use our internet.
For some weird reasons whenever the user tries to sign in, for android users the Android OS keeps on presenting their default browser to sign in on the Network. Unfortunately, it appears that the Javascript is not running on the native default Browser that popped.
I am not using any ES6+ features so I'm currently lost at what could be wrong.
When I previewed the Site on Google Chrome/Opera Mini and Phoenix Browser, the javascript is working very well.
I added this tag before the closing tag of my head element:
<noscript>
<div>
We're sorry but our site <strong>requires</strong> JavaScript to work.We recommend you use Google Chrome.
</div>
</noscript>
to be displayed if Javascript is disabled, but it is not even displaying.
I tried inspecting with Google Chrome devices inspection but it seems Google Chrome devices inspection only works with Google Chrome Mobile Browser(I might be wrong).
Any insight to fix this would be really appreciated.
Thank you.

I think you need to set setDomStorageEnabled(true)
for the webview settings.
You can read more about webview here:
http://tutorials.jenkov.com/android/android-web-apps-using-android-webview.html

Unable to login to web app when using VSCode Chrome Debugger

When I start a debugging session on VSCode, it opens a new Chrome window and loads my web app. My web app requires the user to sign-in via Google to use.
When I try to sign in, I get an error saying "This browser or app may not be secure". There is no option that allows me to bypass this and sign in. Does anyone know a way around this?

There is a Bug filed with Chrome Team.
https://bugs.chromium.org/p/chromium/issues/detail?id=1173641
Also here's the issue on github of VS Code
https://github.com/microsoft/vscode-js-debug/issues/918
As of now (9th Jan 2022), the only solution is to use other browser or use different way of Debugging.

Logged into the correct google account turning on "Less secure app access" on https://myaccount.google.com/security should work
From google support: https://support.google.com/accounts/thread/22873505?msgid=24501976

Making an iframe inherit cookies from the parent in Safari

My web app extends a Google Form's functionality by loading it as an iframe, and doing other stuff outside the iframe. If the Google Form requires authentication, Google makes a "Sign In" box appears within the iframe. When a user clicks on the button, a new tab opens, and the user is re-directed to the form in the new tab.
If a user navigates away from my web app, the extra functionality will obviously not work. So, what I am looking for is: to have an authenticated Google Form load as an iframe within my web app.
I can make the user first sign in via Google Sign-In (OAuth) on my web app and then load the iframe. On Chrome and Firefox, the iframe automatically starts with a logged-in session. This is great! But, this solution doesn't work on Safari. Is this related to Safari blocking third-party cookies?
If I want this functionality to work within Safari (and other such browsers), how would I go about doing it? Will I have to use the Storage Access API? If yes, can you broadly tell me how to do it?
For now, I could just ask users to download Firefox/Chrome if they want to use my web app. Most of my users are Chrome users anyway. But, is implementing these privacy measures a part of other browsers' roadmap too? If yes, I may as well try and build a solution that will work in a year or two.

I expect so.
This needs to happen in the iFrame, so Google rather than you need to implement it.
Yes, but not until 2022, so I would hope Google forms will support this by then.

Should javascript geolocation prompt user to turn on location services?

I am using the geolocation functionality to track user's locations with javascript. More specifically, I am using navigator.geolocation.watchPosition. My site works fine. When I visit my site on my Android device it prompts if I would like to allow the site to track my location. I tap allow (as well as remember my preference).
After success with that I turned off location services on my phone and went back to the site. It didn't prompt me for permission again (since I told it to remember my preference last time but it didn't prompt me to turn on my location services either. Needless to say at that point my site never got any geolocation data from the browser.
My question: Is there some way to prompt the user to turn on their location services programatically? If I had not saved my security preference and it prompted me to allow again would it have turned on or asked me to turn on location services? I would hate to have to tell the user they need to go into their cell phone's preferences to enable it.

It's browser specific or to be more exact - application specific. What you could do is wait e.g. half a minute or a minute for the location and if it is not available show a warning to the user.

ASP.NET MVC 4/Web API Single Page App for Mobile Devices ... Needs Authentication

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.