caching images

[vdias38]

• Lazy loading images using Intersection Observer
• zyra/ionic-image-loader: Ionic 2+ Component that loads images in a background thread and caches them for later use. Uses HttpClient from Angular 4+, and cordova-plugin-file via ionic-native wrappers.
  • Add fallback to img tag when loaded in browser
  • Image Cache (Loader) Ionic 2 Example
  • simon Grimm tutorial
• working with imgCache.js and Ionic 3
• ionic3-image-cache: A rewrite of Ionic Image Loader library that fixes the SVG issues, local URL detection and base64 detection yet maintaining all other major features.
• Caching Images in an Ionic 3 Application

[vdias38]

imgcache.js is not well supported and not seems to be a future-proof way.

• PWA: use service workers
• Native: ionic-image-loader

[vdias38]

$ npm install --save ionic-image-loader

Import IonicImageLoader on home module

On /pages/home/home.html replace

<img src="./assets/images/header-clean.png" class="logo" alt="infomobi">

By <img-loader [src]="settings.logoUrl" fallbackUrl="./assets/images/header-clean.png" fallbackAsPlaceholder="true" useImg [imgAttributes]="imageAttributes"></img-loader>
OR set by default settings.logoUrl = "./assets/images/header-clean.png"
Where

1. Include the ImageAttribute model in your .ts
   import { ImageAttribute } from 'ionic-image-loader'
2. Generate an array of ImageAttribute objects

const imageAttributes: ImageAttribute[] = [];
imageAttributes.push({
  element: 'class',
  value: 'logo'
})

[vdias38]

to allow PWA caching we should define an url pattern

How to cache images using service worker

By default any images under ./assets are cached by angular sw

Should add a new AssetGroup to cache uploads img from meumobi

, {
    "name": "uploads",
    "installMode": "lazy",
    "updateMode": "lazy",
    "resources": {
      "urls": [
        "/uploads/**"
      ]
    },
  "cacheConfig": {
        "maxSize": 250,
        "maxAge": "7d"
      }