Как взаимодействовать с активом SVG в автономном Progressive Web App?

Question

Я занимаюсь разработкой PWA с VueJs и последней версией Google.Как вы можете видеть здесь , работник сервиса выполняет свою работу и кеширует 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 для загрузки ресурса независимо от того, находится ли он в одном источнике (из соображений безопасности?).

Каковы мои альтернативы, поскольку мы не можем взаимодействовать с объектом SVG с помощью тега IMG.

Answer 1

После многих тестов и некоторого поиска я подтверждаю, что в прогрессивном веб-приложении следует избегать тегов object и embed с атрибутом src. Потому что по непонятным причинам в спецификациях говорится (хотя это и не нормативно), что браузеры должны пытаться загружать ресурсы по сети, не пытаясь сначала извлечь кеш. Даже если актив находится в том же месте. Тогда, если вы не в сети, приложение не может работать.

Лучшее решение - встроить содержимое SVG (т.е. скопировать / вставить или включить в HTML-страницу), если вы хотите взаимодействовать с элементами SVG.