JavaScript Methods Not Executing Consistently In Mobile Safari vs. Android Chrome - javascript

I have a method in JavaScript that looks as follows:
function onAction() {
getValue1();
getValue2();
getValue3();
}
When I call onAction() I see two different behaviors between Mobile Safari and Android Chrome. In Safari, I get the values for all three methods. On Android Chrome, I only get the value of the last method. It doesn't matter which one is last. I suspected it may be an execution timing issue and attempted the following:
function onAction() {
new Promise(function(resolve,reject) {
resolve(1);
})
.then(function() {
getValue1();
})
.then(function() {
getValue2();
})
.then(function() {
getValue3();
});
}
Again, it works fine in Mobile Safari, but not Android Chrome.
I'm sure I'm missing something obvious, but it's eluding me. If it matters, the getValue* functions are used to get values via each platform's mechanism for Native Code->JavaScript bridging.
Any help is appreciated. Please let me know if I can supply any more information.
Regards,
Rob
**Additional Info **
The getValueX functions don't return any values. They trigger values to be pushed over to the native wrapper:
function getReaderSDKVersion() {
var message = {'action' : MPDataEnum.SDKVersion};
raiseMessage(message);
}
function raiseMessage(message) {
if (isPlatformiOS()) {
window.webkit.messageHandlers.interOp.postMessage(message);
} else {
var url = "mpcard://runMethod#" + JSON.stringify(message);
window.location.href = url;
}
}

The issue is answered here:
Triggering shouldStartLoadWithRequest with multiple window.location.href calls
Whereas this was an issue in most browsers, it doesn't appear to affect Mobile Safari now.

Related

Chrome extension reset overridden function

The problem:
A chrome extension I am working on needs a location spoofer. It works, however I cannot 'unset' it.
What I have so far:
Let's examine the relevant code. This is a part of a content script.
let cachedGeoLocFunc = navigator.geolocation.getCurrentPosition
let geoSpoofCode = conf => `
(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition = function(success) { return success(${conf}); }
} else {
console.error('Geolocation is not supported in this browser');
}
})()
`
browser.runtime
.sendMessage({ type: 'request-spoofed-coords' })
.then(curCoords => {
//json from state, contains current spoofed locale
if (curCoords) {
let script = document.createElement('script')
script.textContent = geoSpoofCode(curCoords)
document.documentElement.appendChild(script)
script.remove()
} else {
//revert to default behavior
let unSetScript = document.createElement('script')
unSetScript.textContent = `
(function() {
navigator.geolocation.getCurrentPosition = ${cachedGeoLocFunc};
})()`
document.documentElement.appendChild(unSetScript)
unSetScript.remove()
}
})
As you can see, I am overriding the chrome native function and providing my own value. This works fine for spoofing a location.
Unexpected behaviour:
Conceptually I imagined this would work. I am caching the native chrome function so I can later reset it (see the else). In practice I get this error when this content script gets injected into a page.
Uncaught SyntaxError: Unexpected identifier
And it breaks here (as per the chrome inspector)
Screen shot of error
My questions!
So, it just injects [ native code ] instead of the actual function (at-least that is what it looks like).
Does anyone know how I can un-override this function. Is there an elegant way to do this?
How does caching in chrome work, is there ever a way to view this native code
Anyways help would be appreciated. Hope you all have a great day!
Ok, this was a misunderstanding as #wOxxOm pointed out. Please refer to their response. Content scripts do not affect or truly 'override' api functions.

Certain $http request not working on iOS Emulators or Devices (but fine on everything else)

hope you are well.
I am currently trying to call an API we have designed on a C# WebAPI which will call successfully on devices. However, on occasion, it will not call on the iOS Platform. This is how I have the calling of the API setup:
$scope.RunNews = function() {
console.log("Testing 123. I don't know!")
var app_url_news = APP_URL.getUrl() + '/api/news/getallnewsinfo';
$http.get(app_url_news).success(function(data) {
console.log("Successful Transfer. Data Below")
console.log(data);
angular.forEach(data.data, function(obj) {
console.log(obj);
if (obj.videoUrl) {
if (Validators.isValidYoutubeUrl(obj.videoUrl)) {
var youtubeVideoId = obj.videoUrl.split('v=')[1].split('&')[0];
obj.videoUrl = 'http://www.youtube.com/embed/' + youtubeVideoId + '?html5=1&rel=0&hl=en_US&version=3';
}
obj.isVideo = true;
} else {
obj.imagePath = APP_URL.getUrl() + '/NewsImages/files/' + obj.imagePath;
obj.isVideo = MediaType.isVideo(obj.imagePath);
}
});
$scope.newsList = data.data;
$ionicLoading.hide();
});
}
}
Currently, this function calls on the ionic serve web browsing emulator and android devices... HOWEVER, on iOS, the $http is never called. I have noticed that this is apparent for multiple $http calls but for others, they work fine.
I'm here to ask if anyone has experienced this issue and has a fix for it? I believe it may have something to do with permissions but I cannot seem to find anything in my project.
I had a similar problem. GET requests couldn't be made on iOS devices but were working in the browser. I fixed the issue by installing cordova-plugin-whitelist. To use it, you must have Cordova version 4.0 or greater.
If the problem persists, you should debug the app for any logs in console and check the request's response and request headers. These will help you pin down what the problem is.

Meteor method not working properly in mozilla

