Angular : service worker configuration

Question

I'm trying to add pwa capabilities to a website running on angular 8. I followed a lot of tutorials, official and unofficial ones and I don't understand what I'm doing wrong.

ngsw-config.json is like this :

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js",
          "/*.min.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

I can see in Chrome dev console Application tab that the service worker is registered and running.

But I've got two main problems.

When I pass my browser in offline mode and reload the page, I've got a chrome error message :

It seems the index page can't be served, the service worker is still registered and running.

I can see in online mode that I get the index page from the Service worker, so why is it not working in offline mode ?

In online mode, I can see from the network tab that every requests are cached, even the ones from the api. But I did not configure dataGroups in ngsw-config.json so why is this happening ? Same for external js files not specified in the url array of assetGroups.

The site can be tested here : https://dev.ecni.fr/

Thanks !

EDIT : Same problem when trying with different up to date browsers on two computer running windows. However, working fine with chrome on a mac. What's happening with windows computers ?

Linwe, I'm having the exact same problem, and see the same issue when going to https://clubup.it/, just as you did. Did you ever find a solution? — JRS, Feb 25 '20 at 16:51
I could find the problem going on https://url_of_site/ngsw/state. I could see that the index.html served had not the same hash than the one cached. I then compared the 2 files and found that it was caused by a chrome extension (kaspersky antivirus) that added a small js code on each page, then the file was not exactly the same, and the hashes did not match. It caused the service worker not able to do its things. — Linwe, Feb 27 '20 at 13:06

score 1 · Answer 1 · answered Nov 22 '19 at 13:28

I can see your website in Chrome offline mode, it looks fine. I also compared with my ngsw-config.json file:

{
  "index": "/index.html",
  "assetGroups": [
  {
    "name": "app",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/index.html",
        "/manifest.json",
        "/browserconfig.xml",
        "/assets/images/favicon/**",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/*.woff",
        "/*.woff2",
        "/*.svg",
        "/*.ttf",
        "/*.eot"
      ]
    }
  }]
}

Everything looks pretty similar except the manifest.json. Is what you have a new format? I'll also share my manifest.json file to be complete, it may be useful:

{
    "name": "ClubUp! Volley Network",
    "short_name": "ClubUp!",
    "theme_color": "#00aeef",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "/search?utm_source=homescreen",
    "dir": "ltr",
    "lang": "it",
    "orientation": "portrait",
    "description": "Cerchi un giocatore o una squadra? Fai un salto in ClubUp! per trovare il tuo team ideale. Provalo, è semplice da usare.",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "assets/images/pwa/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-152x152.png",
            "sizes": "152x152",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "assets/images/pwa/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
  }

The related website is this if you want to compare what's happening in the network tab: https://clubup.it/

Thank you for your answer ! I see the same problems with your website (error when offline after a first successful load, api requests cached), so maybe it's a computer or chrome related problem... I'll try with another one. — Linwe, Nov 22 '19 at 13:44
the webmanisfest file is the one generated by angular cli, i think it's a new format introduced recently : https://developer.mozilla.org/en-US/docs/Web/Manifest — Linwe, Nov 22 '19 at 13:47

Angular : service worker configuration

1 Answers1

Linked