Displaying SVG in Offline(no network) mode

Question

Whenever there is no internet connection I want to display an SVG, but the problem is that the SVG is not loading in offline mode. I am using react-detect-offline library to detect network (Offline/Online).

Is there any way to preload the SVG or using SVG in offline mode in javascript or React.

 <Offline>
     <OfflineContainer
         offlineMessage="It looks like you're offline. We'll keep trying to reconnect."
         iconSVG={this.props.iconSVG}
     />
</Offline>

The offline message is displayed properly but the SVG does not load whenever I go offline.

P.S- I am sending SVG as a prop to my offline component.

Answer 1

Use the service worker to cache the svg. Include svg with prefetch attribute to load it even if not needed. Then, when your service worker runs, even without active connection, you can access the svg.