svgprogressive-web-appsservice-workerfetch-apiservice-worker-events

PWA, SVG, and the <object> element


I've created a PWA (Progressive Web Application) that uses an object tag to load an file called icon.svg for display. I've added icon.svg to the cache. App successfully installs on device (Android phone). However, when I shut down internet connection on device and launch the app, the SVG does not display. When the connection is on, the SVG displays just fine. I've also added logging to the service worker's fetch event to see if a request for icon.svg is being made. It is not (I verified this by changing the object tag's data attribute to a different filename and no request gets logged). Does object not issue a fetch that can be intercepted? I know I can resolve the issue by putting SVG inline or creating a CustomElement, etc. So workarounds are not what I'm concerned with. I'd like to understand if this is just a peculiar (but intended) behavior that someone else has come across.


Solution

  • Library Affected. workbox-sw

    Browser & Platform. all browsers.

    Issue or Feature Request Description: Is there a way to cache SVG files used as object element data source?

    What I want is a working offline interactive SVG (having javascript inside a script node of it's own.