I have built a sencha application using Sencha cmd.
I have integrated it to windows phone using cordova.
Now, when launching the app, after splash screen, a white screen comes and stays for ever.
I trying putting an alert in the launch function (in app.js where view is created) and found out that the launch function does not fire.
What could be the reason of this behaviour?
I found the cause of the issue that I was facing. The sencha app is using a store with SQL proxy. But since SQL proxy is not supported on Windows phone (but supported on other platforms viz. iOS, Android), so the launch function was not getting called.
I had a similar problem with a JSON proxy and I had to modify the following lines of code in cordovalib/XHRHelper.cs file.
var funk = function () {
window.__onXHRLocalCallback = function (responseCode, responseText) {
alias.status = responseCode;
if (responseCode == '200') {
alias.responseText = responseText;
try {
JSON.parse(responseText);
} catch (e) {
Object.defineProperty(alias, 'responseXML', {
get: function () {
return new DOMParser().parseFromString(this.responseText, 'text/xml');
}
});
}
Object.defineProperty(alias, 'responseJSON', {
get: function () {
return new DOMParser().parseFromString(this.responseText, 'text/json');
}
});
}else {
alias.onerror && alias.onerror(responseCode);
}
Related
I have an integration test that uses the AWS Cognito library; specifically, I'm calling CognitoUser.authenticateUser(). When I start my webpage this all works fine: however, in my tests I'm getting the following error:
Error: Native crypto module could not be used to get secure random number.
at cryptoSecureRandomInt (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/utils/cryptoSecureRandomInt.web.js:38:9)
at WordArray.random (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/utils/WordArray.js:50:56)
at randomBytes (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/AuthenticationHelper.js:47:58)
at AuthenticationHelper.generateRandomSmallA (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/AuthenticationHelper.js:113:21)
at new AuthenticationHelper (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/AuthenticationHelper.js:67:29)
at CognitoUser.authenticateUserDefaultAuth (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/CognitoUser.js:264:32)
at CognitoUser.authenticateUser (/source/project/master/website/node_modules/amazon-cognito-identity-js/lib/CognitoUser.js:237:19)
Researching for answers I came across many posts suggesting:
Object.defineProperty(global.self, 'crypto', {
value: {
getRandomValues: arr => crypto.randomBytes(arr.length),
}
});
Unfortunatley that does not work.
Looking at the crypto source:
function cryptoSecureRandomInt() {
if (crypto) {
// Use getRandomValues method (Browser)
if (typeof crypto.getRandomValues === 'function') {
try {
return crypto.getRandomValues(new Uint32Array(1))[0];
} catch (err) {}
} // Use randomBytes method (NodeJS)
if (typeof crypto.randomBytes === 'function') {
try {
return crypto.randomBytes(4).readInt32LE();
} catch (err) {}
}
}
throw new Error('Native crypto module could not be used to get secure random number.');
}
I can see where this error is being thrown. I'm guessing that under normal circumstances the crypto package is loaded by the browser which obviously doesn't exist when testing.
Any suggestions?
Update 1
Stepped through using the debugger and in the crypto source it's getting undefined for the 'crypto' variable on this line
if (crypto) {
This means that the Object.defineProperty is not working. I tried attaching it to the window but that doesn't work either
Object.defineProperty(window, 'crypto', {
value: {
getRandomValues: (arr) => crypto.randomBytes(arr.length)
}
});
I have a create-react-app that reads and writes local files using File System Access API. When run in a browser (Chrome or Edge that support it), both reading and writing files work fine.
When the app is run in Electron, reading works but writing fails due to: Uncaught (in promise) DOMException: The request is not allowed by the user agent or the platform in the current context.
I am using the latest Electron (12.0.1) which uses the same Chromium (89.0.4389.82) as the one in my Chrome browser.
Below is the relevant code. The console log after requestPermission call shows true and granted in the browser and true and denied in Electron.
I tried disabling webSecurity when creating BrowserWindow, disabling sandbox with appendSwitch but nothing helped.
Is there a way to give Chromium in Electron more permissions?
If not, I am willing to handle file writing differently when in Electron. In that case, what to write in place of TODO in the code? Note that because it is a create-react-app, the fs module is not available.
export async function chooseAndReadFile() {
const fileHandle = await window.showOpenFilePicker().then((handles) => handles[0])
const file = await fileHandle.getFile()
const contents = await file.text()
return contents
}
export async function chooseAndWriteToFile(contents: string) {
const fileHandle = await window.showSaveFilePicker()
const descriptor: FileSystemHandlePermissionDescriptor = {
writable: true,
mode: "readwrite"
}
const permissionState = await fileHandle.requestPermission(descriptor)
console.log(window.isSecureContext)
console.log(permissionState)
const writable = await fileHandle.createWritable()
await writable.write(contents)
await writable.close()
}
let isElectron = require("is-electron")
export async function chooseAndWriteToFileUniversal(contents: string) {
if (isElectron()) {
// TODO: Do what???
} else {
chooseAndWriteToFile(contents)
}
}
Answering my own question, I finally used a solution with HTML download attribute, nicely described here. When this technique is used in Electron, it presents a file save dialog which is exactly what I want. When used in a browser, this technique just downloads the file without a prompt, so I will continue using File System Access API for browser environments.
Here is the code that handles downloading when running in Electron.
function download(filename: string, contents: string) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(contents));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
let isElectron = require("is-electron");
export async function chooseAndWriteToFileUniversal(contents: string) {
if (isElectron()) {
download("data.txt", contents)
} else {
chooseAndWriteToFile(contents) // See the original question for implementation of this function
}
}
Still, would be nice to know why/how is Chromium in Electron more restricted than in a normal Chrome or Edge browser, and if it can be changed.
I have a web page with following event:
const onDeleteBankData = async (bankData) => {
if (!window.confirm('Are you sure you wish to delete this item?')) {
return;
}
}
I tested it in Chrome and on an Android device and it works. However on iPhone this does not work. Is this expected behavior? Is it a browser thing, or something I need to setup in REACT?
I have a problem with Device Orientation, Ionic and Cordova/ngCordova
I've already run the command:
"cordova plugin add cordova-plugin-device-orientation"
to install the device orientation plugin
It installed without problem.
Then I add the following code to my app:
.controller('MyCtrl', function ($scope,$cordovaDeviceOrientation) {
$cordovaDeviceOrientation.getCurrentHeading().then(function(result) {
var magneticHeading = result.magneticHeading;
var trueHeading = result.trueHeading;
var accuracy = result.headingAccuracy;
var timeStamp = result.timestamp;
$scope.values=magneticHeading+" "+trueHeading+" "+accuracy+" "+timeStamp;
}, function(err) {
// An error occurred
});
})
After executing cordova run android I got this error.
Cannot read property 'getCurrentHeading' of undefined.
I tested this code on the browser, Genymotion or Samsung Galaxy Tab 4, but always I got the same error.
What am I doing wrong?
There's two things you need to know:
First: This kind of plugin, like device orientation, need to be tested in real devices once it use a accelerometer hardware to work.
Second: You need to use the DeviceReady EventListner to use the plugins, so, you need to do something like this:
document.addEventListener("deviceready", function () {
$cordovaDeviceOrientation.getCurrentHeading().then(function(result) {
var magneticHeading = result.magneticHeading;
var trueHeading = result.trueHeading;
var accuracy = result.headingAccuracy;
var timeStamp = result.timestamp;
$scope.values=magneticHeading+" "+trueHeading+" "+accuracy+" "+timeStamp;
}, function(err) {
// An error occurred
});
}, false);
If you want, there's a seed for angularjs + cordova + angular-material here:
https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed
Your device may not have a compass.
I'm trying to use Weinre to debug an AngularJS application, but the style inspection isn't working. I can use Weinre to select elements on the page, but it never shows the associated style information coming from CSS selectors. I've narrowed it down to simply including AngularJS (I'm using version 1.2.5) on the page breaks Weinre style inspection. I've found a few references online to Weinre not working with AngularJS (https://issues.apache.org/jira/browse/CB-2651) but the JIRAs say that it's resolved. Any ideas?
Include the following function, and run it early on your page:
function whackWebkitMatchesSelector() {
var oldMatches = Element.prototype.webkitMatchesSelector
function newMatches(selector) {
try {
return oldMatches.call(this, selector)
}
catch (err) {
return false
}
}
Element.prototype.webkitMatchesSelector = newMatches
}
whackWebkitMatchesSelector()
As suggested in https://issues.apache.org/jira/browse/CB-6161
I can now inspect most (probably not all) styles.
They "fixed" it by catching the exception and continuing on. Apparently the issue is caused by (what webkit thinks) are invalid CSS selectors.
I know this issue is old but I've come across the same one when debugging under Internet Explorer 11. I've updated the previous whackWebkitMatchesSelector to include the IE case:
function whackWebkitMatchesSelector() {
var oldMatches;
if (Element.prototype.msMatchesSelector) {
oldMatches = Element.prototype.msMatchesSelector;
Element.prototype.msMatchesSelector = function(selector) {
try { return oldMatches.call(this, selector); }
catch (err) { return false; }
};
} else if (Element.prototype.webkitMatchesSelector) {
oldMatches = Element.prototype.webkitMatchesSelector;
Element.prototype.webkitMatchesSelector = function(selector) {
try { return oldMatches.call(this, selector); }
catch (err) { return false; }
};
}
}
whackWebkitMatchesSelector();