web-dev-qa-db-ja.com

Webプッシュ通知をクリックしたときにカスタムURLを開く

Webpush Ruby gem を実装して、私のウェブサイトのユーザーにプッシュ通知を送信しています。

サーバーコード：

  Webpush.payload_send({
      message: notification.message,
      url: notification.url,  # I can't figure out how to access this key
      id: notification.id,    # or this key from the service worker
      endpoint: endpoint,
      p256dh: p256dh_key,
      vapid: vapid_keys,
      ttl: 24 * 60 * 60,
      auth: auth_key,
    })

通知を表示してクリック可能にするために、クライアントサイドにサービスワーカーを設定しています。

self.addEventListener("Push", function (event) {
  var title = (event.data && event.data.text()) || "New Message";

  event.waitUntil(
    self.registration.showNotification(title, {
      body: "New Push notification",
      icon: "/images/[email protected]",
      tag:  "Push-notification-tag",
      data: {
        url: event.data.url, // This is returning null
        id: event.data.id // And this is returning null
      }
    })
  )
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.data.url + "?notification_id=" + event.data.id)
  );
})

これはすべて正常に機能していますが、通過するカスタムキー（url、id）はService Worker内からアクセスできません。

WebPush gemを介してカスタムデータを渡す方法を知っている人はいますか？

javascriptnotificationsweb-push
13
BananaNeil

Webpush（with a payload）documentation から、JSON.stringify()メソッドを使用してすべてのデータをメッセージに入れ、JSON.parse()を使用してサービスワーカーで取得する必要があるようです。

サーバ：

Webpush.payload_send({
  message:JSON.stringify({
    message: notification.message,
    url: notification.url,
    id: notification.id,
  }),
  endpoint: endpoint,
  p256dh: p256dh_key,
  vapid: vapid_keys,
  ttl: 24 * 60 * 60,
  auth: auth_key,
})

クライアント：

 event.waitUntil(
   self.registration.showNotification(title, {
   body: "New Push notification",
   icon: "/images/[email protected]",
   tag:  "Push-notification-tag",
   data: {
     url: JSON.parse(event.message).url
   }
})
11
Jonas Wilms

カスタムデータはevent.notificationにありませんeventに直接ないオブジェクト（notificationclick）にあります。したがって、notificationclick関数でカスタムデータ変数を取得する場合は、次のように実行する必要があります。

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url + "?notification_id=" + event.notification.data.id)
  );
})
10
munjal

Node_modules/@angular/service-worker/ngsw-worker.js内のAngularプロジェクトにこれを追加します

this.scope.addEventListener('notificationclick', (event) => {
            console.log('[Service Worker] Notification click Received. event:%s', event);
            event.notification.close();
            if (clients.openWindow && event.notification.data.url) {
                event.waitUntil(clients.openWindow(event.notification.data.url));
            }
        });

上記のコードを入力すると、ファイル内でこの行を見つけることができます

this.scope.addEventListener('notificationclick', (event) => ..

そして、これを機能させるには、distを再構築する必要があります。バックエンドでは、この形式を使用する必要があります。

{"notification":{"body":"This is a message.","title":"Push MESSAGE","vibrate":[300,100,400,100,400,100,400],"icon":"https://upload.wikimedia.org/wikipedia/en/thumb/3/34/AlthepalHappyface.svg/256px-AlthepalHappyface.svg.png","tag":"Push demo","requireInteraction":true,"renotify":true,"data":{"url":"https://maps.google.com"}}}

URL内にURLを入力できます。通知をクリックすると、プッシュ通知によって指定されたリンクが開かれ、ブラウザーにフォーカスが移動します

1
cyperpunk