May 05 2020 04:24 AM - edited May 06 2020 07:02 AM
I have developed a SharePoint WebPart that I'm using as app in Teams. From this WebPart I call an external site (http://xxxx/example.html) to store some data with indexedDB.
public async render() { this.domElement.innerHTML = `<iframe src="http://xxxx/example.html?token=xxxxxxxx"/>`; }
If I try to use this app in Teams from Chrome, Firefox... and with the desktop app all works fine but I have discovered an error when I try to use the application with the android app for Teams.
What can I do to work with the indexedDB from the android app for Teams?
This is the code of the external site (http://xxxx/example.html) that I'm invoking from the WebPart:
If I try to use the app in the Android app for Teams I have the following error:
'It is necessary for the correct functioning of the app to allow access to IndexedDB.'
In other cases: Desktop App, using navigators... works fine. From my point of view is something relative to the way that the Android App handle the indexedDB.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body> <script> var tableName = '_test'; var key = 'a2B2MSmQa1'; var mydb; var entry = getEntry(); var stringEntry = JSON.stringify(entry); function getEntry() { // prepare authentication info var token = findGetParameter('token'); var user = getUserFromJwt(token); console.log('Received request to log in with token: ' + token + ' and user: ' + user); return [{ "AnyeP3Hy11": btoa(user), "bcdW7Sibfo": "", "AE1RLE62l3": true, "Tx22M4zx51": btoa(token), "1l2i483Zx5": false }]; } function getUserFromJwt(token) { var payload = token.split('.')[1]; var claims = JSON.parse(atob(payload)); return claims.email; } function saveTokenDataWebSql() { mydb.transaction(function (t) { t.executeSql('select * from ' + tableName + ' where key = ?', [key], function (transaction, data) { if (!data.rows.length) { // if authentication info doesn't already exists -> create it it mydb.transaction(function (t) { t.executeSql('insert into ' + tableName + '(key, value) values (?, ?)', [key, stringEntry], goToApp); console.log('Inserted entry'); }); } else { // if authentication info already exists -> replace it mydb.transaction(function (t) { t.executeSql('update ' + tableName + ' set value = ? where key = ?', [stringEntry, key], goToApp); console.log('Updated entry'); }); } }); }); } function saveTokenDataIndexedDB(objectStore) { objectStore.count(key).onsuccess = function (event) { var count = event.target.result; if (count !== 0) { // if authentication info already exists -> remove it objectStore.delete(key).onsuccess = function () { // save auth info after deletion objectStore.put(entry, key); }; } else { // save auth info directly objectStore.put(entry, key); } }; } var indexedDBWay = function () { console.log('Using indexedDB option'); var request = indexedDB.open('__mydb', 2); request.onerror = function (event) { alert('It is necessary for the correct functioning of the app to allow access to IndexedDB.'); }; request.onsuccess = function (event) { mydb = event.target.result; try { console.log('Database opened, checking existence of table'); var objectStore = mydb.transaction([tableName], 'readwrite') .objectStore(tableName); console.log('Table exists. Proceeding to save data'); saveTokenDataIndexedDB(objectStore); console.log('All done, going to app'); goToApp(); } catch (e) { console.log(e); } }; }; var openDatabaseWay = function () { console.log('Using openDatabase option'); mydb = openDatabase('__mydb', '1', 'desc', 1024 * 1024); console.log('Database opened, checking existence of table'); mydb.transaction(function (t) { t.executeSql('select * from ' + tableName, [], function (transaction, data) { if (data.rows) { console.log('Table exists. Proceeding to save data'); saveTokenDataWebSql(); } else { console.error('App DB not present, go back to app'); goToApp(); } }, function (t, e) { console.log('Error while opening database', e); console.log('Creating database'); createWebSqlDbTable(t, tableName, function () { openDatabaseWay(); }, function (t, e) { console.log('Error while creating database. All hope is lost.', e); goToApp(); }) }); }); }; function createWebSqlDbTable(t, tableName, callback, errorCallback) { t.executeSql( 'CREATE TABLE IF NOT EXISTS ' + tableName + '(id INTEGER PRIMARY KEY, key unique, value)', [], callback, errorCallback ); } console.log('Trying to save token data'); var debug = location.search.indexOf('debug') !== -1; if(debug){ debugger; } if (window.openDatabase) { openDatabaseWay(); } else if (window.indexedDB) { indexedDBWay(); } else { console.error('Cannot open database, go back to app'); goToApp(); } </script> </body> </html>
Could somebody give me any clue?
Regards!