Local file (image) storage strategy

Ionic Framework ionic-v3
1

Hey All,

I wanted to get some feedback on my local file storage strategy for storing images, and to see if there is a better way of doing it. I’m using Firebase (db & storage)

I want to pre-load a bunch of images and store them on the device so they load offline and hopefully quicker
the second/third/forth time etc. As an example I currently upload the users profile image in an online (browser base) admin area. When my app loads it gets the url for the image from the db on firebase.

My thoughts were to hash the image url and then check to see if a file which has the hash as a name exists in the local file storage. If it does, serve up the image from local storage, otherwise download and save the image locally. This way I can ensure if the image is updated, I’ll know to update the local storage.

I would love to hear from anyone who has done something similar? or if there’s a more efficient way of doing this?

2

I have seen some apps where the first thing they do after being installed is download a large data file. I don’t know where this is put - but judging by the download size it is larger than the limit allowed in local storage.

1 Like
3

Yeah, there’s a good chance the image sizes combined could easily be larger than local the storage size.

4

At least on Android I’m using https://github.com/zyra/ionic-image-loader which provides you with some caching strategy. Some says it doesn’t work on iOS. As to PWA the premade service worker file provides you with an on-the-fly cashing strategy (virtually any resource you get from the internet is cached for the next uses, pictures, javascript, fonts). To artificially pre-cache everything is not the option as it ruins your PWA performance score. Maybe the static picture on the default start page, and some minor .png jewellery would make sense.

As to the size where its possible build a 3:4 or 6:9 standard wrappers around your images, so the text/page wont change once you finally get the picture. http://andyshora.com/css-image-container-padding-hack.html

1 Like
5

Thanks, yeah i’m probably going to look at rolling my own solution. There are potentially 20 or so images that will be around the 2-3Mb range. But that link is helpful for pre-loading my app images so thanks :slightly_smiling_face:

6

I have been doing a bit of research on this and I think I have found the solution.

The following describes where the data can be saved - it refers to android but I am assuming the same applies to IOS.
https://developer.android.com/guide/topics/data/data-storage

Ionic provides codes which will save files (native file) to the locations described in the link above: (click on the words Ionic Framework)

1 Like
7

So I’ve run into a bit of a hiccup trying to save the local file url back to my array of items. Here’s the scenario

I get a list of items from my Firebase db. Each item has a number of images (among other data). Each image has a image name a url (which is hosted with Firebase Storage) and a few other bits of information about the image.

I need to store the item data in local storage on the device for offline usage. I also need to check to see if each of the images in each of the items has been downloaded to the device. If it has i need to store the local url to the file in the item data as well.

Whats the best way to update the array of item data from within the checkfile promise? or from the fileTransfer.download promise if the file hasn’t been saved locally yet. I need a way to update just a portion of the item array without overwriting any other updates that are being saved at the same time.