Locally stored asset not displaying with no internet connection

Get Help
1

Hello,

I have an svg that is supposed to be displayed on an error screen that pops up when there is no internet connection. This svg is a locally stored asset, and I am using Lightning.Tools.getSvgTexture(Utils.asset('icon/path.svg'), 120, 120). When there is no connection, it is just blank as it cannot be fetched and loaded. Is there a way to keep an svg alive in memory so that it can be displayed when there is no internet connection?

Thanks.

2

Hey @myusername ,

Most probably the app still makes a CDN call to fetch asset.

Maybe you can try to inline the asset as a data url. I have not tried this before so let me know if you face any problems.

3

@chiefcll I just want to confirm if this (keeping an svg pre-loaded to use when there is no internet) is possible to do natively with LightningJS before looking into external means

4

If its locally stored I assume the asset is in a bundle installed on the device? If that is the case you’re not accessing the internet and should be able to display it. I’d recommend double checking the path to the asset to make sure its not missing.

Alternatively you could load the asset when the app has internet and keep it in memory and hide it. Then when internet is lost its already loaded.

5

The app is being hosted on a device, so, although the asset is local to the files, it still needs to be loaded/sent to the device. The entire app is not downloaded to a device. The path to the asset is correct, as it works perfectly fine when there is a connection.

I have tried to load the asset on startup, as Lightning will reuse an asset that exists in memory so as to not duplicate it. This worked if the error is presented quickly, but as the asset goes unused throughout using the app, it gets removed from memory, meaning the asset would not display. I was just wondering if there is a way in Lightning to make the asset persist in memory, or if I should just re-fetch and preload the asset per page, or if there is some other way to do it natively within the framework

6

In that case you could follow @imtiaz101325 recommendation. You’d add the SVG as a string in your JS code and then use the string for the SVG…

let offlineSVG = CONTENTS OF SVG FILE;
Lightning.Tools.getSvgTexture(offlineSVG, 120, 120)

Then its always in memory and available.

1 Like
7

Is there in general a way to store assets for offline access?

8

Converting the svg to a blob, then converting that to a dataURL is what ended up working.

For anyone wondering, here is an example solution @imtiaz101325 :

async function convertSvgToDataURL() {
    await fetch(Utils.asset('your/icon.svg'))
      .then(response => response.blob())
      .then(blob => {
        const FR = new FileReader();

        FR.addEventListener('load', () => {
          console.log(FR.result); // save this, this result contains the dataURL
        });

        FR.readAsDataURL(blob);
      });
}

Then, you can use

Lightning.Tools.getSvgTexture(/*the data URL you saved*/, 120, 120),

Now, since you saved the data URL, you can use the asset both online and offline. There’s probably a better way to accomplish this, but this is what worked for me and my purposes.