angular pwa does not work on local iis when offline

Question

I trying to achive the following.

Angular pwa with angular version 6 and 7 works fine when I follow the online guides. I create new ng app be it 6 or 7. Then I execute ng build --prod and then a go to the dist folder and run the command http-server -o And everything works fine as promised.

But when I cretate a local IIS (with the cert that google browser accepts) app by poiting it to my ng dist folder and I browse to https://localhost/test/pwatest the project work fine my manifest json work and the ngsw worker is registered. But when I go offline the tyrex appears. Nothing is fetched. I really google a lot and saw many people having this issue but this problem persists.

manifest.json

{
    "name": "pwatest",
    "short_name": "pwatest",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [{
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    }, {
        "src": "assets/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }]
}

ngsw-config.json

{
    "index": "/index.html",
    "assetGroups": [{
        "name": "app",
        "installMode": "prefetch",
        "resources": {
            "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
        }
    }, {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
            "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
        }
    }]
}

By the way when I perform audit it shows Failures: Service worker does not successfully serve the manifest's start_url, Timed out waiting for fetched start_url.

After all I went with service worker, that was much easier! And no I did not figure it out after some hours of searching online and discussions on github with some experts it was still not working so I left it. — Lecha Bisultanov, Jan 10 '20 at 15:07
Well, i was also struggling on the same, but after bit more research I found the solution and I posted the answer on another similar question https://stackoverflow.com/a/59393706/9444169 . Yes, you are right there wasn't much information on internet about this topic. — vndpal, Jan 11 '20 at 06:22
@Vinod oh thats great info to know thanks a lot for sharing! — Lecha Bisultanov, Jan 15 '20 at 17:10

score -2 · Answer 1 · answered Jul 10 '19 at 06:02

You need to add "data groups" array in the ngsw-config.json file.

In that, you have to mention the API endpoints urls, which you want to cache the response data.

sample ngsw-config.json File:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }],
  "dataGroups": [{
    "name": "get-apis",
    "urls": [
      "https://jsonplaceholder.typicode.com/posts",
      "https://jsonplaceholder.typicode.com/comments",
    ],
    "cacheConfig": {
      "strategy" : "performance",
      "maxAge" : "1d",
      "maxSize" : 100
    }
  }
  ]
}

It will cache the data from both api urls and serve the data it when you are offline.

Hope this helps...

angular pwa does not work on local iis when offline

1 Answers1