UWP App crash on phone lock while playing video - javascript

It is JavaScript based UWP application. Application is listening to checkpoint/resume event as described on MSDN samples. On checkpoint I'm saving state of the application like history.
How can I prevent application from crashing? What would be the exact sequence of events that occur when phone is locked.
on checkpoint:
app.oncheckpoint = function (args) {
try {
args.setPromise(Ax.Utils.delay(1000).then(function (r) {
WinJS.Application.sessionState.history = {}; //json string
return true;
}));
} catch (e) {
}
};
Debugging from Visual studio using Lifecycle state works well.

Wish to add answer to my own question.
Application was crashing due to google ads object included in the stream was not well formed that was causing the app to crash. Such as ads array was not handled correctly during checkpoint.

Related

Why is my React app constantly disconnecting and crashing

I am building a React App, initialized with create-react-app.
The strangest thing is happening, on a regular basis, it stops running, and in the sources tab of the chrome developer tools I get this being highlighted:
function handleDisconnect() {
backendDisconnected = true;
window.removeEventListener('message', handleMessageFromPage);
window.postMessage({
source: 'react-devtools-content-script',
payload: {
type: 'event',
event: 'shutdown'
}
}, '*');
} // proxy from the main page to devtools (via the background page)
I have no idea why this is happening. It's never happened in any React apps I have built over the last few years.
My PC is pretty old and slow to the point of struggling sometimes. I am wondering if perhaps the app running on this local environment is just cutting out, as it were. Otherwise, I would have no clue where to start. If it is any help, I am running Video.js inside this app.
I would be very grateful for any pointers.

Fails to open native app with javascript, but same code works when initialized through button

This questions concernes a web app build in React that will be accessed with smartphones through their browsers. I use iPhone with both Safari and Chrome for testing.
One step involves opening a native authentication app.
According to the docs of the native app, it can be open from the browser by doing this:
const openAuthApp = () =>
(window.location = "https://app.bankid.com/?autostarttoken=&redirect=");
This works fine if I call the function when clicking a button, like this:
<button onClick={openAuthApp}>Open</button>
The above code triggers the opening of the authentication app immediately when clicking the button.
But when I trigger the function immediately after page has loaded, without using a button, like this
useEffect(() => {
openAuthApp();
}, []);
I get an error in the browser saying that the app was not found on this device.
Idk much about how browsers work but my first guess was that it takes some time for the browser to acquire information about all installed apps, so I added a timeout before executing the method:
useEffect(() => {
setTimeout(openAuthApp, 5000);
}, []);
It still failed. It works if I press the button less than 5 seconds after page load, so the time of initiation after page load shouldn't be the factor here.
I don't know how to proceed with this, and would appreciate ideas on how to move forward.
I suspect that your problem is a missing user gesture, which is common when using Claimed HTTPS Schemes - eg see this Chrome browser requirement.
There is a similar problem when using OAuth flows and the AppAuth pattern with HTTPS redirect URIs, which occurs for both iOS and Android. See the sections titled Problems Receiving Redirect Responses in my iOS and Android blog posts.
The solution for my mobile samples was to add an interstitial web page and if you do a view source you will see that it has an onclick handler that invokes a deep link after the user gesture:
document.getElementById('continueButton').onclick = () => {
const redirectUri = 'https://mobile.authsamples.com/basicmobileapp/oauth/callback';
window.location.href = redirectUri;
};
You won't need to go to these lengths of course, but I think you will need a user gesture to invoke the BankID app and do an external login reliably. In some ways this is a reasonable UX also, since you are keeping the user informed before you switch apps, rather than doing so abruptly. I would put a positive spin on it like this:
You will now be redirected to the BankID app to perform strong authentication and to provide consent. Please click Next to proceed.
Option 1:
Use window.location.href instead of window.location
const openAuthApp = () =>
(window.location.href = "https://app.bankid.com/?autostarttoken=&redirect=");
If your web app have the same domain as bankid.com use window.location.assign instead.
const openAuthApp = () =>
(window.location.assign= "https://app.bankid.com/?autostarttoken=&redirect=");
Option 2:
this will take 5 minutes, use branch.io for links (you do not need to install the SDK)
signup create new app, write the name of the app
got to "Configuration" from left menu select "I have an Android App"
add the link for your app and select it then fill other options if you like
it will give you a link "https://[YOUR_APP_ID ].app.link"
use this link instead of the default link
This should work without problem

