IndexedDB is not working in the Android app for Teams

%3CLINGO-SUB%20id%3D%22lingo-sub-1359784%22%20slang%3D%22en-US%22%3EIndexedDB%20is%20not%20working%20in%20the%20Android%20app%20for%20Teams%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1359784%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20developed%20a%20SharePoint%20WebPart%20that%20I'm%20using%20as%20app%20in%20Teams.%20From%20this%20WebPart%20I%20call%20an%20external%20site%20(%3CA%20href%3D%22http%3A%2F%2Fxxxx%2Fexample.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fxxxx%2Fexample.html%3C%2FA%3E)%20to%20store%20some%20data%20with%20indexedDB.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CPRE%3E%20public%20async%20render()%20%7B%0A%20%20%20%20%20%20this.domElement.innerHTML%20%3D%20%60%26lt%3Biframe%20src%3D%22http%3A%2F%2Fxxxx%2Fexample.html%3Ftoken%3Dxxxxxxxx%22%2F%26gt%3B%60%3B%0A%20%7D%3C%2FPRE%3E%3CP%3EIf%20I%20try%20to%20use%20this%20app%20in%20Teams%20from%20Chrome%2C%20Firefox...%20and%20with%20the%20desktop%20app%20all%20works%20fine%20but%20I%20have%20discovered%20an%20error%20when%20I%20try%20to%20use%20the%20application%20with%20the%20android%20app%20for%20Teams.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EWhat%20can%20I%20do%20to%20work%20with%20the%20indexedDB%20from%20the%20android%20app%20for%20Teams%3F%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EThis%20is%20the%20code%20of%20the%20external%20site%20(%3CA%20href%3D%22http%3A%2F%2Fxxxx%2Fexample.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fxxxx%2Fexample.html%3C%2FA%3E)%20that%20I'm%20invoking%20from%20the%20WebPart%3A%3C%2FP%3E%3CP%3EIf%20I%20try%20to%20use%20the%20app%20in%20the%20Android%20app%20for%20Teams%20I%20have%20the%20following%20error%3A%3C%2FP%3E%3CP%3E%3CSTRONG%3E%3CBR%20%2F%3E'It%20is%20necessary%20for%20the%20correct%20functioning%20of%20the%20app%20to%20allow%20access%20to%20IndexedDB.'%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3EIn%20other%20cases%3A%20Desktop%20App%2C%20using%20navigators...%20works%20fine.%20From%20my%20point%20of%20view%20is%20something%20relative%20to%20the%20way%20that%20the%20Android%20App%20handle%20the%20indexedDB.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CPRE%3E%26lt%3B!DOCTYPE%20html%26gt%3B%0A%26lt%3Bhtml%20lang%3D%22en%22%26gt%3B%0A%26lt%3Bhead%26gt%3B%0A%20%20%26lt%3Bmeta%20charset%3D%22UTF-8%22%26gt%3B%0A%20%20%26lt%3Btitle%26gt%3BExample%26lt%3B%2Ftitle%26gt%3B%0A%26lt%3B%2Fhead%26gt%3B%0A%26lt%3Bbody%26gt%3B%0A%0A%26lt%3Bscript%26gt%3B%0A%0A%20%20var%20tableName%20%3D%20'_test'%3B%0A%20%20var%20key%20%3D%20'a2B2MSmQa1'%3B%0A%20%20var%20mydb%3B%0A%20%20var%20entry%20%3D%20getEntry()%3B%0A%20%20var%20stringEntry%20%3D%20JSON.stringify(entry)%3B%0A%0A%20%20function%20getEntry()%20%7B%0A%20%20%20%20%2F%2F%20prepare%20authentication%20info%0A%20%20%20%20var%20token%20%3D%20findGetParameter('token')%3B%0A%20%20%20%20var%20user%20%3D%20getUserFromJwt(token)%3B%0A%20%20%20%20console.log('Received%20request%20to%20log%20in%20with%20token%3A%20'%20%2B%20token%20%2B%20'%20and%20user%3A%20'%20%2B%20user)%3B%0A%0A%20%20%20%20return%20%5B%7B%0A%20%20%20%20%20%20%22AnyeP3Hy11%22%3A%20btoa(user)%2C%0A%20%20%20%20%20%20%22bcdW7Sibfo%22%3A%20%22%22%2C%0A%20%20%20%20%20%20%22AE1RLE62l3%22%3A%20true%2C%0A%20%20%20%20%20%20%22Tx22M4zx51%22%3A%20btoa(token)%2C%0A%20%20%20%20%20%20%221l2i483Zx5%22%3A%20false%0A%20%20%20%20%7D%5D%3B%0A%20%20%7D%0A%0A%20%20function%20getUserFromJwt(token)%20%7B%0A%20%20%20%20var%20payload%20%3D%20token.split('.')%5B1%5D%3B%0A%20%20%20%20var%20claims%20%3D%20JSON.parse(atob(payload))%3B%0A%0A%20%20%20%20return%20claims.email%3B%0A%20%20%7D%0A%0A%20%20function%20saveTokenDataWebSql()%20%7B%0A%20%20%20%20mydb.transaction(function%20(t)%20%7B%0A%20%20%20%20%20%20t.executeSql('select%20*%20from%20'%20%2B%20tableName%20%2B%20'%20where%20key%20%3D%20%3F'%2C%20%5Bkey%5D%2C%20function%20(transaction%2C%20data)%20%7B%0A%20%20%20%20%20%20%20%20if%20(!data.rows.length)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20if%20authentication%20info%20doesn't%20already%20exists%20-%26gt%3B%20create%20it%20it%0A%20%20%20%20%20%20%20%20%20%20mydb.transaction(function%20(t)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20t.executeSql('insert%20into%20'%20%2B%20tableName%20%2B%20'(key%2C%20value)%20values%20(%3F%2C%20%3F)'%2C%20%5Bkey%2C%20stringEntry%5D%2C%20goToApp)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log('Inserted%20entry')%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20if%20authentication%20info%20already%20exists%20-%26gt%3B%20replace%20it%0A%20%20%20%20%20%20%20%20%20%20mydb.transaction(function%20(t)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20t.executeSql('update%20'%20%2B%20tableName%20%2B%20'%20set%20value%20%3D%20%3F%20where%20key%20%3D%20%3F'%2C%20%5BstringEntry%2C%20key%5D%2C%20goToApp)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log('Updated%20entry')%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%0A%20%20function%20saveTokenDataIndexedDB(objectStore)%20%7B%0A%20%20%20%20objectStore.count(key).onsuccess%20%3D%20function%20(event)%20%7B%0A%20%20%20%20%20%20var%20count%20%3D%20event.target.result%3B%0A%20%20%20%20%20%20if%20(count%20!%3D%3D%200)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20if%20authentication%20info%20already%20exists%20-%26gt%3B%20remove%20it%0A%20%20%20%20%20%20%20%20objectStore.delete(key).onsuccess%20%3D%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20save%20auth%20info%20after%20deletion%0A%20%20%20%20%20%20%20%20%20%20objectStore.put(entry%2C%20key)%3B%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20save%20auth%20info%20directly%0A%20%20%20%20%20%20%20%20objectStore.put(entry%2C%20key)%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20var%20indexedDBWay%20%3D%20function%20()%20%7B%0A%20%20%20%20console.log('Using%20indexedDB%20option')%3B%0A%0A%20%20%20%20var%20request%20%3D%20indexedDB.open('__mydb'%2C%202)%3B%0A%20%20%20%20request.onerror%20%3D%20function%20(event)%20%7B%0A%20%20%20%20%20%20alert('It%20is%20necessary%20for%20the%20correct%20functioning%20of%20the%20app%20to%20allow%20access%20to%20IndexedDB.')%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20request.onsuccess%20%3D%20function%20(event)%20%7B%0A%20%20%20%20%20%20mydb%20%3D%20event.target.result%3B%0A%0A%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20console.log('Database%20opened%2C%20checking%20existence%20of%20table')%3B%0A%20%20%20%20%20%20%20%20var%20objectStore%20%3D%20mydb.transaction(%5BtableName%5D%2C%20'readwrite')%0A%20%20%20%20%20%20%20%20%20%20.objectStore(tableName)%3B%0A%0A%20%20%20%20%20%20%20%20console.log('Table%20exists.%20Proceeding%20to%20save%20data')%3B%0A%20%20%20%20%20%20%20%20saveTokenDataIndexedDB(objectStore)%3B%0A%0A%20%20%20%20%20%20%20%20console.log('All%20done%2C%20going%20to%20app')%3B%0A%20%20%20%20%20%20%20%20goToApp()%3B%0A%20%20%20%20%20%20%7D%20catch%20(e)%20%7B%0A%20%20%20%20%20%20%20%20console.log(e)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%3B%0A%20%20%7D%3B%0A%0A%20%20var%20openDatabaseWay%20%3D%20function%20()%20%7B%0A%20%20%20%20console.log('Using%20openDatabase%20option')%3B%0A%0A%20%20%20%20mydb%20%3D%20openDatabase('__mydb'%2C%20'1'%2C%20'desc'%2C%201024%20*%201024)%3B%0A%0A%20%20%20%20console.log('Database%20opened%2C%20checking%20existence%20of%20table')%3B%0A%0A%20%20%20%20mydb.transaction(function%20(t)%20%7B%0A%20%20%20%20%20%20t.executeSql('select%20*%20from%20'%20%2B%20tableName%2C%20%5B%5D%2C%20function%20(transaction%2C%20data)%20%7B%0A%20%20%20%20%20%20%20%20if%20(data.rows)%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log('Table%20exists.%20Proceeding%20to%20save%20data')%3B%0A%20%20%20%20%20%20%20%20%20%20saveTokenDataWebSql()%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.error('App%20DB%20not%20present%2C%20go%20back%20to%20app')%3B%0A%20%20%20%20%20%20%20%20%20%20goToApp()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%2C%20function%20(t%2C%20e)%20%7B%0A%20%20%20%20%20%20%20%20console.log('Error%20while%20opening%20database'%2C%20e)%3B%0A%20%20%20%20%20%20%20%20console.log('Creating%20database')%3B%0A%20%20%20%20%20%20%20%20createWebSqlDbTable(t%2C%20tableName%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20openDatabaseWay()%3B%0A%20%20%20%20%20%20%20%20%7D%2C%20function%20(t%2C%20e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log('Error%20while%20creating%20database.%20All%20hope%20is%20lost.'%2C%20e)%3B%0A%20%20%20%20%20%20%20%20%20%20goToApp()%3B%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20function%20createWebSqlDbTable(t%2C%20tableName%2C%20callback%2C%20errorCallback)%20%7B%0A%20%20%20%20t.executeSql(%0A%20%20%20%20%20%20'CREATE%20TABLE%20IF%20NOT%20EXISTS%20'%20%2B%20tableName%20%2B%0A%20%20%20%20%20%20'(id%20INTEGER%20PRIMARY%20KEY%2C%20key%20unique%2C%20value)'%2C%0A%20%20%20%20%20%20%5B%5D%2C%0A%20%20%20%20%20%20callback%2C%0A%20%20%20%20%20%20errorCallback%0A%20%20%20%20)%3B%0A%20%20%7D%0A%0A%20%20console.log('Trying%20to%20save%20token%20data')%3B%0A%20%20var%20debug%20%3D%20location.search.indexOf('debug')%20!%3D%3D%20-1%3B%0A%20%20if(debug)%7B%0A%20%20%20%20debugger%3B%0A%20%20%7D%0A%20%20if%20(window.openDatabase)%20%7B%0A%20%20%20%20openDatabaseWay()%3B%0A%20%20%7D%20else%20if%20(window.indexedDB)%20%7B%0A%20%20%20%20indexedDBWay()%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20console.error('Cannot%20open%20database%2C%20go%20back%20to%20app')%3B%0A%20%20%20%20goToApp()%3B%0A%20%20%7D%0A%0A%26lt%3B%2Fscript%26gt%3B%0A%0A%26lt%3B%2Fbody%26gt%3B%0A%26lt%3B%2Fhtml%26gt%3B%3C%2FPRE%3E%3CP%3E%3CBR%20%2F%3ECould%20somebody%20give%20me%20any%20clue%3F%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3ERegards!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1359784%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAndroid%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EindexedDB%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ETeams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Contributor

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!

0 Replies