Angular service worker with @angular/pwa package showing `HTTP error 504` when offline

问题

I am working on an angular PWA application. So I added an npm package by ng add @angular/pwa. It is added successfully with no errors.

The generated Manifest is working fine. But I am facing issues with the service worker. When the application goes online it stores all the caches (see attachment) but whenever the application goes offline, instead of serving the request from the service worker it shows the error - HTTP ERROR 504

Here is my ngsw-config.json -

   {
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": ["assets/images/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)"
          ]
        }
      }
    ]
  }

Any help would be appreciable...

回答1:

As we commented, your problem is related with your web server or proxy nginx. Due you are connecting properly with nginx, the PWA offline feature is not enabled in your browser. After understanding what was your problem, I found several configuration that you would use in your nginx to allow a PWA proper behavior in offline case.

In google developers you can add these line in the nginx config file, to allow a PWA behavior:

location ~* (service-worker\.js)$ {
  # tells browsers the service worker scope
  add_header 'Service-Worker-Allowed' '/app';
}

Also I found this configuration file in the Philip Heltweg blog to allow the full behavior of a PWA.

server {
    listen 80;
    server_name _;

    gzip on;
    gzip_types text/html text/css application/javascript;

    root /var/www/;
    index index.html;

    # Force all paths to load either itself (js files) or go through index.html.
    location /index.html {
        try_files $uri /index.html;

        add_header Cache-Control "no-store, no-cache, must-revalidate";    
    }

    location / {
        try_files $uri /index.html;

        expires 1y;
        add_header Cache-Control "public";
    }
}

Well, finally, I found an interesting docker, If you are willing to use docker (of course), to run an nginx web server with the proper configuration in a simple way. Check this out.

I expect this three different approaches solve your problem. Let me know if I can help more!

来源：https://stackoverflow.com/questions/62213355/angular-service-worker-with-angular-pwa-package-showing-http-error-504-when-o

标签

angular

google-chrome

angular-service-worker

http-status-code-504

angular-pwa