I am trying to use AJAX to retrieve the details for the push notification I want to display on the users end, but it doesn't work yet.

/*
*
*  Push Notifications codelab
*  Copyright 2015 Google Inc. All rights reserved.
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*      .0
*
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or     implied.
*  See the License for the specific language governing permissions and
*  limitations under the License
*
*/

 // Version 0.1

//'use strict';

console.log('Started', self);

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);

    var title = 'Push message';
    var xhttp = new XMLHttpRequest();

    xhttp.open("GET", ".php", false);
    xhttp.send();
    title = xhttp.responseText;

    event.waitUntil(
        self.registration.showNotification(data, {
            'body': 'The Message',
            'icon': 'images/icon.png'
        })
    );
});

When I use GCM to send a push notification to the client, Chrome gives this error on the service worker:

sw.js:39 Uncaught ReferenceError: XMLHttpRequest is not defined

I am trying to use AJAX to retrieve the details for the push notification I want to display on the users end, but it doesn't work yet.

/*
*
*  Push Notifications codelab
*  Copyright 2015 Google Inc. All rights reserved.
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*      https://www.apache.org/licenses/LICENSE-2.0
*
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or     implied.
*  See the License for the specific language governing permissions and
*  limitations under the License
*
*/

 // Version 0.1

//'use strict';

console.log('Started', self);

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);

    var title = 'Push message';
    var xhttp = new XMLHttpRequest();

    xhttp.open("GET", "https://www.domain.nl/devtest/1.php", false);
    xhttp.send();
    title = xhttp.responseText;

    event.waitUntil(
        self.registration.showNotification(data, {
            'body': 'The Message',
            'icon': 'images/icon.png'
        })
    );
});

When I use GCM to send a push notification to the client, Chrome gives this error on the service worker:

sw.js:39 Uncaught ReferenceError: XMLHttpRequest is not defined

• javascript
• ajax
• service-worker

• Possible duplicate of XMLHttpRequest within service worker – Marco Castelluccio Commented Jul 15, 2016 at 11:38

2 Answers 2

XMLHttpRequest has been deprecated and it's not available in the Service Worker scope. Instead of XMLHttpRequest, you can use the Fetch API.

To do this we can set the method and body parameters in the fetch() options.

 fetch(url, {  
    method: 'post',  
    headers: {  
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
    },  
    body: 'foo=bar&lorem=ipsum'  
  })
  .then(json)  
  .then(function (data) {  
   console.log('Request succeeded with JSON response', data);  
  })  
  .catch(function (error) {  
    console.log('Request failed', error);  
  });

Should you want to make a fetch request with credentials such as cookies, you should set the credentials of the request to "include".

fetch(url, {  
  credentials: 'include'  
})