53221

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

<h3>Question</h3>

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...


<h3>Answer1:</h3>

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

Recommend

  • Angular service worker with @angular/pwa package showing `HTTP error 504` when offline
  • Update .env value via Laravel
  • Failed to start bean 'inputBindingLifecycle' when using spring-boot:1.5.1 and spring-cloud
  • Reduce float precision using RegExp in swift
  • How does one handle Webhooks in BrainTree
  • Utilizing componentDidMount when switching between different instances of the same React component
  • Tensorflow Object Detection API does not detect objects correctly/does not detect objects at all
  • Is there any simple Java FTP Server libraries that is embeddable?
  • CIRCULAR REFERENCE:java.lang.NullPointerException from DexFileReader
  • Sending/receiving text data from remote server in android [closed]
  • Azure classic cloud service cannot RDP
  • Python multiprocessing using a lock or manager list for Pool workers accessing a global list variabl
  • C, Little and Big Endian confusion
  • wordpress posts_orderby filter with custom table in plugin
  • Converting a self subquery to a self join
  • Multithread python requests [duplicate]
  • how to get the size of the padding at the end of a class
  • How to create mirrored image effect with CSS single element
  • Use awk to convert GPS Position to Latitude & Longitude
  • Convert current tmux session to configuration file
  • yii rewrite url with many sub categories
  • Smarter Removing Unnecessary WhiteSpace CSV
  • Hibernate Caused by: org.hibernate.AnnotationException: Unknown mappedBy
  • Bison does not appear to recognize C string literals appropriately
  • Authorize Attribute Authentication with Postman in Web Api
  • Pandas time series data Index from a string to float [duplicate]
  • Swift manually rotate view controller
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • 'Edit' function for forum posts and such
  • Multiplying polynomials/simplifying like terms
  • java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/SpringDispatcher-ser
  • How to write seo friendly url's using htaccess?
  • using maven pom while creating jar:test-jar some times it says JAR will be empty - no content was ma
  • Content-Type alternative in MQTT
  • how to snap two objects in runtime in unity?
  • Debug `Unexpected end of JSON input Error` on content script