I have images which all load on page load (SPA). Those same images are used in several modals. I’m working on a PWA where I’d like users to be able to view data offline. The initial images are all available offline, but the ones in the modals are not if the modal for that record hasn’t been opened. Is there a way to use the same cached image from the front page in the modals?
Thanks for any pointers!
What cacheing mechanism are you using for the PWA? Workbox?
I use Cloudinary for the images.
The image sources are dynamically created and they are in a repeat on the front page. The same src is dynamically created in the modal, but ------- Here is where I thought to myself, “are they exactly the same?” - and come to find out they were slightly different. Changing the modal image src to be created exactly the same src as the repeat image now shows offline!
I’m totally new to PWS so not sure what you mean by “cacheing mechanism”. I’m using data views for the data, and the images cache themselves as long as they’ve already been loaded. I’ll have a look at Workbox to see what that’s all about though.
Thanks!!
I’ve not used Cloudinary but from a quick look, it seems to be more of a CDN which means it manages the files but they are not actually ‘stored’ on the device the user has.
To do what I think you want, you will need to use a service worker to create and manage cached files (html, scripts, images) so that the user can carry on offline. I have used Workbox before to do this. It will also have the benefit, if done correctly, of allowing users to install your app as a full PWA.
You will need to create a manifest, service worker and webapp script as well as making some modifications to the meta tags and header code. It’s not to extreme and I think this thread might be a good place to start:
(it was created a little while ago and a few things have changed in the Wappler UI, but it should give you a good idea to work from)
I already have the service worker and manifest working and the PWA installed on my phone. All working great! I just couldn’t figure out how to use those same images which turned out to just be an issue of them actually needing the exact same url for the image source (you can do lots of fancy transformation stuff with Cloudinary, but each different image would need to be cached). It’s all working beautifully now. Thanks for your assistance!