XMLHttpRequest within service worker

Question

I'm trying to create a push notification system on chrome. I have a php that fetches data from mysql and echoes a JSON, now I'd like to call a function getJsonCode() that it's activated when a push notification arrives and reads the JSON data.

Within my service worker I've created the standards functions. The problem is that when I create getJsonCode with a XMLHttpRequest it tells me it's not defined

self.addEventListener('install', function(event) {
  self.skipWaiting();
  console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
  console.log('Activated', event);
});
self.addEventListener('push', function(event) {  
  console.log('Push message', event);
  getJsonCode();
  );
})

getJsonCode() {
  codeRequest= new XMLHttpRequest();
  codeRequest.open('get', 'myfileWithJson.php', true);
  codeRequest.send();
  dataJSON = codeRequest.responseText;
  console.log('rispostaJSON');
}

Is it possible to call an external file like this within a service worker or are there some kind of limitations? Because I don't get why this isn't working

Answer 1

Instead of XMLHttpRequest, you can use the new Fetch API. XMLHttpRequest has been deprecated and is not available in the service worker scope.

There's an example of exactly what you want to achieve in this ServiceWorker Cookbook recipe.

Answer 2

You can use fetch() instead of XHR,as fetch() is a new API which allows you to make requests similar to XHR's, but has a simpler / friendly API.Read more about fetch here. Try this:-

self.addEventListener('push', function(event) { 
    console.log('Push message', event);
  event.waitUntil(
fetch('/myfileWithJson.php').then(function(response){
return response.json();
}).then(function(data){console.log(data);
    return self.registration.showNotification(data.title, {
      body: data.body,
      icon: 'images/icon.png',   
      tag: data.url
    
    });
}));
});