I am trying to make a call to a meteor method, to insert a document before redirecting the user to the relevant url (using the generated document _id).
The code currently works on chromium but not on firefox, where on firefox it appears to just get redirected right away without actually inserting anything.
I've attached my code at the bottom. Can anyone tell me what went wrong and what can I do to fix it? Why will chrome and firefox behave differently in this situation?
Any help provided is greatly appreciated!
client.js
newDoc(){
Meteor.call('addDoc',{
// some parameters
})
}
clientandserver.js (Meteor method)
'addDoc'(obj){
console.log(obj); // does not output anything on firefox
DocumentData.insert({
//some parameters
},function(err,documentID){
if (Meteor.isClient){
window.location = '/docs/' + documentID;
// redirection happens before insertion on firefox
}
});
}
Bring window.location to the client side. Like:
newDoc(){
Meteor.call('addDoc', data, function(error, result){
if(result){
window.location = '/docs/' + documentID;
}
})
}
And put only the insertion in server side, like:
'addDoc'(obj){
return DocumentData.insert({
//some parameters
});
}
I've used this structure and it works for me in both Firefox & Chrome.

HTML5 Notification not working in Mobile Chrome

I'm using the HTML5 notification API to notify the user in Chrome or Firefox. On desktop browsers, it works. However in Chrome 42 for Android, the permission is requested but the notification itself is not displayed.
The request code, works on all devices:
if ('Notification' in window) {
Notification.requestPermission();
}
The sending code, works on desktop browser but not on mobile:
if ('Notification' in window) {
new Notification('Notify you');
}
Try the following:
navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('Notification with ServiceWorker');
});
}
});
That is, use ServiceWorkerRegistration»showNotification() not new Notification().
That should work on Android both in Chrome and in Firefox — and on iOS in Safari, too.
(The sw.js file can just be a zero-byte file.)
One caveat is that you must run it from a secure origin (an https URL, not an http URL).
See https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration/showNotification.
If you already have a service worker registered, use this:
navigator.serviceWorker.getRegistrations().then(function(registrations) {
registrations[0].showNotification(title, options);
});
Running this code:
if ('Notification' in window) {
Notification.requestPermission();
}
Console in Chrome DevTools shows this error:
Uncaught TypeError: Failed to construct ‘Notification’: Illegal
constructor. Use ServiceWorkerRegistration.showNotification() instead
A better approach might be:
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this \*before\* calling
Notification.requestPermission(), otherwise this feature detect would bug the
user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
Function Source: HTML5Rocks
I had no trouble with the Notification API on Windows Desktop. It even worked without issues on Mobile FF. I found documentation that seemed to indicate Chrome for Android was supported too, but it didn't work for me. I really wanted to prove the API could work for me on my current (2019) version of Chrome (70) for Android. After much investigation, I can easily see why many people have had mixed results. The answer above simply didn't work for me when I pasted it into a barebones page, but I discovered why. According to the Chrome debugger, the Notification API is only allowed in response to a user gesture. That means that you can't simply invoke the notification when the document loads. Rather, you have to invoke the code in response to user interactivity like a click.
So, here is a barebones and complete solution proving that you can get notifications to work on current (2019) Chrome for Android (Note: I used jQuery simply for brevity):
<html>
<head>
<script type="text/javascript" src="libs/jquery/jquery-1.12.4.min.js"></script>
<script>
$( function()
{
navigator.serviceWorker.register('sw.js');
$( "#mynotify" ).click( function()
{
Notification.requestPermission().then( function( permission )
{
if ( permission != "granted" )
{
alert( "Notification failed!" );
return;
}
navigator.serviceWorker.ready.then( function( registration )
{
registration.showNotification( "Hello world", { body:"Here is the body!" } );
} );
} );
} );
} );
</script>
</head>
<body>
<input id="mynotify" type="button" value="Trigger Notification" />
</body>
</html>
In summary, the important things to know about notifications on current (2019) Chrome for Android:
Must be using HTTPS
Must use Notification API in response to user interactivity
Must use Notification API to request permission for notifications
Must use ServiceWorker API to trigger the actual notification
new Notification('your arguments'); This way of creating notification is only supported on desktop browsers, not on mobile browsers. According to the link below. (scroll down to the compatibility part)
https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
For mobile browsers below is the way you create a notification (this also works on desktop browsers)
navigator.serviceWorker.ready.then( reg => { reg.showNotification("your arguments goes here")});
Tested on browsers using webkit engine.
For more information please visit below links:
https://developers.google.com/web/updates/2015/05/notifying-you-of-changes-to-notifications
https://developers.google.com/web/fundamentals/push-notifications/display-a-notification

Disable JavaScript Alerts GeckoFX C#

I'm trying to disable JavaScript alert in GeckoFX-33 + xulrunner 33 ( winforms c# ) but I can't find a solution. I check the example codes, source code but I just can't find something that blocks the alert out. I searched in about:config as well without success.
Anybody knows where I could find a reference at last ?
In prior versions, you could do
webBrowser.JavascriptError += (sender, error) => {
// do something
}
However according to issue 7 on geckofx 33, there's some work that needs to be done to support the new debugging interface:
the geckofx service jsdIDebuggerService was removed from firefox 33. the JavascriptError event implementation used this service. So the JavascriptError event handler needs to be reimplemented using firefox new debugging interface.
geckoWebBrowser1.JavascriptError += (sender, error) =>
{
GeckoWebBrowser browser = geckoWebBrowser1;
string text = "window.alert = function(){};";
using (AutoJSContext context = new AutoJSContext(browser.Window.JSContext))
{
string result;
//toolStripLabel1.Text = "was is loaded?";
context.EvaluateScript(text, (nsISupports)browser.Window.DomWindow, out result);
}
};
Here is the final code for Gecko 29.

Categories

Resources