我的服务工作者中的 IndexedDB add() 成功但我无法在 Chrome 开发工具 Application/Storage 中看到它的数据

Question

我在 Chrome 版本 57.0.2987.110（64 位）MacOS/OSX 12.3 Sierra，

我设法让服务人员工作，但我必须说我是新手。

我现在尝试让它使用 IndexedDB 并在其中存储数据。

它以 http 从本地 Web 服务器获取数据并以 json 格式毫无问题地检索它。

数据格式为：

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

然后将数据毫无问题地添加到 IndexedDB 中，因为触发了 onsuccess 回调 ...

entityObjectStore.add success : Event {isTrusted: true, type: "success", target: IDBRequest, currentTarget: IDBRequest, eventPhase: 2…}

但它没有出现在 Chrome 开发工具中！

这是我的服务人员：

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);
                            for (var i 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);
                };          
            }
        }
    });

这是我使用的 HTML 文件：

<!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 to allow ServiceWorker to control this 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 for 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>

知道我在做什么吗？

编辑 1：

我修改了 html 文件中的脚本，以便更新机制向 service worker 发送另一条请求数据的消息：

    document.querySelector('#update').addEventListener('click', 
    function() 
        {
        navigator.serviceWorker.ready.then(function(registration)
            {
            registration.update()
                .then(function()
                    {
                    console.log('Checked for update');
                    sendMessage({
                        command:"data.get",
                        domain:"database_name",
                        entity: "my_entity_type",
                        id: "my_entity_id"
                        });
                    })
                .catch(function(error)
                    {
                    console.error('Update failed', error);
                    });
                });
            });

并且我添加了以下行：

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

就在数据查找部分的开头：

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

如此处所述列出 Chrome 上的所有 IndexedDB：我得到了我之前创建的所有数据库！

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

然后我继续列出这些数据库中的所有 ObjectStores，也如前面 link 中所述，通过添加以下行：

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

除了一个，其中数据被处理并且显然不起作用，他们都有一个对象存储，其名称与预期的包含它的数据库相同...

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}

然后我查看了对象存储的内部...

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)};};

条目如期而至！但不在 Application/Storage ...

编辑 2：

db2 的错误显然是我没有刷新数据库中的数据...这部分现在有效...

编辑 3：

答案很简单，就像关闭并重新打开开发工具一样……就像@wOxxOm 建议的那样……

Answer 1

您还可以检查 "Update on reload" 按钮并尝试硬重置 ctrl/shift+f5 以达到与@wOxxOm 提到的相同效果。

Answer 2

如果我关闭 DevTools 并再次打开，它对我有用。你试过了吗？

我的服务工作者中的 IndexedDB add() 成功但我无法在 Chrome 开发工具 Application/Storage 中看到它的数据

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

javascript

google-chrome-devtools

indexeddb

service-worker