Using a.vue file : where to save it and reference

I want to implement an offline image caching system in very much the exact way described in this post :

I don’t know anything about vue and I’m not sure where to save the offlineImage.vue file described. Sorry for my ignorance, please could you advise?

It seems I’m confused. Are there two flavours of framework 7? I’ve not been using vue in that case, everything I’ve written has been in standard HTML. How can I use this offlineImage method without learning vue and re-doing the whole app?

This seems like a good use case for the Cache API. You don’t have to use a service worker but if you did it would be transparent of the web app. If the request fails it could serve an offline placeholder image for instance.

Storing images in localStorage seems bloated and slow since it’s non-binary and synchronous.

I’ve now been trying to use this, but I’m also finding it difficult to follow the procedure :

Please could you advise me on the best route to take for a simple system where images are stored locally indefinitely and where local images prioritise remote images.

@st643 … what do you mean by this? The main thing I need is for the app to work offline with images but have the options to fallback to remote image download. What would you suggest to me for getting some kind of offline cache in place? I need the process to be as follows:

  • Tries to find in phone cache first
  • If not found, tries to download from remote url
  • if it success, saves to cache and loads from cache on next
  • If it can’t download, displays local-fallback-image.

What would I need to do in order to implement the vue code I linked to in my original post?