web-dev-qa-db-ja.com

Vue pwaとFirebaseクラウドメッセージングが正しく機能しない

次のコードを試してみました：

    navigator.serviceWorker.register('service-worker.js')
      .then((registration) => {
        const messaging = firebase.messaging().useServiceworker(registration)
        console.log(messaging)
        messaging.requestPermission().then(function () {
          console.log('Notification permission granted.')
          messaging.getToken().then(function (currentToken) {
            if (currentToken) {
              console.log(currentToken)
            }
          })
        })
      })

私のマニフェスト：

{
  "name": "Herot-Eyes",
  "short_name": "herot-eyes",
  "gcm_sender_id": "103953800507",
  "icons": [
    {
      "src": "/static/img/icons/herot-eyes-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/herot-eyes-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/Apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#000000",
  "theme_color": "#2196f3"
}

何が悪いの？私のconsole.log（messaging）は、次のようなファクトリエラーを返します。

bad-Push-set：「保存/検索に使用されるFCMプッシュセットは、有効なプッシュセット文字列ではありませんでした。」悪いスコープ

「サービスワーカーのスコープは、少なくとも1文字の文字列である必要があります。」悪い送信者ID

「firebase.initializeApp（）に渡されるオプションで「messagingSenderId」が正しく設定されていることを確認してください。」悪いサブスクリプション

「サブスクリプションは有効なPushSubscriptionである必要があります。」 bad-token：「保存/検索に使用されるFCMトークンは有効なトークン文字列ではありませんでした。」 bad-vapid-key

「公開VAPIDキーは65バイトのUint8Arrayではありません。」 bg-handler-function-expected

「setBackgroundMessageHandler（）への入力は関数でなければなりません。」削除スコープが見つかりません

「スコープが見つからなかったため、Service Workerスコープの削除を実行できませんでした。」 delete-token-not-found

「トークンが見つからなかったため、トークンを削除できませんでした。」 failed-delete-vapid-key

「VAPIDキーを削除できませんでした。」 failed-serviceworker-registration

「デフォルトのサービスワーカーを登録できません。{$ browserErrorMessage}」failed-to-delete-token

「現在保存されているトークンを削除できません。」 get-subscription-failed

「既存のプッシュサブスクリプションを取得しようとしたときにエラーが発生しました。」正しくないgcm-sender-id

「Firebaseメッセージングを使用するには、ウェブアプリマニフェストの「gcm_sender_id」の値を「103953800507」に変更してください。」無効な削除トークン

「deleteToken（）に有効なトークン、つまりgetToken（）からのトークンを渡す必要があります。」 invalid-public-vapid-key

「公開VAPIDキーは文字列でなければなりません。」無効に保存されたトークン

「保存されたトークンの詳細にアクセスできません。」 no-fcm-token-for-resubscribe

「FCMトークンが見つからなかったため、再登録できません。次回の訪問時にユーザーを再登録する必要があります。」 no-sw-in-reg

「サービスワーカーの登録は成功しましたが、サービスワーカー自体へのアクセスに問題がありました。」 no-window-client-to-msg

「存在しないウィンドウクライアントにメッセージを送信しようとしました。」通知がブロックされました

「通知がブロックされました。」 SWでのみ利用可能

「このメソッドはService Workerコンテキストで使用できます。」ウィンドウでのみ利用可能

「このメソッドはWindowコンテキストで使用できます。」許可ブロック

「必要な権限が付与されず、代わりにブロックされました。」権限デフォルト

「必要な権限が付与されず、却下されました。」 public-vapid-key-decryption-failed

「VAPID公開鍵は暗号化解除時に65バイトになりませんでした。」オーバーライドすべき

「このメソッドは、拡張クラスによってオーバーライドされる必要があります。」 sw-reg-redundant

「プッシュに使用されているサービスワーカーは冗長になりました。」 sw-registration-expected

「サービスワーカーの登録が予想される入力でした。」トークン購読失敗

「ユーザーをFCMにサブスクライブするときに問題が発生しました：{$ message}」token-subscribe-no-Push-set

「FCMトークンを取得するときにFCMが無効な応答を返しました。」トークンサブスクライブのトークンなし

「ユーザーをプッシュにサブスクライブしても、FCMはトークンを返しませんでした。」トークンの登録解除に失敗しました

「FCMからのユーザーの登録解除中に問題が発生しました：{$ message}」token-update-failed

「FCMからユーザーを更新中に問題が発生しました：{$ message}」token-update-no-token

「ユーザーをプッシュに更新するとき、FCMはトークンを返しませんでした。」再購読できない

「プッシュメッセージング用のFCMトークンの再サブスクライブ中にエラーが発生しました。次回の訪問時にユーザーを再サブスクライブする必要があります。{$ message}」unsupported-browser

「このブラウザーは、firebase SDKを使用するために必要なAPIをサポートしていません。」 use-sw-before-get-token

「getToken（）を呼び出す前にuseServiceWorker（）を呼び出して、サービスワーカーが使用されていることを確認する必要があります。」

firebasevue.jspush-notificationservice-workerprogressive-web-apps
9
eeerrrttt

通知を受信するようにサーバーを構成する

次のファイルをパブリックフォルダに追加します。

manifest.json

{
    "gcm_sender_id": "103953800507"
}

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');

var config = {
  messagingSenderId: <Sender ID>
};
firebase.initializeApp(config);

let messaging = firebase.messaging();

Main.jsファイルに次のコードを追加します

var config = {
  apiKey: <API_KEY>,
  authDomain: <DOMAIN>,
  databaseURL: <DATABASE_URL>,
  projectId: <PROJECT_ID>,
  storageBucket: <STORAGE_BUCKET>,
  messagingSenderId: <SENDER_ID>
};
firebase.initializeApp(config);

Vue.prototype.$messaging = firebase.messaging()

navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then((registration) => {
    Vue.prototype.$messaging.useServiceWorker(registration)
  }).catch(err => {
    console.log(err)
  })

通知を受け取る

次に、App.vueで、このコードをcreated（）関数に追加します

created() {
    var config = {
        apiKey: <API_KEY>,
        authDomain: <DOMAIN>,
        databaseURL: <DATABASE_URL>,
        projectId: <PROJECT_ID>,
        storageBucket: <STORAGE_BUCKET>,
        messagingSenderId: <SENDER_ID>
    };
    firebase.initializeApp(config);
    const messaging = firebase.messaging();

    messaging
    .requestPermission()
    .then(() => firebase.messaging().getToken())
    .then((token) => {
        console.log(token) // Receiver Token to use in the notification
    })
    .catch(function(err) {
        console.log("Unable to get permission to notify.", err);
    });

    messaging.onMessage(function(payload) {
    console.log("Message received. ", payload);
    // ...
    });
}

通知を送信

更新

const admin = require("firebase-admin")

var serviceAccount = require("./certificate.json");

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
});
const Messaging = admin.messaging()

