Search code examples
angularangular-service-worker

Angular Service worker Offline showing errors

I am following this angular guide for service workers and have done it verbatim, at least 6 times.

I have followed this tutorial https://www.youtube.com/watch?v=5YtNQJQu31Y as well as this https://www.youtube.com/watch?v=othhfZ0mGjU&t=464s to see if there are any variations maybe.

Everything works well, however when I go offline and refresh I get the errors in the below image.

I have searched all over the web but can't work out why this would happen.

As you can see I have the images and fonts loading in nicely offline, so its doing its job, those items are in my config but why there be the errors for manifest.webmanifest?

I am using http-server on the dist for testing.

Why would it partially work?

I have googled 504 gateway timeout (from serviceworker) angular but I cant make sense of it. I am probably missing something obvious as I have been staring at this for ages.

Any help is appreciated.

I have this as my ngsw-config.json

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

enter image description here

Solution

  • When I look at the tutorials you've pointed out I can't see manifest files. I would try adding:

    "/*.webmanifest"

    to your list of accepted files

    one other solution comes from this website

    where you need to add in angular.json under property assets the reference to your file and also add as a <link> tag reference to your manifest file