时间戳

首页 > 解决方案 > 如何在离线 Progressive Web App 中与 SVG 资源交互？

svg - 如何在离线 Progressive Web App 中与 SVG 资源交互？

问题描述

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

但是，当我离线时，使用 SVG 资产的部件不起作用并显示回退消息，即此代码不会加载资产并显示您的浏览器不支持 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 对象进行交互。

标签： svgservice-workerprogressive-web-apps

解决方案

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

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

推荐阅读