var payload = {
    webpush: {
        notification: {
            title: "Notification title",
            body: "Notification info",
            icon: 'http://i.imgur.com/image.png',
            click_action: "http://yoursite.com/redirectPage" 
        },
    },
    topic: "Doente_" + patient.Username
};

return Messaging.send(payload)

古いバージョン

次に、郵便配達で次のリクエストを行います

POST /v1/projects/interact-f1032/messages:send HTTP/1.1
Host: fcm.googleapis.com
Authorization: Bearer <SENDER_TOKEN>
Content-Type: application/json

{
  "message":{
    "token" : The token that was in the console log,
    "notification" : {
      "body" : "This is an FCM notification message!",
      "title" : "FCM Message"
      }
   }
}

送信者トークン

バックエンドで、次のコードを使用します。ここで、ファイル「certificate.json」は、Firebaseダッシュボードで取得されました（ https://firebase.google.com/docs/cloud-messaging/js/client -キーのペアを生成する）

const {google} = require('googleapis');

function getAccessToken() {
  return new Promise(function(resolve, reject) {
    var key = require('./certificate.json');
    var jwtClient = new google.auth.JWT(
      key.client_email,
      null,
      key.private_key,
      ["https://www.googleapis.com/auth/firebase", 
      "https://www.googleapis.com/auth/cloud-platform"],
      null
    );
    jwtClient.authorize(function(err, tokens) {
      if (err) {
        reject(err);
        return;
      }
      resolve(tokens.access_token);
    });
  });
}

getAccessToken().then(senderToken => console.log(senderToken))

SenderTokenは、Authorizationヘッダーで通知を送信するために使用されます

13
Pedro Silva