How to download and cache images inside an app


#1

I want my app to be able to download images from the web and store them locally, so that the images can be accessed while the app is offline.
(Then, I want to be able to remove some or all downloaded images and, if requested and when online, download a new batch of images.)

I’m having a hard time finding documentation on how to get my app to download images from the web and store them locally. Any pointers?


#2

I’m looking for this answer as well! No takers yet?


#3

You can use appcache to cache standard browser images. It sounds like that’s not quite what you want though?

You can use ground:db to cache collection data locally, but again, it doesn’t sound quite like your use case (and there’s limited local storage, anyway).

So, I’ve probably not moved this forward at all :smile:


#4

Close but no cigar!

I had an approach for this where you use bindEnvironment to detect the image using slice and then using createWriteStream to write to disc but that’s more of a node approach as opposed to a Meteor approach. Meteor is definitely what we’re looking for.


#5

So, I assume that the option of download server-side, send over the wire (in a collection) and cache on the client using ground:db is not an option?

The only other way that springs to mind is to render the images in the browser on a canvas and then save the object (toBlob or toDataURL) to local storage.


#6

(In response to @robfallows’ first comment.)
I think you’re correct in that the combination of these two is not what I’m looking for. I find the description of both packages a bit abstract, though, and would still love to see a working example.


#7

(In response to @robfallows’ second comment.)
Your second suggestion sounds more practical, as it could in principle be done in the background, slowly picking up new images to the extent the connection is available, while the user can interact with the app. In addition, it doesn’t rely on an additional process running server-side.

Are you aware of a working example, preferably with access to the code?


#8

No - it was just an idea I was offering. I’d be surprised if there wasn’t something out there that could be packaged up. It’s quite easy to render images to canvas, even when they’re not in the DOM - that bit I’ve done before. I’ve not done the conversion from canvas and putting into local storage - but that seems straightforward.

Sounds like a good candidate for a package.