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¶m2=value2...', // <-- this is what I want to get
success: function(reponse, statut) { ... }
});
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;
})
})
);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.