javascript - My IndexedDB add() in my service worker succeed but I cannot see the data it in the Chrome dev tools Application/Storage -

i on chrome version 57.0.2987.110 (64-bit) on macos/osx 12.3 sierra,

i managed service worker working, must new @ this.

i try use indexeddb , store data in it.

it fetches data local web server in http , retrieve without problem in json format.

the data format :

[{"id":"1", "...":"...", ...},  {"id":"2", "...":"...", ...},  {"id":"3", "...":"...", ...},  ...  {"id":"n", "...":"...", ...}] 

it adds data indexeddb without problem apparently because onsuccess callback triggered ...

entityobjectstore.add success : event {istrusted: true, type: "success", target: idbrequest, currenttarget: idbrequest, eventphase: 2…} 

but not appear in chrome dev tools!

here service worker:

self.addeventlistener('install',function(event)     {     event.waituntil(         (new promise(function(resolve,reject)resolve()}))         .then(function()             {return self.skipwaiting();}));     });  self.addeventlistener('activate', function(event)     {     event.waituntil(         (new promise(function(resolve,reject){resolve()}))         .then(function() {return self.clients.claim();}));     });  self.addeventlistener('message', function(event)     {     if(event.data.command=="data.load")         {         var options = event.data.options         var url = new url(event.data.host+options.source);         var parameters = {entity:options.name,                           options:encodeuricomponent(options.options)};         object.keys(parameters)             .foreach(key => url.searchparams.append(key,                                                     parameters[key]))         fetch(url).then(function(response)             {             if(response.ok)                 {                 response.json().then(function(data_json)                     {                     var entitydata = data_json;                     var request = indexeddb.open(options.name);                     request.onerror = function(event)                         {                         console.log("indexeddb.open error :",event);                         };                     request.onsuccess = function(event)                         {                         console.log("indexeddb.open success :",event)                         var db = event.target.result;                         }                     request.onupgradeneeded = function(event)                         {                         console.log("indexeddb.open upgrade :",event)                         var db = event.target.result;                         db.createobjectstore(options.options.id, { keypath: "id" });                         objectstore.transaction.oncomplete = function(event)                             {                             var entityobjectstore = db.transaction(options.options.id, "readwrite").objectstore(options.options.id);                             (var in entitydata)                                 {                                 var addrequest = entityobjectstore.add(entitydata[i]);                                 addrequest.onerror = function(event)                                     {                                     console.log("entityobjectstore.add error :",event);                                     };                                 addrequest.onsuccess = function(event)                                     {                                     console.log("entityobjectstore.add success :",event);                                     };                                 }                             }                         };                      });                 }             });         }     else if(event.data.command=="data.get")         {         var command = event.data;         var request = indexeddb.open(command.domain);         request.onerror = function(event)             {             console.log("indexeddb.open error :",event);             };         request.onsuccess = function(event)             {             console.log("indexeddb.open success :", event)             var db = event.target.result;             var transaction = db.transaction([command.domain]);             var objectstore = transaction.objectstore(command.entity);             var request = objectstore.get(command.id);             request.onerror = function(event)                 {                 console.log("objectstore.get error :",event);                 };             request.onsuccess = function(event)                 {                 console.log("objectstore.get success :",event);                 console.log("request.result=" + request.result);                 };                       }         }     }); 

here html file use :

<!doctype html> <html>     <head>         <title>my service worker app</title>     </head>     <body>         <button id="update">update</button>         <div id="log"></div>         <script type="text/javascript">         function sendmessage(message)             {             return new promise(function(resolve, reject)                 {                 var messagechannel = new messagechannel();                 messagechannel.port1.onmessage = function(event)                     {                     if (event.data.error)                         {                         reject(event.data.error);                         }                     else                         {                         resolve(event.data);                         }                     };                  });             }             if (navigator.serviceworker.controller)                 {                 var url = navigator.serviceworker.controller.scripturl;                 var initdata =  [                                 {                                 name:"my_entity_type",                                 source:"/webapp/data",                                 options:{id:"my_entity_type_id"}                                 }                                 ]                 for(var dataindex in initdata)                     {                     var data = initdata[dataindex]                     sendmessage({                                  command:"data.load",                                  host: document.location.origin,                                  options: data                                  });                     }                 }             else                 {                 navigator.serviceworker.register('/webapp/lt_sw.js')                     .then(function(registration)                         {                         debug('refresh allow serviceworker control client', 'onload');                         debug(registration.scope, 'register');                         });                 }      navigator.serviceworker.addeventlistener('controllerchange',      function()          {         var scripturl = navigator.serviceworker.controller.scripturl;         debug(scripturl, 'oncontrollerchange');         });      document.queryselector('#update').addeventlistener('click',      function()          {         navigator.serviceworker.ready.then(function(registration)             {             registration.update()                 .then(function()                     {                     console.log('checked update');                     })                 .catch(function(error)                     {                     console.error('update failed', error);                     });                 });             });          function debug(message, element)             {             var target = document.queryselector('#log');             console.log(element,":",message)             target.textcontent = message;             }         </script>     </body> </html> 

any idea am, doing wrong?

edit 1:

i modified script in html file update mechanism sends message service worker asking data :

    document.queryselector('#update').addeventlistener('click',      function()          {         navigator.serviceworker.ready.then(function(registration)             {             registration.update()                 .then(function()                     {                     console.log('checked update');                     sendmessage({                         command:"data.get",                         domain:"database_name",                         entity: "my_entity_type",                         id: "my_entity_id"                         });                     })                 .catch(function(error)                     {                     console.error('update failed', error);                     });                 });             }); 

and added following line:

    indexeddb.webkitgetdatabasenames().onsuccess = function(sender,args){ console.log("data.get dbs:",sender.target.result); }; 

just @ beginning of data part:

    else if(event.data.command=="data.get")         { 

to list indexeddbs on chrome explained here : https://stackoverflow.com/a/15234833/2360577 , databases created previously!

data.get dbs: domstringlist {0: "db1", 1: "db2", 2: "db3", 3: "db4", length: 4} 

then proceeded list objectstores in these dbs, explained in previous link, adding following line :

indexeddb.open(<databasename>).onsuccess = function(sender,args)  {"<databasename>'s object stores",console.log(sender.target.result.objectstorenames); }; 

and apart one, data processed , apparently not work, had 1 object store same name db contains expected ...

db1's object stores domstringlist {0: "db1", length: 1} db2's object stores domstringlist {length: 0} db3's object stores domstringlist {0: "db3", length: 1} db4's object stores domstringlist {0: "db4", length: 1}  

then had inside object stores ...

indexeddb.open("db3").onsuccess = function(event) {event.target.result.transaction(["db3"]).objectstore("db3")     .getall().onsuccess = function(event)     {console.log("objectstore.getall() success :",event.target.result)};}; 

and entries there expected! not in application/storage ...

edit 2:

the error db2 apparently did not refresh data in database ... part works ...

edit 3:

the answer simple closing , reopening dev tools ... @woxxom suggested ...

you check "update on reload" button , try hard reset ctrl/shift+f5 same effect @woxxom mentioned.