Wow! It actually was easier than I expected! Thank you Simon! As you say, you can store some time-to-live in order to know when to fetch an image again. But if you want to force it from your backend (for example, if you update one image and you want your users to have the updated version) in my opinion a good approach would be serving a version number along with the image url, and let the chached-img component refresh the image only in case its cached version number is less than the fetched version number. Just in case someone finds useful this backend-controlled-cached-time-to-live 😂😂😂🙌
I just found out that instead of creating the missing folder in app.component, we can just set 'recursive: true' in the writeFile options. As shown in the documentation.
Hi Simon, first of all i have to told you just one thing: "THANK YOU SO MUCH!!!!" I love all your video, and tanks to you i grow myself in ionic developing. Can i ask you a favor, can you make a video with the implementation of paypal payment in ionic application if exist? thank you a lot. VD
Hey, thanks so much for the insightful video! Just as optional side note: While getting started with Ionic/Capacitor + Angular PWA I wondered if I could also use Cache.put() Web Api instead of using ionic/storage? In theory this should work as well on all platforms then as well? 🤔Guess I have to try... 😎
Regular browsers eg Chrome like you're using here should cache the images automatically, but you have disabled cache in the network tab But does the capacitor webviews in iOS and Android have no cache? And that's why you have to add it manually?
Afaik it will usually try to load images again when possible, so keeping them locally with this approach makes sure you don't send out more network requests then necessary!
@@galaxies_dev I don't understand too why you don't just trust the browser cache... it seems dangerous to cache images on local storage without max-age parameter for example... Thanks a lot for your worek, you are my MASTER!!!!
Thank you very much for this tutorial 🙏. However I had a problem during the implementation. Everything works perfectly on the browser but on my mobile device the convertBlobToBase64 function is not executed and there is no error. I'm confused can you help me please 🙏🙏.
With this approach one would loose the lazy load advantage of ion-image. This is quite good seen when your cache was clear, some images down the list where already loaded but none from the top. How would you combine image caching with lazy loading, without reinventing ion-img? How does this approach compare against caching with service workers? Are there any disadvantages with using service workers for this task? I think they could work maybe quite well with ion-img.
The SW approach would only work on the web or PWA, not inside a native app (afaik). And I guess you would have to kinda reinvent it or check out the source code of ion-img, probably it's not too hard to implement at the end of the day!
First of all thanks for the video it works! But the performance of this method is pretty bad, especially noticeable with low-end phones and a lot of images. Any tip on how to improve this? Images are already compressed.
@@galaxies_dev I was wondering if adding the src directly from fileGetURI would improve performance. Wanted to test it but the method returns a URI that is not usable for anything. It is in the form of [directory]/[filename] Do you know how I can fix it to get a full URI I can use as src?
Dear@@galaxies_dev , I just find out why ! It was because I mixed content : the pwa was running on https and I tried to access pictures with http url ! :)
Wow! It actually was easier than I expected! Thank you Simon! As you say, you can store some time-to-live in order to know when to fetch an image again. But if you want to force it from your backend (for example, if you update one image and you want your users to have the updated version) in my opinion a good approach would be serving a version number along with the image url, and let the chached-img component refresh the image only in case its cached version number is less than the fetched version number. Just in case someone finds useful this backend-controlled-cached-time-to-live 😂😂😂🙌
Yeah that would be a more advanced (and complicated) process I guess but definitely possible!
Very, very useful. I'm going to use this tutorial to cache images in my app. Thanks.
I just found out that instead of creating the missing folder in app.component, we can just set 'recursive: true' in the writeFile options. As shown in the documentation.
Very useful and I'm waiting another video about review of ionic apps, I really enjoy those videos haha.
Coming soon!
Can you do a video on deployment to actual devices for android and ios
Perfect, Simon! u are, the best!
Hi Simon,
first of all i have to told you just one thing: "THANK YOU SO MUCH!!!!"
I love all your video, and tanks to you i grow myself in ionic developing.
Can i ask you a favor, can you make a video with the implementation of paypal payment in ionic application if exist?
thank you a lot.
VD
You are welcome Enzo! And yea, something with Paypal sounds interesting, I'll look into that!
Hey, thanks so much for the insightful video! Just as optional side note: While getting started with Ionic/Capacitor + Angular PWA I wondered if I could also use Cache.put() Web Api instead of using ionic/storage? In theory this should work as well on all platforms then as well? 🤔Guess I have to try... 😎
Actually haven't used that API but think it should work - cool idea indeed!
Regular browsers eg Chrome like you're using here should cache the images automatically, but you have disabled cache in the network tab
But does the capacitor webviews in iOS and Android have no cache? And that's why you have to add it manually?
Afaik it will usually try to load images again when possible, so keeping them locally with this approach makes sure you don't send out more network requests then necessary!
@@galaxies_dev I don't understand too why you don't just trust the browser cache... it seems dangerous to cache images on local storage without max-age parameter for example... Thanks a lot for your worek, you are my MASTER!!!!
Thank you very much for this tutorial 🙏. However I had a problem during the implementation. Everything works perfectly on the browser but on my mobile device the convertBlobToBase64 function is not executed and there is no error. I'm confused can you help me please 🙏🙏.
Hmm any error logs why it's not executed?
Hi Simon, I have issue of user experience with ionic, I want ionic to have good UI as React native has..
Hello Symon, is this demo available on github?
With this approach one would loose the lazy load advantage of ion-image. This is quite good seen when your cache was clear, some images down the list where already loaded but none from the top. How would you combine image caching with lazy loading, without reinventing ion-img?
How does this approach compare against caching with service workers? Are there any disadvantages with using service workers for this task? I think they could work maybe quite well with ion-img.
The SW approach would only work on the web or PWA, not inside a native app (afaik). And I guess you would have to kinda reinvent it or check out the source code of ion-img, probably it's not too hard to implement at the end of the day!
Hey, try make a pipe that returns a observable.
This is working fine in android but getting filesystem plugin not implemented on ios
Thanks Simon, great tutorial :) Is image caching needed when getting images from Firebase storage ?
It's never necessary, always optional to improve your performance!
First of all thanks for the video it works!
But the performance of this method is pretty bad, especially noticeable with low-end phones and a lot of images. Any tip on how to improve this?
Images are already compressed.
Besides reducing the size of images I guess there is not much you can do!
@@galaxies_dev I was wondering if adding the src directly from fileGetURI would improve performance. Wanted to test it but the method returns a URI that is not usable for anything. It is in the form of [directory]/[filename]
Do you know how I can fix it to get a full URI I can use as src?
I'm a bit confused. Can I use these codes for ios and android by capacitor?
Sure you can with Capacitor!
@@galaxies_dev This video is great.
Does anyone having issue on android / ios device? It stop at reader.readAsDataURL(blob) function.
I am looking to reproduce this method exclusively on angular, is it possible?
You could simply use localstorage or indexedDB!
@@galaxies_dev thank you for your answer, I watch your video less than 50 times, we love you
Great tutorial ! But not working for pwa in iOS and Android browsers :'(
Actually the Filesystem plugin should work fine in a PWA as well - why isn't it working for you?
Dear@@galaxies_dev , I just find out why ! It was because I mixed content : the pwa was running on https and I tried to access pictures with http url ! :)
Hi, Does anyone having issue on Android / iOS device?
It stop at reader.readAsDataURL(blob) function and without any error.
I have the same issue, did you find a solution?
idk
Request plugin fake gps on capacitor... Thx
I want ionic to be like react native..