Hi everyone!
Hope to get some design tips for my app 
I am building an Ionic/Vue app with content stored in a Firebase RTDB with Vuex and Vuexfire client-side. I have a web version where the content is also editable and now I am making a mobile version (without the editing function) where I want the app to be fully functional without internet connection.
My problem is that some of the content includes html (stored as string i Firebase) with img tags pointing to the uploaded images stored in Firebase Storage. All works well in the web-version but as the image tags’ src attribute will point at the absolute path of the files in Firebase Storage it will not get anything when offline.
As I see it I have two options for the mobile version:
-
Preprocess the HTML string (including evaluating the string, which would be ok as the content is from trusted source) and change the src attribute so it is populated with image stored on device. I would also need to sync the Firebase Storage along with the RTDB on device for this.
-
Save images inline as base64 strings in the first place and ditch Firebase Storage. The images will then be a part of the Vuex store (all stored in Firebase RTDB)
The last option has the benefit that everything gets much easier to code (just save Vuex Store when Firebase has updated) and no problems with missing images. But I am concerned that too much will be kept in memory (probably the whole Vuex Store including all images) and eventual crash the app. The app content will probably not be more than 100-200 mb but I don’t really know before that app is used in the wild.
Hope it makes sense
Does anyone have any experience as to how the best solution is in this case?
Best regards
Morten