javascriptangulartypescriptprogressive-web-appsangular-pwa

service worker affecting non-GET requests when online - @angular/pwa


I added a service worker to my project, and the GET requests work perfectly online and offline.
but i have a problem with non-GET requests when online.
when i load the website using http-server (to activate the service worker),
it seems like the service worker intercepts them. and it never forwards the POST/DELETE request to the server in the same method.
instead of sending DELETE/POST requests to the server, it sends a GET request to the same path, (which is not helpful obviously) and of course the item is not removed: enter image description here

ngsw-config.json: enter image description here

localhost:3000 is the server.

when i'm loading the website using ng serve (without a service-worker) everything works perfectly.

can anyone tell me how i can fix it?


Solution

  • In order to get the fresh response from the cache you need to specify cache strategy (freshness or performance) in the ngsw-config.json file.

    After assetGroups key add below dataGroups:

    "dataGroups": [{
        "name": "GiveAnySuitableName",
        "urls": [
          "/**",
        ],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 100,
          "maxAge": "3d",
          "timeout":"3s"
        }
      }
    ]
    

    Official angular PWA documentation: https://angular.io/guide/service-worker-config