如何在Service Worker fetch方法中获取通过JS POST请求发送的参数

Question

I'm pretty new in the all "Service Worker" thing (yeah I know, almost 2022 and I just get into it).

I'm trying to use it to cache some requests'responses, but as you probably know it can't cache a POST request.

Knowing this, I'll cache it in an other way but I want to be sure I have to cache it, and for this I need to know what is the value of the "data" parameter of the jQuery.ajax() method used in the origine of the fetch triggering.

I actually can't figure out how to retrieve the data parameter with the event object, nor the event.request one. So far I was able to do this :

self.addEventListener('fetch', function(event) {
  const requestUrl = new URL(event.request.url);

  event.respondWith(
    caches.match(event.request)
    .then(function(response) {
        if(response) { console.log('return cache '+requestUrl.href); return response; }
        
        console.log('return classic + save');
        return fetch(event.request).then(function(response) {
            if(!response || response === undefined || response.status === undefined || response.status !== 200 || response.type !== 'basic') { return response; }
            
            var respToCache = response.clone();
            
            caches.open('thiscache').then(function(cache) {
                console.log('cache opened, saving...');
                cache.put(event.request, respToCache)
                .then()
                .catch(function(error) {
                    console.log('catcherror: '+error);
                    
                    if(event.request !== undefined && event.request.method !== undefined && event.request.method == 'POST') {
                        // Here, I need to get the 'data' parameter from the jQuery.ajax() method in the origin of the fetch
                    }
                })
            })
            .catch(function(error) {
                console.log('Error ! '+error);
            })
            
            return response;
        })
    })
  );
});

I can't find the right method to retrieve this data; thank you for your help and any tip you could have.

Edit:

For information, here's an example of a jQuery.ajax() that triggers the service worker's fetch :

jQuery.ajax({
    url: './ajax.php',
    type: 'POST',
    dataType: 'html',
    xhrFields: { withCredentials: true },
    data: 'param1=value1&param2=value2...', // <-- this is what I want to get
    success: function(reponse, statut) { ... }
});

Answer 1

Found it ! To perform that, you have to .formData() the event.request (a clone of it actually), that will give you all the parameters and their values contain in the data parameter.

self.addEventListener('fetch', function(event) {
  var requestClone = event.request.clone();

  event.respondWith(
    caches.match(event.request)
    .then(function(response) {
        if(response) { console.log('return cache '+requestUrl.href); return response; }
        
        console.log('return classic + save');
        return fetch(event.request).then(function(response) {
            if(!response || response === undefined || response.status === undefined || response.status !== 200 || response.type !== 'basic') { return response; }
            
            var respToCache = response.clone();
            
            caches.open('thiscache').then(function(cache) {
                console.log('cache opened, saving...');
                cache.put(event.request, respToCache)
                .then()
                .catch(function(error) {
                    console.log('catcherror: '+error);
                    
                    if(event.request !== undefined && event.request.method !== undefined && event.request.method == 'POST') {
                        requestClone.formData().then(formData => {
                          // Do whatever you want with formData, parameters are here :)
                        }
                    }
                })
            })
            .catch(function(error) {
                console.log('Error ! '+error);
            })
            
            return response;
        })
    })
  );
});