Reputation: 61
currently i am storing images as base64 string localy in my cordova app inside a sqlite database to get offline support. Does anyone know if it is better/faster to store them as file with the cordova-plugin-file? Or ist there a better way to store images for offline support? Any advice or experiences in that topic? Thank you
Upvotes: 3
Views: 1749
Reputation: 30356
It depends on how you are using the images and how important performance is to you.
In my own Cordova-based apps, I'm downloading map tile images for offline use and using HTML5 canvas to display them. So in my case, performance is important to ensure that pinch-zooming/panning of the map is smooth.
In my solution I use cordova-plugin-file-transfer to download a zip containing the images to cordova.file.cacheDirectory
(see cordova-plugin-file directories). Then I unzip it to cordova.file.dataDirectory
using cordova-plugin-zip. My app reads the image data from file by creating new Image()
objects in Javascript and setting the src
attribute to the local path of images within cordova.file.dataDirectory
. I then use the HTML5 Canvas drawImage()
function to copy the image data to the canvas.
The performance of this process is highly efficient, giving smooth panning/zooming of map tiles on Android and iOS devices.
However, due to lack of support for the file://
protocol in iOS's WKWebView, I am forced to continue using UIWebView for my apps on iOS (no cordova-plugin-wkwebview-engine
for me).
I have tried a few workarounds for WKWebView, including reading images via the local webserver bundled with the WKWebView plugin (i.e. http://localhost:8080/path/to/myimage.png
), reading images as an array buffer via cordova-plugin-file
and reading images as an base-64 via cordova-plugin-file
, but all have proven unperformant to the point the map becomes unusable.
My suspicion is that your technique of storing and retrieving image data from a SQLite DB is also not performant - storing blobs of binary data is not what SQL databases were designed for. However, performance may not be so much of an issue in your case, so your solution may suffice.
Upvotes: 2