Android React Native app crashes on getUserMedia WebRTC call

I have been debugging this for days now and no longer have many options, hence the long shot question - I'm using the ConnectyCube WebRTC video calling package for React Native. I have also tried using the react-native-webrtc package to stream video from my Android device.
When using both packages my app crashes without any logs or errors when I call the getUserMedia method. I have to build the app again to use it.
Here is a previous post of mine that describes earlier problems I was having - however if you download and build ConnectyCubes app from the above link, their app works - I can't figure out why mine doesn't.
So my question is, is is there anything I should be checking for relating to the getUserMedia call in React Native that might be stopping it working?
I'm using:
RN v0.59.9
gradle wrapper 5.4.1
classpath(“com.android.tools.build:gradle:3.4.1”)
buildToolsVersion = “28.0.3”
compileSdkVersion = 28
I have reached out to support but have no fix yet.
Strangely, I'm unable to log the session parameter at certain points in the function. Thanks in advance.
const getUserMedia = session => {
console.log(session); // logs here
return new Promise((resolve, reject) => {
console.log(session); // but not here
session.getUserMedia({
audio: true,
video: { facingMode: 'user' }
}, function (error, stream) {
console.log(error, stream) // or here
error ? reject(error) : resolve(stream);
});
});
}
Update
The issue with the function above might be that for some reason the crash happens before the console can print anything out.
This was fixed by deleting the gradle cache and running npm i as described here:
How to clear gradle cache?

How can I allow JavaScript to run in the background, in Firefox? [duplicate]

In app I can use http://developer.android.com/reference/android/os/PowerManager.WakeLock.html
but is there a way to keep webpage running and prevent from going to sleep?
It would be nice if it runs at least on android.
You can use: https://github.com/richtr/NoSleep.js
Prevent display sleep and enable wake lock in any Android or iOS web browser.
Note that the library has some reliability/performance issues on some platforms/browsers. Users have found solutions that are listed in the issue comments and pull requests, but they have not been added since the repo owner appears not to be active currently.
It's recommended that you check those pull requests (and/or issues) for potential improvements before using in production.
You can use the Wake Lock web API (check support)
https://web.dev/wakelock/
In an app there are a couple of ways you can do it, but I guess you mean just in a mobile web page, viewed in any browser via Android. With normal HTML/Javascript/etc., I really, really doubt it.
It actually may be possible using Flash (on flash-enabled phones with plugins enabled), though, at least in specific circumstances. I say this because, in a test app without the WAKE_LOCK permission, loading this swf file into a WebView caused the following exception on some devices:
java.lang.SecurityException: Neither
user ##### nor current process has
android.permission.WAKE_LOCK
Even if this did work, however, it would run the risk of crashing apps or browsers that did not have the WAKE_LOCK permission. It may be possible due to bad code in the Adobe Flash Player plugin, rather than any intentional functionality.
Play fake looped VIDEO or AUDIO on your page
You can use this a quick example to add a looped video with fake data to your page and prevent mobile device from sleep:
// Create the root video element
var video = document.createElement('video');
video.setAttribute('loop', '');
// Add some styles if needed
video.setAttribute('style', 'position: fixed;');
// A helper to add sources to video
function addSourceToVideo(element, type, dataURI) {
var source = document.createElement('source');
source.src = dataURI;
source.type = 'video/' + type;
element.appendChild(source);
}
// A helper to concat base64
var base64 = function(mimeType, base64) {
return 'data:' + mimeType + ';base64,' + base64;
};
// Add Fake sourced
addSourceToVideo(video,'webm', base64('video/webm', 'GkXfo0AgQoaBAUL3gQFC8oEEQvOBCEKCQAR3ZWJtQoeBAkKFgQIYU4BnQI0VSalmQCgq17FAAw9CQE2AQAZ3aGFtbXlXQUAGd2hhbW15RIlACECPQAAAAAAAFlSua0AxrkAu14EBY8WBAZyBACK1nEADdW5khkAFVl9WUDglhohAA1ZQOIOBAeBABrCBCLqBCB9DtnVAIueBAKNAHIEAAIAwAQCdASoIAAgAAUAmJaQAA3AA/vz0AAA='));
addSourceToVideo(video, 'mp4', base64('video/mp4', 'AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAG21kYXQAAAGzABAHAAABthADAowdbb9/AAAC6W1vb3YAAABsbXZoZAAAAAB8JbCAfCWwgAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIVdHJhawAAAFx0a2hkAAAAD3wlsIB8JbCAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAIAAAACAAAAAABsW1kaWEAAAAgbWRoZAAAAAB8JbCAfCWwgAAAA+gAAAAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVxtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAEcc3RibAAAALhzdHNkAAAAAAAAAAEAAACobXA0dgAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAIAAgASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAAFJlc2RzAAAAAANEAAEABDwgEQAAAAADDUAAAAAABS0AAAGwAQAAAbWJEwAAAQAAAAEgAMSNiB9FAEQBFGMAAAGyTGF2YzUyLjg3LjQGAQIAAAAYc3R0cwAAAAAAAAABAAAAAQAAAAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAAEwAAAAEAAAAUc3RjbwAAAAAAAAABAAAALAAAAGB1ZHRhAAAAWG1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAAK2lsc3QAAAAjqXRvbwAAABtkYXRhAAAAAQAAAABMYXZmNTIuNzguMw=='));
// Append the video to where ever you need
document.body.appendChild(video);
// Start playing video after any user interaction.
// NOTE: Running video.play() handler without a user action may be blocked by browser.
var playFn = function() {
video.play();
document.body.removeEventListener('touchend', playFn);
};
document.body.addEventListener('touchend', playFn);
If you build a WebViewGold/WebView app on Android (while having the actual webpage/web app in such a wrapper), all these mentioned approaches here will not work. But then you can also do set
PREVENT_SLEEP = TRUE;
in Config.java which should do the trick.
On iOS devices, just refreshing the page in Javascript every few seconds will keep the screen awake. This seems to be the correct strategy, hopefully Android will adopt this in a future version.

