Cache and store external dynamic html content(with images)

Suppose contents are loaded to the app through fetching html content from server, like this:

this.http
  .get('http://example.net/somecontent.html')
  .map(response => response.text())
  .subscribe(html => myVal = html);

How would you cache the entire content with the image downloaded to the device locally, so you can access the content even when internet is not available?

Even if I save the contents into a variable and stored as localStorage, user still need internet access to render the images in the content because it’s just plain html code.

Furthermore, localStorage might not have enough memory to save everything, if I use SQLLite instead, how would you locally cache the images in the content?

Hi,

To cache image and save it with the ionic storage (instead of SQLite you dont need to manipulate SQL command) I convert them into base64. You can see an example here : https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

Thanks @Eclek

Let me try to explain this to see if i get it right.
So basically I am going to extract the images and turn them into base64, then store the whole content into a variable as text to be cached and normally rendered as html for view, right?

I am wondering:
Ideally it should be done on the server side, but if I couldnt do that,
how may I isolate and replace the image url links then replace them with base64 in the app?

I am gussing there’s some sort of function in angular2 to do some plit and replace string, but I could get the hold of how it can be done dynamically, any help?

in Javascript it would look sth like this:

cachedContent.replace(new RegExp(someImage, 'g'), someBase64);

What could I do to make Angular2 find every image in the string => call a function to turn each into Base64 => replace and insert back to places where it should be??

My apology in advance if this sound like a stupid question…:blush:

Regular expressions are simply not going to work here. I would look at something like node-htmlparser.

I am trying to use ionic storage to cache Firebase Storage images. Will I need to change the Access-Control-Allow-Origin to not get a CORS error? Can you post a plunker on how you method works in ionic?

Can we user updateMetaData() for cache? https://firebase.google.com/docs/storage/web/file-metadata