Working on an app that plays audio files of lectures. The website, build in Xojo, has been running successfully for about a year.
There are a number of resources for each lecture:
JSON file with title, sub-title, speaker’s name and affiliation, lecture date etc… the text information that I need to display.
Keyed to the same root name as the JSON file is a profile picture, banner picture, and one or two MP3s (two when a Q&A session has been recorded).
From the server I can quickly determine what resources I have available to alter the GUI.
By checking for zero/one/two available MP3s, I know if the lecture has not been uploaded (it’s in the future), if I have a simple audio control, or if I need to put up a toggle so the user can select the main lecture of Q&A session.
Now I’m building the iOS app.
I need to decide if I want to download all the individual files as needed (lazy load) or collect a binary file of all the bits and pieces, excluding the MP3, or in the middle (download a single JSON with all the components).
My impulse is to create an archive file of some kind and download it in one go, anytime the user refreshes, and only load the MP3, via a HTML Viewer control, when they want to play.
I don’t know if this is a good approach or if there is a rule-of-thumb way I should be following.
I also don’t know what would be the best choice for an iOS compatible archive file that could include JSON + PNG.
I know I can come up with a strategy myself and implement, but I’d like to learn from someone else’s mistakes or successes.
Well depending on the total size of your json files and png files, you can DecodeBase64 and EncodeBase64 (i believe iOSKit has those functions for iOS) to encode the PNG to be embed inside the JSON file.
I think the easiest approach is to download the single JSON file along with all components. Lazy load seems like a lot of work that might be unnecessary.
Maybe do some calculations on download sizes for single package download and see if seems reasonable to do in a mobile environment? Seems like you have the data to be able to do that now.
I think all the JSON files and image resources, uncompressed, would be less than 6mb. In a couple years it could grow to 10mb.
I could imagine downloading a composite JSON file that would have a version number associated so I could determine if the graphics images needed to be updated or not. That would make it a max of two files to download (if I combined the graphics in one archive) with the single JSON file being really tiny.
@Derk Jochems , I considered this too. I may do that.
For the mobile version I’d make sure your images are as small as possible. Asynchronous calls for summaries/images will help you achieve faster loading UI in terms of perception.
Async call to get list of active lectures
Add each result to table
Async call for each item to fetch summary.
Async call for each item to fetch images.
You don’t want the app to appear (or actually) lock up on terrible connections.
You want your app to load as fast as possible, even if the images aren’t downloaded.
Best is to follow Phillip’s recommendation.
While an image is loading, use a placeholder/skeleton image like Facebook and many news apps do while loading content.
I also recommend compressing all images with https://imageoptim.com/ to reduce file sizes (works great on PNG files too)