Firebase - Is there a flag to force long polling when websockets are blocked by corporate proxy/firewall?

I'm developing a simple corporate AngularJS app and was planning on using Firebase for the backend.
The browsers I have to support are IE8 and Chrome (latest).
I have managed to fix all of the IE related quirks in the front end and can successfully retrieve data from my Firebase. As IE8 does not have support for WebSockets I assume it is using long polling. (this is fine performance-wise, the app is very simple and just pulls/updates two or three pieces of data).
Paradoxically, I am seeing the following error in Chrome repeatedly and it is failing to connect to Firebase. I am assuming this is due to the firewall/proxy of the corporate network.
WebSocket connection to 'wss://xxx.firebaseio.com/.es?v=5' failed: WebSocket is closed before the connection is established.
I have no control over the firewall/proxy, so my question is if I can force Chrome to use long polling too, using some sort of config flag when I create my Firebase reference?
I am using a mix of Angularfire and straight Firebase. The app works perfectly in IE so there does not appear to be anything wrong with my code. (Also simple test scripts encounter the same issue)
Update: The app does not work in Chrome (hence my question), so perhaps this is a bug I should raise with Firebase, but regardless a way to force long polling would (presumably) fix my issue.
you can use Firebase.INTERNAL.forceLongPolling(); to force long polling Firebase.INTERNAL.forceWebSockets(); to force web socket
I'm sure there is a better way but I just went in to firebase-debug.js and changed the following function:
fb.realtime.WebSocketConnection["isAvailable"] = function() {
var isOldAndroid = false;
if(typeof navigator !== "undefined" && navigator.userAgent) {
var oldAndroidRegex = /Android ([0-9]{0,}\.[0-9]{0,})/;
var oldAndroidMatch = navigator.userAgent.match(oldAndroidRegex);
if(oldAndroidMatch && oldAndroidMatch.length > 1) {
if(parseFloat(oldAndroidMatch[1]) < 4.4) {
isOldAndroid = true
}
}
}
return!isOldAndroid && fb.WebSocket !== null && !fb.realtime.WebSocketConnection.forceDisallow_
};
to instead read:
fb.realtime.WebSocketConnection["isAvailable"] = function() {
return false
};
This worked, Chrome now long polls automatically and my app can communicate with Firebase. I made the same change to the minified firebase.js but would obviously prefer a more future-proof workaround instead of this hack if anyone can suggest one.

Categories

Resources