使用服务工作者时，如何从IndexedDB中检索值？

编程问答 2022-06-03

问题描述

我是IndexedDB和服务人员的新手，很难理解如何将它们转变为功能性应用程序。我已经对这两者进行了广泛的阅读，但即使是“完整”的示例也没有将两者结合。

我的任务是创建一个允许用户脱机工作的应用程序。他们第一次连接到站点时，我想从数据库中提取特定信息，并将其存储在IndexedDB中。当他们离线时，我需要使用该数据在页面上显示信息。某些交互将导致数据更新，然后在重新建立Internet连接后随后进行同步。从较高的角度，我了解了它是如何工作的。

据我了解，由于serviceworkers的异步特性，我们无法从serviceworker.js文件中调用函数。此外，serviceworkers.js无法直接更新DOM。但是，我看到的示例是在serviceworkers.js文件中创建和管理IndexedDB数据。

所以说我有一个文件：

across

还有一个serviceworker.js：

<!-- index.html -->
<html>
<body>
Hello <span id="name"></span>
</body>
</html>

现在如何从“ mydata”数据库中的“用户”对象库中使用键= 1的值更新元素“名称”？

解决方法

根据您的用例，您有几种选择：

  1. 您不需要服务人员。只需直接从页面从iDB中提取数据即可。 DOM可以访问iDB。
  2. 为index.html设置模板。在Service Worker中的激活步骤中，使用iDB中的值预渲染页面并对其进行缓存。
htmlindexeddbjavascriptservice-worker