environment: use webview load remote url in ipad(iPad mini5, the version is 14.6), when the remote url loaded and execute then code is shown below, and nothing print. It seems that indexedDB.open() does not have any return.
After my testing, there will only be problems with version 14.6, and there will be no problem with versions below ios 14.4. I'm not sure if it's a webview problem or an indexedDB problem
var dbName = "test";
var dbVersion = 1;
var indexedDB = window.indexedDB ||
window.webkitIndexedDB ||
window.mozIndexedDB;
var db = '';
console.log("setup indexed db");
var request = indexedDB.open(dbName, dbVersion);
request.onsuccess = function(e) {
console.log("db request success");
};
request.onblocked = function(e) {
console.log("DB open blocked", e);
};
request.onerror = function(err) {
console.log("error", err);
};
request.onversionchange = function(err) {
console.log("onversionchange", err);
};
request.onupgradeneeded = function(e) {
console.log("upgrade needed");
};
After testing, it was found that there would be a problem with wkWebview and that using uiWebview would not. So I think there's a problem with the new version of ios wkWebview for indexedDB compatibility
Related
I'm developing an app in Nativescript for the first time and running into an issue where AJAX calls work on Android but not iOS. I have a login.js file which requires a user-view-model (user-view-model.js), and when I test the code on Android it takes me to the "home" page but it hits the catch function on iOS.
login.js:
var dialogsModule = require("ui/dialogs");
var UserViewModel = require("../../shared/view-models/user-view-model");
var applicationSettings = require("application-settings");
var user = new UserViewModel({
email: "aaa#aaa.com",
password: "aaa"
});
var frameModule = require("ui/frame");
var page;
exports.loaded = function(args) {
page = args.object;
page.bindingContext = user;
};
exports.login = function () {
user.login().catch(function(error) {
dialogsModule.alert({
message: "Unfortunately we could not find your account.",
okButtonText: "OK"
});
return Promise.reject();
}).then(function(response) {
console.dir(response)
console.log("past response")
applicationSettings.setString("user_id", response.user_id);
applicationSettings.setString("first_name", response.first_name);
applicationSettings.setString("last_name", response.last_name);
applicationSettings.setString("user_type", response.user_type);
var topmost = frameModule.topmost();
topmost.navigate("views/home/home");
});
};
user-view-model.js:
var config = require("../../shared/config");
var fetchModule = require("fetch");
var observableModule = require("data/observable");
var http = require("http");
function User(info) {
info = info || {};
var viewModel = new observableModule.fromObject({
email: info.email || "",
password: info.password || ""
});
viewModel.login = function() {
let loginEmail = JSON.stringify(this.get("email")).replace(/['"]+/g, '');
let loginPassword = JSON.stringify(this.get("password")).replace(/['"]+/g, '');
console.log(loginEmail, loginPassword);
let loginUrl = config.serverPHPServiceUrl + "Login.php?user_id=" + loginEmail + "&password=" + loginPassword;
console.log(loginUrl);
// I tried this way first and wasn't able to login on iOS, which made me try the second method below.
// return fetchModule.fetch(loginUrl, {
// method: "POST",
// headers: {
// "Content-Type": "application/json"
// }
// }).then(handleErrors).then(function(response) {
// return response.json();
// }).then(function(data) {
// console.dir(data);
// console.log(data["results"][0]["user_id"])
// return data["results"][0];
// });
// This method works on Android but not iOS.
return http.getJSON(loginUrl).then(function(response) {
console.dir(response);
return response.results[0];
})
};
return viewModel;
};
function handleErrors(response) {
console.log("in errors")
if (!response.ok) {
console.log(JSON.stringify(response));
throw Error(response.statusText);
}
return response;
}
module.exports = User;
Is there anything fundamentally wrong with my code, or do asynchronous calls work differently on iOS vs Android in Nativescript? I did the Grocery tutorial and didn't run into this issue, so I didn't think this was the case. Does it matter that the backend is using PHP?
I fixed my issue: I started a new project with Angular 2 and ran into the same error, but then it gave me the error message "Error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection." I solved it by adding "https" to my url call, but this post has another solution.
I am developing a Cordova App for iOS with an IndexedDB Database in the background. Here is my code for opening the database:
indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
if (!indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.");
}
console.log("openDb ...");
var req = indexedDB.open(insectDbName, 21);
console.log(req);
req.onsuccess = function(evt) {
debugger;
db = this.result;
console.log("openDb DONE");
};
req.onerror = function(evt) {
//debugger;
console.error("openDb: ", evt.target.errorCode);
};
req.onupgradeneeded = function(evt) {
console.log("openDb.onupgradeneeded");
//debugger;
var versionStore = evt.currentTarget.result.createObjectStore(versionStoreName, { autoIncrement : true});
console.log("versionStore created");
};
Now, my problem is, when I open the database, the request is no IDBOpenRequest object. But the events are firing. When I open the database with a new version number, the onupgradeneeded event is called. And when I open with the current version, the onsuccess event is called.
The problem is, that the objectstores are never created, because in the onupgradeneeded event, evt.currentTarget is null.
I have already included the IndexedDBshim and the Cordova IndexedDB Plugin but it is still not working.
Has anybody encountered similar problems?
Ok, I found the problem. I had to use evt.target instead of evt.currentTarget.
I'm making a cross platform app with cordova.
I want to get an image from photo library and preview it on screen and upload it to server.
I could do the image is displayed on screen so far.
The problem is reader.onloadend is not fired and nothing happens.
$scope.getImage = function() {
var options = {
quality: 100,
sourceType: 0 // 0:Photo Library, 1=Camera, 2=Saved Album
};
var onSuccess = function(imageURI) {
var pic = document.getElementById('addImage');
pic.style.display = 'block';
pic.src = imageURI;
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("loaded");
};
reader.onerror = function(error) {
alert("error");
};
reader.readAsArrayBuffer(imageURI);
};
var onFail = function(message) {
alert("error");
};
navigator.camera.getPicture(onSuccess, onFail, options);
};
I've been struggling this problem for 2 days and found exactly same thread phonegap filereader onloadend doesn't work but couldn't solve yet.
Does anyone have any suggestion?
I appreciate any help.
I identified this as an issue with zone.js in Angular 2.
A workaround is to wrap FileReader object into it's own zone.
const WrappedFileReader = window.FileReader
window.FileReader = function OriginalFileReader(...args) {
WrappedFileReader.apply(this, args)
const originalInstance = this[Zone.__symbol__('originalInstance')] // eslint-disable-line
return originalInstance || this
}
The scenario goes like this: I open a website in InAppBrowser, after the user ends with the work over there, the site generates a .pdf for the user to download, the problem is that the pdf does not download, it opens it in the browser.
Is there a way to make it download from the InAppBrowser? I'm currently working on an iOS app, so the solution would be better for iOS.
Thanks in advance.
Following #jcesarmobile advices this is what I came up with:
First I had to install the cordova-plugin-file-transfer
Open URL
var url = "http://mi-fancy-url.com";
var windowref = window.open(url, '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');
Create a listener on that windowref for a loadstart event and check if what's being loaded is a pdf (that's my case).
windowref.addEventListener('loadstart', function(e) {
var url = e.url;
var extension = url.substr(url.length - 4);
if (extension == '.pdf') {
var targetPath = cordova.file.documentsDirectory + "receipt.pdf";
var options = {};
var args = {
url: url,
targetPath: targetPath,
options: options
};
windowref.close(); // close window or you get exception
document.addEventListener('deviceready', function () {
setTimeout(function() {
downloadReceipt(args); // call the function which will download the file 1s after the window is closed, just in case..
}, 1000);
});
}
});
Create the function that will handle the file download and then open it:
function downloadReceipt(args) {
var fileTransfer = new FileTransfer();
var uri = encodeURI(args.url);
fileTransfer.download(
uri, // file's uri
args.targetPath, // where will be saved
function(entry) {
console.log("download complete: " + entry.toURL());
window.open(entry.toURL(), '_blank', 'location=no,closebuttoncaption=Cerrar,toolbar=yes,enableViewportScale=yes');
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
true,
args.options
);
}
The problem i'm facing now is the path where it downloads, I just can't open it. But well, at least file is now downloaded. I will have to create a localStorage item to save the paths for different files.
Many validations are missing in this steps, this was just an example I made quickly to check if it works. Further validations are needed.
Open you window using IAB plugin and add an event listener
ref = window.open(url, "_blank");
ref.addEventListener('loadstop', loadStopCallBack);
In the InAppBrowser window call the action using https://xxx.pdf">documentName
Implement the loadStopCallBack function
function loadStopCallBack(refTemp) {
if(refTemp.url.includes('downloadDoc')) {
rtaParam = getURLParams('downloadDoc', refTemp.url);
if(rtaParam != null)
downloadFileFromServer(rtaParam);
return;
}
}
function getURLParams( name, url ) {
try {
if (!url)
url = location.href;
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(url);
return results == null ? null : results[1];
} catch (e) {
showSMS(e);
return null;
}
}
After create a download method
function downloadFileFromServer(fileServerURL){
try {
var Downloader = window.plugins.Downloader;
var fileName = fileServerURL.substring(fileServerURL.lastIndexOf("/") + 1);
var downloadSuccessCallback = function(result) {
console.log(result.path);
};
var downloadErrorCallback = function(error) {
// error: string
console.log(error);
};
//TODO cordova.file.documentsDirectory for iOS
var options = {
title: 'Descarga de '+ fileName, // Download Notification Title
url: fileServerURL, // File Url
path: fileName, // The File Name with extension
description: 'La descarga del archivo esta lista', // Download description Notification String
visible: true, // This download is visible and shows in the notifications while in progress and after completion.
folder: "Download" // Folder to save the downloaded file, if not exist it will be created
};
Downloader.download(options, downloadSuccessCallback, downloadErrorCallback);
} catch (e) {
console.log(e);
}
}
you can get the plugin here https://github.com/ogarzonm85/cordova-plugin-downloader
it Works and was too easy
I want to add ability to my addon to play audio from URL. At MDN I not found information about this. I found this and this and this and this answers - but this is about local file and what the correct answer for 2015 year?
I have an answer from 2016 ;)
That code will not work with Multi-process Firefox (will be released in 2016):
var window = require('sdk/window/utils').getMostRecentBrowserWindow();
var audio = new window.Audio('http://example.com/audio.mp3');
vaudio.play();
Because sdk/window/utils. To understand why read this topic on MDN.
Solution is page-worker:
main.js:
var pageWorkers = require("sdk/page-worker");
var audioWorker = pageWorkers.Page({
contentURL: './blank.html', //blank html file in `data` directory
contentScriptFile: './worker.js'
});
// for example i want to play song from url
var url = 'http://some-url.com/some-song.mp3';
// send msg to worker to play this url
audioWorker.port.emit('play', url);
worker.js
var audio = new window.Audio;
self.port.on('play', function(url) {
audio.src = url;
audio.play();
});
It works in my extension and will work with new Multi-process Firefox release.
#Noitidart Future is coming and at 2015 you can write much less code!
var window = require('sdk/window/utils').getMostRecentBrowserWindow();
var audio = new window.Audio('http://example.com/audio.mp3');
audio.play();
This works for me Im not sure how 2015 it is, but i wrote like a couple months ago:
Cu.import('resource://gre/modules/osfile.jsm');
Cu.import('resource://gre/modules/Services.jsm');
function audioContextCheck() {
if (typeof Services.appShell.hiddenDOMWindow.AudioContext !== 'undefined') {
return new Services.appShell.hiddenDOMWindow.AudioContext();
} else if (typeof Services.appShell.hiddenDOMWindow.mozAudioContext !== 'undefined') {
return new Services.appShell.hiddenDOMWindow.mozAudioContext();
} else {
throw new Error('AudioContext not supported');
}
}
var audioContext = audioContextCheck();
var audioBuffer;
var getSound = new XMLHttpRequest();
getSound.open('get', OS.Path.toFileURI(OS.Path.join(OS.Constants.Path.desktopDir, 'zirzir.mp3')), true);
getSound.responseType = 'arraybuffer';
getSound.onload = function() {
audioContext.decodeAudioData(getSound.response, function(buffer) {
audioBuffer = buffer;
var playSound = audioContext.createBufferSource();
playSound.buffer = audioBuffer;
playSound.connect(audioContext.destination);
playSound.start(audioContext.currentTime);
});
};