service worker server image cache

Question

hi I'm new to service workers and I have added a service worker for my angular project.

I went through. https://angular.io/guide/service-worker-intro anguar doc.

my service worker is working and it only cache the app shell. the most of images are requested using and a server request and showing in my application. how can I cache these images in my application using service workers. *the images can be changed time to time.

example URL: http://localhost:1337/templates/viewWebImages?userId=5b20990f60dcc306c398b322&appId=5b851aff5f78be788b1050e5&1536906941235&images=secondNavi/3.png

http://localhost:1337/templates/viewWebImages?userId=5b20990f60dcc306c398b322&appId=5b851aff5f78be788b1050e5&1536906941235&images=secondNavi/3.png — Dilakshan Sooriyanathan, Sep 14 '18 at 08:34
Edit your question and mention your image url pattern. I'm just writing the solution for your case. — Fartab, Sep 14 '18 at 08:36
localhost:1337 is a separate service or the same which serves angular app itself? — Fartab, Sep 14 '18 at 08:44

Fartab · Answer 1 · 2018-09-14T09:33:24.317

1

In ngsw-config.json you must specify the url pattern of your images and set cacheConfig for the images.

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }],
  "dataGroups": [
    {
      "name": "images-api",
      "urls": [
        "http://localhost:1337/templates/viewWebImages**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "timeout":"10s",
        "maxAge": "1d",
        "maxSize": 100
      }
    }
  ]
}

edited Sep 14 '18 at 09:33

answered Sep 14 '18 at 08:47

Fartab

4,725
2
26
39

its not working . it shows the caching files in networks with file type "fetch" and missing when app goes offline. basically not caching. ;/ – Dilakshan Sooriyanathan Sep 14 '18 at 09:13
sorry, there was a mistake in image url, see the answer again, check image url to be "http://localhost:1337/templates/viewWebImages?**" – Fartab Sep 14 '18 at 09:19
still no luck ;/ – Dilakshan Sooriyanathan Sep 14 '18 at 09:28
mybe you need dataGroups for images api, check it again. – Fartab Sep 14 '18 at 09:33
its working bro. I have added some pre-load to load images from my ts component and append to my DOM. link https://stackoverflow.com/questions/10863658/load-image-with-jquery-and-append-it-to-the-dom and its working :D – Dilakshan Sooriyanathan Sep 14 '18 at 09:54

service worker server image cache

1 Answers1