/ サービスワーカー内の/ XMLHttpRequest - php、json、プッシュ通知、google-cloud-messaging、service-worker

サービスワーカー内のXMLHttpRequest - php、json、プッシュ通知、google-cloud-messaging、サービスワーカー

プッシュ通知システムを作成しようとしていますクロムに。 私はmysqlからデータを取得してJSONをエコーするphpを持っています。今度はプッシュ通知が到着してJSONデータを読み込んだときにアクティブになるgetJsonCode()関数を呼び出したいです。

私のサービスワーカーの中では、「標準関数を作成しました。XMLHttpRequestを使用してgetJsonCodeを作成すると、定義されていないことがわかります。

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

サービスワーカー内でこのような外部ファイルを呼び出すことは可能ですか、それとも何らかの制限がありますか?なぜこれがうまくいかないのかわからないから

回答:

回答№1は5

の代わりに XMLHttpRequest、あなたは新しいを使用することができます Fetch API. XMLHttpRequest 非推奨となっており、サービスワーカーの範囲では使用できません。

まさにあなたが達成したいことの例があります このServiceWorkerクックブックレシピ.


回答№2については2

fetch()はXHRに似たリクエストを可能にする新しいAPIですが、よりシンプルで使いやすいAPIを持っているので、XHRの代わりにfetch()を使用することができます。 ここに。これを試して:-

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

});
}));
});