如何在离线渐进式Web应用程序中与SVG资产进行交互？

Question

我正在使用VueJ和最新的Google工作箱开发PWA。如您所见here，服务工作者完成其工作并缓存我的应用程序中使用的SVG文件。 LightHouse在PWA部分给了我满分，我可以在线安装和使用该应用程序。

但是，当我离线时，使用SVG资产的零件无法工作并显示后备消息，即此code不会加载资产并显示您的浏览器不支持SVG ：

          <object
            data="static/svg/Khmer_unicode_NiDA_layout.svg"
            type="image/svg+xml"
            id="keyboard-vk">Your browser doesn't support SVG</object>

它不适用于Google和Firefox。如果W3C读得很好，那是因为获取算法使用网络的OBJECT和EMBED标签来加载资产，而不管资产是否来自同一来源（出于安全考虑？）。

由于我们无法通过使用IMG标签与SVG对象进行交互，因此还有哪些选择。

Answer 1

经过多次测试和搜索，我确认在渐进式Web应用程序中必须避免使用具有object属性的embed和src标签。因为出于晦涩的原因，规范说（尽管不是规范性的），浏览器应尝试通过网络下载资产，而不必先尝试获取缓存。即使资产位于同一位置。然后，如果您处于离线状态，则该应用程序将无法运行。

如果您想与SVG元素进行交互，最好的想法就是内联SVG内容（即复制/粘贴或包含在HTML页面中）。