Angular Service Worker offline support not working when deployed on tomcat

Question

I have an angular app which we are deploying on tomcat(using war). I am adding the offline support to the app using angular-sw. The application is accessed using the context-path(say showcase-app)

The problem which I am facing right now is that when I try to access app(offline mode using chrome dev tool) using below urls, then its working fine:

http://localhost:8080/showcase-app/

http://localhost:8080/showcase-app/index.html (redirected to http://localhost:8080/showcase-app/)

When I press F5, then I am getting http 504

If I try http://localhost:8080/showcase-app, 504 error is thrown

I feel that its something to do with the routing but not sure what exactly the problem is.

Here is my generated ngsw.json file(Remove the unnecessary css and js urls)

{
  "configVersion": 1,
  "timestamp": 1565693252354,
  "index": "/showcase-app/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/showcase-app/favicon.ico",
        "/showcase-app/index.html",
        "/showcase-app/main-es2015.f5103b4162e6ae00889a.js",
        "/showcase-app/main-es5.0b19cc7e5eb478145768.js",
        "/showcase-app/polyfills-es2015.e35a976998ea3f8206df.js",
        "/showcase-app/polyfills-es5.6e97d82e42cdf0e046a3.js",
        "/showcase-app/runtime-es2015.3d53808bc2188f4243c7.js",
        "/showcase-app/runtime-es5.f1b869bd6638a324a133.js",
        "/showcase-app/scripts.385aa2cec8cdc651bfad.js",
        "/showcase-app/styles.5b950d38f1d7a3ba6506.css",
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/showcase-app/CardObject.f4ac54620cd0f92eb623.png"
      ],
      "patterns": []
    }
  ],
  "dataGroups": [],
  "hashTable": {
    "/showcase-app/CardObject.f4ac54620cd0f92eb623.png": "425c1e1cfed36bea7d7d3637fa95c147bd5480d3"
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

I am using Angular 8

I don't think this problem has to do with PWA. This problem is likely because you are deploying in a sub url. Probably you need to specify this in base and .htaccess — SGalea, Aug 13 '19 at 12:29
@SGalea, Can you please clarify a bit more? Where I need to specify and what? I am using Apache tomcat server and not sure whether .htaccess file is available to it or not. — Vishal, Aug 13 '19 at 12:36
Replicate the issue on stackblitz.com because I'm just taking a guess. The thing is for your index.html to be under showcase-app you have some customizations that we also need to know in order to help you — SGalea, Aug 13 '19 at 12:41
Also PWA's don't work well unless https. Try to deploy directly under http://localhost:8080 without sub-folder to start troubleshooting. — SGalea, Aug 13 '19 at 12:52
I am trying to reproduce the issue at stackblitz.com but I think its something to do with the tomcat deployment. Also I can't deploy directly under tomcat as it try to deploy all the subfolders separately — Vishal, Aug 13 '19 at 13:08
I do not have TomCat to test on but usually when it i sunder a sub-folder and a refresh issue it is usually the same answer I gave here also. However try without a PWA as they don't work well if not served over https https://stackoverflow.com/questions/57472330/why-page-show-404-when-manually-refreshing-url-in-browser-angular-7-on-jboss-ser/57475117?noredirect=1#comment101426018_57475117 — SGalea, Aug 13 '19 at 13:45
Without pwa, refresh is working on my app. It may be with the routing in respect to the service worker. Any idea how to configure fallback routing angular service worker? — Vishal, Aug 14 '19 at 06:45
check your network tab and to the F5 and see if it is trying to access the back-end — SGalea, Aug 14 '19 at 06:53
Also check if your service worker is being registered in your browser. if you are not running it in https you will have problems — SGalea, Aug 14 '19 at 06:59
These are the 2 entries in the network tab. `⚙ showcase-app/ GET (failed) fetch ngsw-worker.js:2709 0 B 2 ms ⚙ ngsw.json?ngsw-cache-bust=0.8220167373795033 GET (failed) fetch ngsw-worker.js:2709 0 B 2 ms` — Vishal, Aug 14 '19 at 07:04
Service worker is registered...I am accessing it on localhost — Vishal, Aug 14 '19 at 07:07

score 0 · Answer 1 · answered Feb 07 '20 at 19:46

According to this doc you'll need https to work with service workers... anyway if you try it in your local tomcat it will work...

https://developers.google.com/web/fundamentals/primers/service-workers/#you_need_https

Found in: https://stackoverflow.com/a/56376214/5360905

Angular Service Worker offline support not working when deployed on tomcat

1 Answers1