Nginx Proxy serving PWA offline.html

user_1506545 0
Viewed 161

I have configured Nginx as Reverse Proxy in front of Vaadin v21 running on Tomcat. Vaadin is configured with @PWA(..., offlinePath="offline.html"). If Tomcat is offline a 502 Bad Gateway is thrown and displayed by Nginx pointing to its own /50x.html resource. This error handling can be disabled inside nginx.conf. I then expect offline.html to be served from my browsers local storage (cache). However this is not the case. Nginx still serves a default 502 page.

Is it possible to have Nginx reference my browsers local cache just as when I am not having a reverse proxy in front?

If this is not possible I guess I have to create a 502.html and configure it to be served by Nginx as it's own resource.

nginx-reverse-proxy progressive-web-apps vaadin nginx
1 Answers

Have you considered asking nginx to serve as a caching proxy? Based loosely on this example, I made a few alterations and here is what I use:

http {
  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:50m inactive=1d;
server {
  location / {
    proxy_pass             http://1.2.3.4;
    proxy_set_header       Host $host;
    proxy_buffering        on;
    proxy_cache            STATIC;
    proxy_cache_valid      1m;
    proxy_cache_use_stale  error timeout invalid_header updating http_500 http_502 http_503 http_504;
    }
  }
}

You will certainly want to modify the proxy_pass URL, and likely the proxy_cache_path path. Some other values that warrant attention:

  • I set the shared zone to contain up to 50 megabytes of data. You may adjust that number to your liking.
  • I set inactive to 1 day. After 1 day, the cache will be retired.
  • I set proxy_cache_valid to 1m -- after this, the cache will be considered stale.

The most important directive above is the proxy_cache_use_stale. This, I believe, solves the problem you identified: when the app is offline, and therefore nginx normally yields a 502 error, this tells nginx to instead serve from the stale cache.

user_3630020
Related