Cache Image for Offline Use

Ionic Framework ionic-v3
1

I have added an attribute directive for Ionic 2 applications to cache images for offline use.
Tested on Android and verified working great.

Yay…~!

7 Likes
2

You are great!

I will test in iOS!

Thank you!!

4

Can you explain how to use this?

5

I have a different approach, I am using a sqlite database in order to save the images in base64string.

Please, check my tutorial:
https://playcode.org/how-to-cache-images-in-ionic-2-rc0/

6

This should probably be done with Service workers

1 Like
7

Totally agreed. This should be done using service worker~!

8

Yeah, probably you both are right, but how to do it for offline use?

I’ve tried some solutions and its not working that way and I don’t know why it’s slower than my solution…


9

OK- service workers seem the way to go. I see 2 final include sw-toolbox.
So could anyone help me out with an example?
I am downloading Firebase Storage images and I’d like to cache them? How can I do this?

And what about iOS?

I’d be really grateful for any help

Shane

10

Hi guys,

Please do share if there is any examples/tutorials to explain how to use service workers to cache image/data for offline use. Really appreciate it!

11

ionic-image-loader.

1 Like
12

I’m using this too, now and it’s very smooth, easy to implement and does it’s job

Thanks

Shane

13

In this library in step three it has defined that “Then add IonicImageLoader in your child/shared module(s)”


import { IonicImageLoader } from 'ionic-image-loader';

@NgModule({
  ...
  imports: [
    IonicImageLoader
  ]
})
export class SharedModule {}

What are child/shared modules.

In my project I have only one module which is in app.module.ts file.

14

Then you should be good to go. I expect what it means by “child/shared modules” refers to lazy loading.

1 Like
15

It is giving me error

"has no exported member ‘Renderer2’."
node_modules/ionic-image-loader/dist/components/img-loader.d.ts
import { ElementRef, Renderer2, OnInit, EventEmitter } from ‘@angular/core’;

How can I solve that ?

I am using angular 2 not angular 4

16

I think you answered your own question. That shouldn’t be a very difficult upgrade, though.

17

Does it will affect my angular 2 project Or are there any syntax changes in angular 4 which can affect my code ?

18

Minimal. You can check out the whole changelog history here.

1 Like
20

Why this library requires “serve” command before every build command ?

21

Hi guys.
I followed every instruction (https://github.com/zyra/ionic-image-loader) but I just can’t make it work. My images just won’t show up after I changed all my tags from <img/> to <img-loader></img-loader>. I see the spinners for a while but then they go away and no image is shown.

My images are URL strings stored in a database and retrieved by calling the class property in the view.
For example:
<img src="{{ class.imageurl }}" />.

Any hint? Thanks!

22

If you’re using the DOMSanitizer on those URLs, the way you write it will subtly fail, because interpolation only creates strings. Instead of <img src="{{foo}}">, always prefer <img [src]="foo">.

1 Like