self.addEventListener('fetch', function(e) { }) is not working

user_5276306 0
Viewed 5439

I have a doubt in PWA and will be glad if someone helps me with that. In my PWA I don't have any problem with storing static files like HTML, JS & CSS. But am facing Issues on dynamic data. i.e : my self.addEventListener('fetch', function(e) { }) is not getting called, but other functionalities are working fine i.e: 'install' and 'active' event.

to be more particular, I am using @angular/service-worker which worked fine but I created another sw file called sw.js. In my sw-js I'm listening to the events like 'install' 'active' and 'fetch'. My sw.js fetch is not getting called whereas the other two methods work well. But while fetching the ngsw-worker.js's fetch method alone gets called.

The thing I need is to make CRUD Operations in PWA with angular.

Thanks in advance!

angular-service-worker service-worker-events progressive-web-apps
1 Answers

You can do the dynamic caching like below , the service worker will intercept every request and add in to the cache.

self.addEventListener("fetch", function (event) {


    event.respondWith(
      caches.open("dynamiccache").then(function (cache) {
        return fetch(event.request).then(function (res) {
          cache.put(event.request, res.clone());
          return res;
        })
      })
    )
  }

Note : You can't cache POST Requests Can service workers cache POST requests?

user_16685010
Related