Best way to cache images in PhoneGap iOS

Question

I am creating a PhoneGap ios application that is used to import data from the server using JSON, this data contains the URL of the image, I have already used it to cache data in local storage, so I can use it when the application leaves the Internet, but I'm worried about what is the best way to cache images.

I thought about converting images to data-uri and saved them in IOS DataBase.

Consult if this solution is workable or are there other best solutions?

Answer 1

This blog post should set you on the right path https://www.raymondcamden.com/2012/01/19/Downloading-files-to-a-PhoneGap-application-Part-1/

Answer 2

The Phonegap API has a file system that you can use to store images downloaded from remote servers, what could be your best option?

The files will be stored in the Application Documents folder, so you will need to find this path (which differs from each installation to the next), then save the file locally and save the path to localstorage.

Here is a snippet of code. Firstly, it creates and saves the dummy.html file to train the local path - then it loads the file -

function downloadFile(webURL,webFilename){ window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, function onFileSystemSuccess(fileSystem) { fileSystem.root.getFile( "dummy.html", {create: true, exclusive: false}, function gotFileEntry(fileEntry){ var sPath = fileEntry.fullPath.replace("dummy.html",""); var fileTransfer = new FileTransfer(); fileEntry.remove(); fileTransfer.onprogress = function(result){ var percent = result.loaded / result.total * 100; percent = Math.round(percent); console.log('Downloaded: ' + percent + '%'); }; fileTransfer.download( webURL, sPath + webFilename, function(theFile) { console.log("download complete: " + theFile.toURL()); showLink(theFile.toURL()); }, function(error) { console.log("download error source " + error.source); console.log("download error target " + error.target); console.log("upload error code: " + error.code); navigator.notification.alert('Seems to be an error downloading this background. Try again later.', null, 'Error', 'OK'); } ); }, fail); }, fail); } function showLink(localurl){ console.log(localurl); }