How to cache images in Meteor?

Question

I'm building a mobile app using Meteor. To allow for offline usage of the app, I want the app to be able to download a large-ish json file while online, then access the data in the json file, written to MongoDB, while offline.

This works fine. However, in the downloaded json file, there are plenty of references to online images that won't display in the app once the app is offline.

So, I want to be able to download (a selection of) the images referenced in the json file to the app, so that the app can access them even when offline.

(Downloading images could happen in the background for as long as a connection is available.)

There's an implementation of imgCache.js available on Atmosphere, which fails to initialize for me.

I suppose it's theoretically possible to individually load each image to a canvas, save the canvas content to MongoDB, then load the content when needed. Info on some of this is here. But, this feels rather convoluted and, if really feasible, I would expect someone to have done this before with success.

How can I do achieve caching of images for offline use in Meteor?

Answer 1

So, you've probably already read this article about application cache.

If the images are static, you can just include them in the manifest. Be sure you understand the manifest and cache expirations (see the article).

If the images are dynamic, you'll find some techniques to store images in local storage

If that's the case, this may be what you want.