Question

这是我的第一篇文章，如果我做错了，请告诉我。

我们正在开发一个有角度的2 webapp，我们希望能够为多种浏览器（IE11，Chrome，Mobile Safari）脱机工作。为了实现这一目标，我们研究了IndexedDB和PouchDB，因为它们允许缓存大量数据。

我们的情况如下。在初始化时，我们将调用一个api服务，它将返回许多资源文件，例如一个名为＆＃34; styles.css＆＃34;的css文件和一个png文件;和＆＃34; image.png＆＃34;分别。我们将这些存储在DB中。然后，当我们显示相应的组件时，我们使用<head>标记将css注入<link>。

html看起来像：

<html>
    <head>
        <link href="styles.css" rel="stylesheet">
    </head>
...
</html>

在styles.css中，我们将有一个png的URL：

.example-icon .icon
{
    background-image: url("image.png")
}

问题是，我们如何引用＆＃34; styles.css＆＃34;来自html和＆＃34; image.png＆＃34;来自＆＃34; styles.css＆＃34;，当＆＃34; styles.css＆＃34;和＆＃34; image.png＆＃34;在IndexedDB / PouchDB中。

任何帮助都将不胜感激。

Answer 1

这不能自动完成 - 不支持将索引数据库中的URL（feature request）。

方法是将数据库中的资源存储为Blob。需要时，检索记录并使用URL.createObjectURL(blob)为其创建临时URL。创建URL的页面关闭后，此URL将无效，因此必须在每个页面加载时检索记录，但URL可以在页面中使用。请注意，在您的示例中，这适用于注入页面的样式表链接，但样式表中的url()引用需要是另一个需要在页面加载时更新的Blob URL，这使得这更加复杂。 / p>

除此之外，其他选项包括将所有内容存储为字符串并使用例如数据：URL（例如，您可以将图像数据嵌入样式表中）。

根据您列出的限制（IE11等），选项相当受限制。使用更现代的浏览器（最新的Chrome和Firefox），推荐的方法是使用Service Workers和Cache Storage API;您的应用程序将注册服务工作者，并且可以拦截任何网络请求并将其路由到缓存API。这种方法足以实现URLs into Indexed DB，但是一旦你有了这些新的API，你可能更喜欢使用Cache API。

使用IndexedDB / PouchDB进行外部资源（如css和png）的离线缓存

1 个答案: