html2canvas:使用服务工作人员缓存的图像

Question

TL;DR:如何使用ServiceWorker缓存html2canvas处理的图像？为什么不使用现有的ServiceWorker缓存？

我正在编写一个PWA，它也可以脱机使用。它是一个用于创建定制图像网格的应用程序。图像来自外部API，我使用Workbox/ServiceWorker将这些请求缓存到API。

离线功能非常好，但是当使用html2canvas来创建图像网格的缩略图时，它是只工作在线。为了创建截图，html2canvas似乎创建了页面的iframe副本。对于所有图像，--在iframe/屏幕截图中--新请求是完成的，并且不使用来自ServiceWorker的现有缓存。

这个屏幕截图显示了打开我的应用程序的网络流量，其中包含来自API的2幅图像：

​

• 请求(1)是来自ServiceWorker的应用程序加载的图像。
• 请求(2-4)是从html2canvas加载图像的三个步骤，其中最后一个成功地使用了ServiceWorker，但是这些图像在屏幕截图中不可见。

使用现有的html2canvas缓存或其他缓存使ServiceWorker脱机可用的任何想法都是受欢迎的。

我使用的是html2canvas 1.4.1。

Answer 1

我从来没有使用过html2canvas，所以我可能错了，但是如果它正在创建一个<iframe>，那么请记住，iframe建立了一个新的浏览上下文，并且由于安全原因，浏览上下文之间的通信受到了严重限制。

html2canvas创建的iframe应该位于PWA的同一来源，因此您可以尝试使用BroadcastChannel API来让这些浏览上下文(即iframe和服务工作人员)相互通信。

另请参阅：

• 用ServiceWorker缓存iframe请求