使用 IndexedDB/PouchDB 离线缓存 css 和 png 等外部资源

Question

这是我的第一个 post 如果我做错了什么，请告诉我。

我们正在开发 angular 2 网络应用程序，我们希望能够为许多浏览器（IE11、Chrome、Mobile Safari）离线工作。为了实现这一点，我们研究了 IndexedDB 和 PouchDB，因为它们允许缓存大量数据。

我们的情况如下。在初始化时，我们将调用一个 api 服务，该服务将 return 我们一些资源文件，例如一个 css 文件和一个分别名为 "styles.css" 和 "image.png" 的 png 文件。我们会将这些存储在数据库中。然后，当我们显示相应的组件时，我们使用 <link> 标记将 css 注入到 <head> 中。

html 看起来像：

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

在 styles.css 里面我们会有一个 url 到 png:

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

问题是，我们如何从 html 引用 "styles.css"，从 "styles.css" 引用 "image.png"，当 "styles.css"和 "image.png" 在 IndexedDB/PouchDB.

如有任何帮助，我们将不胜感激。

Answer 1

这无法自动完成 - URL 不支持索引数据库 (feature request)。

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

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

由于您列出的限制（IE11 等），选项相当受限。对于更现代的浏览器（最新的 Chrome 和 Firefox），推荐的方法是使用 Service Workers 和缓存存储 API；你的应用程序会注册一个服务工作者，任何网络请求都可以被拦截并路由到缓存 API。这种方法足够强大，可以实现 URLs into Indexed DB，但是一旦你有了这些更新的 API，你可能更愿意使用缓存 API。

使用 IndexedDB/PouchDB 离线缓存 css 和 png 等外部资源

Using IndexedDB/PouchDB for offline caching of external resources such as css and png

offlineapps

indexeddb

pouchdb

angular