web-dev-qa-db-ja.com

FCMでService Workerをプッシュ通知に使用する方法

FirebaseでService Workerを使用してChromeにプッシュ通知を実装しようとしています。 Webアプリにマニフェストファイルとsw.jsファイルがあります。 Firebaseでプロジェクトを作成し、通知の登録と送信をテストしました。通知を受け取ったときにデータがnullであることを除いて、これはすべて正常に機能します。理由がわからないので、（私の知る限り）役立つリソースがありません。これが私のサービスワーカーファイルです：

self.addEventListener('Push', function(event) {
  console.log('Push message', event);
  var title = 'Push message';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: 'The Message',
      icon: 'images/logo.svg',
      tag: 'my-tag'
  }));
});

ここに私のmain.jsファイルがあります：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
    registration.pushManager.subscribe({
      userVisibleOnly: true
    }).then(function(sub) {
      console.log('endpoint:', sub.endpoint);
    }).catch(function(e) {

    });
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

Manifest.json：

{
  "name": "APPNAME",
  "gcm_sender_id": "SENDERID"
}

cURLリクエスト：

curl --header "Authorization: key=APIKEY" -application/json" https://fcm.googleapis.com/fcm/send -d "{\"registration_ids\":[\"REGISTRATIONID\"],\"notification\":{\"title\":\"test\",\"body\":\"testing\"},\"data\":{\"title\":\"erse\"}}"

Sw.jsからのプッシュイベントのコンソールログ： enter image description here

リクエストで送信したデータを受信して​​いません。これはfirebaseで他の方法で行われますか？前もって感謝します。

javascriptfirebaseservice-workerfirebase-cloud-messaging
13
TheSabby

this によると、chromeの通知バージョンchromeバージョン50以降）でデータを送信できます。

Chrome 50より前のバージョンでは、Pushメッセージにペイロードデータを含めることができませんでした。サービスワーカーで「Push」イベントが発生したとき、サーバーが何かを伝えようとしていることを知っていましたが、次に、サーバーにフォローアップリクエストを行い、表示する通知の詳細を取得する必要がありました。これは、ネットワークの状態が悪い場合に失敗する可能性があります。

Chrome 50（および現在のバージョンのデスクトップ上のFirefox）では）クライアントが追加のリクエストを行わないように、プッシュと共に任意のデータを送信できます。大きな責任があるため、すべてのペイロードデータは暗号化する必要があります。

現在の実装では、次のようなことができます：

self.addEventListener('Push', function(event) {

var apiPath = '<apiPath>';
event.waitUntil(registration.pushManager.getSubscription().then(function (subscription){

    return fetch(apiPath).then(function(response){
        if(response.status !== 200){
            throw new Error();
        }

        return response.json().then(function(data){
            var title = data.title;
            var message = data.body;
            var icon = data.icon;
            var tag = data.tag;
            var url = data.url;
            return self.registration.showNotification(title,{
               body: message,
               icon: icon,
               tag: tag,
               data: url
            });
        })
    }).catch(function(err){

    })

}));
return;
});

特定のユーザーに関連付けることができる特定の通知については、ワーカーの登録IDのパラメーターをapi urlで渡して、その特定のIDの通知を取得できます。お役に立てれば！

5
doubt

このチュートリアル によると、現在、GCMにデータを送信できません。

Chrome=でのPush APIの現在の実装の欠点は、Pushメッセージでデータを送信できないことです。いいえ、何もありません。これの理由は、将来の実装では、ペイロードデータは、プッシュメッセージングエンドポイントに送信される前にサーバー上で暗号化する必要があります。これにより、エンドポイントは、プッシュプロバイダーが何であれ、プッシュメッセージのコンテンツを簡単に表示できなくなります。これにより、他の脆弱性からも保護されますHTTPS証明書の不十分な検証や、サーバーとプッシュプロバイダー間の中間者攻撃などです。ただし、この暗号化はまだサポートされていないため、その間にフェッチを実行して必要な情報を取得する必要があります。通知を入力します。

0
ktusznio