web-dev-qa-db-ja.com

ServiceWorkerとAJAX

AJAXを使用して、ユーザー側に表示したいプッシュ通知の詳細を取得しようとしていますが、まだ機能しません。

/*
*
*  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'
        })
    );
});

GCMを使用してクライアントにプッシュ通知を送信すると、Chromeはサービスワーカーに次のエラーを表示します：

sw.js：39 Uncaught ReferenceError：XMLHttpRequestが定義されていません

javascriptajaxservice-worker
10
user1857116

XMLHttpRequestは非推奨になり、ServiceWorkerスコープでは使用できません。 XMLHttpRequestの代わりに、 Fetch API 。

15
Alex M

これを行うには、fetch（）オプションでメソッドと本体のパラメーターを設定できます。

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

Cookieなどの認証情報を使用してフェッチリクエストを行う場合は、リクエストの認証情報を「含める」に設定する必要があります。

fetch(url, {  
  credentials: 'include'  
})
3
PHP developer