如果使用jQuery.ajax或XMLHttpRequest发出请求，则Service Worker获取处理程序不会触发

Question

I am using service workers in one of my apps and want to catch some assets requests in "service worker fetch handler" that are made from jQuery ajax but fetch handler is not triggering for these type of requests (including XMLHttpRequest() ), however, I am able to catch other requests(for js, image etc.) in service worker fetch handler.

The sample code in app.js

$.ajax({
    async: false,
    url: "./Initial.xml",
    dataType: "xml",
    success: function(response) {
       self.initial = response;
    }
});

The sample code in service worker

self.addEventListener('fetch', event => {
    console.log(event.request.url);
    event.respondWith(fetch(myRequest.clone()));
});

Thanks

Answer 1

I also faced a similar kind of issue recently.

You should be checking this code in chrome browser. Because, as of now (Jun 2019) firefox is able to catch the given request in fetch handler.

Coming to chrome browser, its a open bug in chrome. By looking at its recent activity, they are working on the fix.

In mean time, if you want it to be working in chrome, just make it as asynchronous call by passing async flag as true .

$.ajax({
    async: true,
    url: "./Initial.xml",
    dataType: "xml",
    success: function(response) {
       self.initial = response;
    }
});

After this, given fetch handler will be triggered in chrome as well :)