「Push通知」の記事 - Crieit

Nuxt+Firebase Cloud Messaging(FCM)でWebプッシュ通知を送る

2020-05-24T17:18:35+09:00

WebでもFCMが使えるようになったので、試してみたときの備忘録。
これでSafari以外には、通知が送れるようになる(´ω｀)

使い方

構成は、@nuxtjs/pwaでPWA化している感じ。

コンソール側

Settingsでウェブプッシュ証明書を作成して、鍵ペアを取得する。

これを、PUBLIC_VAPID_KEYという環境変数に設定しておく。

クライアント側

firebaseの初期化

~/plugins/firebase.tsというファイルを用意し、firebaseを初期化

// ~/plugins/firebase.ts
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/messaging";


if (!firebase.apps.length) {
  // まずは、firebaseの初期化
  firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
  });

  // Push通知をサポートしているかをチェック
  // サポートしていないと、firebase.messaging()を呼んだときに例外が発生
  const isSupported = firebase.messaging.isSupported();

  // コンソールで発行した、ウェブプッシュ証明書の鍵ペアを取得
  const publicVapidKey = process.env.PUBLIC_VAPID_KEY;
  if (!!publicVapidKey && process.client && !!isSupported) {
    // FCMの初期化。鍵ペアを設定する
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey(publicVapidKey);

    // @nuxtjs/pwaが生成するsw.jsと、
    // 後で作成するFCM受信処理用のsw-firebase-messaging.jsを統合するための設定
    navigator.serviceWorker
      .register("/sw.js")
      .then(registration => messaging.useServiceWorker(registration))
      .catch(err => console.error(err));
  }
}

export default firebase;

トークンの取得

Push通知を送る際の宛先として、トークンを指定しないといけないので取得。
トークンは端末ごとに取得する必要があるので、注意が必要。
※PCとスマホだとそれぞれトークンが違う

import firebase from "~/plugins/firebase";

// トークンの取得
public async getToken(user: User) {
  const isSupported = firebase.messaging.isSupported();
  if (!isSupported) return;
  const token = await firebase.messaging().getToken();

  // firestoreにトークンを保存しておく処理(中身は略)
  await saveToken(user, token);
}

Firestoreなどへユーザごとにトークンを保存しておく。

firebase.messaging().getToken();を呼んだ際に、
通知の設定が「確認」だと、許可を求めるダイアログが表示される。

これが許可されていないと、トークンも取得できない。

メッセージを受け取ったときの処理

メッセージを受信したときに受け取る関数は2つあり、

フォアグラウンド(画面を見ている時) ... onMessage
バックグラウンド(画面を見ていない時) ... setBackgroundMessageHandler

・【参考】JavaScript クライアントでメッセージを受信する | Firebase

今回はバックグラウンドのときに通知を送りたいので、
setBackgroundMessageHandlerを設定していく。

こんな感じ。

ドキュメントを見ると、『firebase-messaging-sw.jsというファイル名で作成』と書かれているけど、
その名前にすると、自動で読み込まれてしまう。。

開発用と本番用で切り替えたいときなどもあるので、@nuxtjs/pwaが生成するsw.jsと統合できるように、
sw-firebase-messaging.jsという名前でファイルを作成しておく。

ファイル名を変更したので、上で書いている「firebaseの初期化」の部分で、
messaging.useServiceWorker(registration)を呼んでいる形。

// ~/static/sw-firebase-messaging.js
importScripts("https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js");

// Firebaseの初期化
firebase.initializeApp({
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "...",
});

// [START background_handler]
const isSupported = firebase.messaging.isSupported();
if (!!isSupported) {
  const messaging = firebase.messaging();
  // バックグラウンド時の処理
  messaging.setBackgroundMessageHandler(function(payload) {
  　// 受け取ったFCMの内容を取得
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
      icon: payload.notification.icon,
    };

    // 通知を作成する
    return self.registration.showNotification(notificationTitle, notificationOptions);
  });
}
// [END background_handler]

nuxt.config.tsでPWA関連の設定をする

作成したsw-firebase-messaging.jsを取り込む設定と、
@nuxtjs/pwaが生成するmanifest.jsonに、gcm_sender_idを追加する設定を追加

import { Configuration } from "@nuxt/types";

const config: Configuration = {
  // 略
  modules: [
    "@nuxtjs/pwa",
  ],

  workbox: {
    // sw-firebase-messaging.jsをimportするように追加
    importScripts: [
      "sw-firebase-messaging.js"
    ]
  },

  pwa: {
    manifest: {
      // manifest.jsonにgcm_sender_idを追加
      gcm_sender_id: process.env.MESSAGING_SENDER_ID || ""
    }
  },
};

export default config;

これでクライアント側はOK！

サーバ側: メッセージを送信する

メッセージの送信は、firebase-adminでできる。
・アプリサーバーからの送信リクエストを作成する | Firebase

firestoreを利用しているので、Cloud Functionsのfirestoreトリガーを使い、
ドキュメントが追加されたら通知するようにしている例。

import * as functions from "firebase-functions";
import admin from "../common/firebaseAdmin"; // 初期化済みのfirebase-admin

export default functions
  .firestore.document("ドキュメントのパス")
  .onCreate(async (snap, context) => {
    // getTokenで保存しておいたトークンを取得(中身は略)
    const token = getToken();

    // 通知の送信
    const title = "通知するタイトル";
    const body = "通知する本文";
    const icon = "通知で表示するアイコン画像のURL"
    const link = "通知をタップしたときに開くURL"
    await admin.messaging().send({
        // 送信先の端末のトークン
        token: token,
        // 通知する内容
        notification: {
          title: title,
          body: body
        },
        // Web Push向けの通知内容
        webpush: {
          notification: {
            icon: icon
          },
          fcmOptions: {
            link: link
          }
        }
    });
  });

送信はこれだけ！

ほかの小ネタ

トークンを削除する

firebase.messaging().deleteToken();でトークンを無効化できる。

// トークンの削除
public async deleteToken(user: User) {
  const isSupported = firebase.messaging.isSupported();
  if (isSupported) {
    const token = await firebase.messaging().getToken();
    await firebase.messaging().deleteToken(token);
  }
}

フォアグラウンドで通知を受け取ったときになにかする

onMessageを使うと、通知を受け取ったときに呼び出してくれる。

firebase.messaging().onMessage(async (payload) => {
  // 受け取ったときの処理
});

トークンが変更されたときになにかする

onTokenRefreshを使うと、トークンが更新されたときに呼び出してくれる。
新しいトークンは再度getToken()を呼ばないといけない。

firebase.messaging().onTokenRefresh(async () => {
  // トークンが更新されたときの処理
});

通知の許可状態を確認する

通知の状態は、Notification.permissionで確認できるらしい。
・Notification.permission - Web API | MDN

if (Notification.permission === "default") {
  // 確認(デフォルト)
} else if (Notification.permission === "granted") {
  // 許可
} else if (Notification.permission === "denied") {
  // 拒否
}

以上!!

【PR】これをつかって、こんなのつくりました！

こんな通知を受け取れます！

１週間でWebサービスを作るイベント web1weekへの投稿作品です！
よかったら、遊んでみてください(´ω｀)

■エアで投げ銭できるWebサービス「エア銭」
URL: https://air-money.netlify.app/

参考にしたサイトさま

Onesignalを使ってNodeJSでpush通知

2019-05-10T23:08:59+09:00

背景

手軽にプッシュ通知を実装したい!

何を使おうか？

pushbullet

push通知アプリ。プラットフォームに依存しない。
android 8に変えたらバックグラウンドタスクがkillされてるのか通知がこない。

slack

最近のトレンド。チームに加入してない人には通知がいかないのがデメリット。

onesignal

日本語対応が後手の印象。登録画面が怪しい。
プッシュ通知が手軽に実装できる。

過去、slackとpushbulletは実装したことがある(※ただしJava)ので、今回はNodeJSでonesignalの実装に挑んでみました。

使うライブラリ

onesignal-node

NodeJSでonesignalのAPIにアクセスできるライブラリ。

実装

概要

4時間ごとに00分ちょうどに掲示板の書き込みがあるかヘッダを確認して更新があればプッシュ通知を出すというジョブを実装する。

毎日4時間ごと(00分00秒)にジョブを実行する

let cronTime:string = "0 0 */4 * * *";

即時関数

この中ではawaitを使用できる。
戻り値がPromiseの処理を1行で記述できるのがasync/awaitの強み。
(コールバック地獄とthen地獄はもう嫌だ)

(async()=>{

})().catch(...)

レスポンスヘッダから最終更新日時を取得する

let data = await response.headers.get('last-modified')

REST API keyとAUTH KEYを指定する

メニューから「ACCOUNT & API KEYS」のページを参照する。

var myClient = new OneSignal.Client({      
          userAuthKey: '＊＊＊＊＊＊＊',    
           app: { 
               appAuthKey: '＊＊＊＊＊＊＊',
               appId: '＊＊＊＊＊＊＊' 
          }    
        });
        var firstNotification = new OneSignal.Notification({      
          contents: {      
              ja: last_modified+"掲示板が更新されました。",
              en: "BBS is updated."     
          },    
          included_segments: ["All"] 
        });
        let response = await myClient.sendNotification(firstNotification)

今回は最終更新日時はDBに格納せずテキストファイルで保持しています。

全体の実装

var server = http.createServer(app);


let cronTime:string = "0 0 */4 * * *";
let job = new cronJob({
  //実行したい日時 or crontab書式
  cronTime: cronTime

  //指定時に実行したい関数
  , onTick: ()=> {
    (async()=>{
      let response = await fetch('*****')
      let data = await response.headers.get('last-modified')
      let last_modified = moment(data).format('YYYY/MM/DD HH:mm:SS')
      let isExist:boolean
      try {
        fs.statSync('./logs/last-modified.txt')
        isExist = true
      } catch (error) {
        isExist = false
      }
      let stored_time
      if(isExist){
        stored_time = fs.readFileSync('./logs/last-modified.txt').toString()
      }
      console.log(stored_time,last_modified)
      if(stored_time === undefined || stored_time < last_modified){
        //onesignalで通知を出す
        var myClient = new OneSignal.Client({      
          userAuthKey: '＊＊＊＊＊＊＊',    
          app: { appAuthKey: '＊＊＊＊＊＊＊', appId: '＊＊＊＊＊＊＊' }      
        });
        var firstNotification = new OneSignal.Notification({      
          contents: {      
              ja: last_modified+"掲示板が更新されました。",
              en: "BBS is updated."     
          },    
          included_segments: ["All"] 
        });
        let response = await myClient.sendNotification(firstNotification)      
        console.log(response.data, response.httpResponse.statusCode);      
        console.log('send')

        //push通知の送信終了後にファイルを更新する
        fs.writeFileSync('./logs/last-modified.txt',last_modified)
      }

    })()
    .catch((err)=>{
        systemLogger.error(err)
      })
    console.log('onTick!');
  }

  //ジョブの完了または停止時に実行する関数 
  , onComplete: function() {
    console.log('onComplete!')
  }

  // コンストラクタを終する前にジョブを開始するかどうか
  , start: false

  //タイムゾーン
  //, timeZone: "Japan/Tokyo"
})
//ジョブ開始
job.start();

server.listen(port);
server.on('error', onError);

PHP+Laravel+FCMでWebプッシュ通知を送る

2018-06-25T11:16:11+09:00

LaravelでFCMを使ったWebプッシュ通知を実装しましたが、検索してもあまりサンプルなどなかったので書き残しておきます。

Firebaseに登録

FCMはFirebase Cloud Messagingなので、とりあえずFirebaseに登録する必要があります。基本的には下記のとおりに行うだけです。

JavaScript Firebase Cloud Messaging クライアントアプリを設定する

このページの最初の方にJavaScriptに設定する方法が書かれたリンクもあります。

Firebase を JavaScript プロジェクトに追加する

このconfigの内容は、Firebaseの画面のProject Overviewというリンクをクリックした先の「ウェブアプリに Firebase を追加」というボタンをクリックすると出てきます。

Service Workerの設定

前述のマニュアルを読んで地味に気づいにくいのがService Workerの設定です。これを行わないと動きません。具体的には下記のページに書かれています。

JavaScript クライアントでメッセージを受信する

なんかプッシュ通知を送信したいのに「受信する」というタイトルなので初めて見た時は関係ないと思って飛ばしてしまって気づきませんでした。

Webプッシュ通知の許可

設定が終わったらあとはどんどん実装を進めていきます。最初は通知の許可です。これは結構みんな経験したことがあると思いますが、ブラウザで急に出てくる「通知を許可しますか？」みたいなやつです。

許可されたらトークンが取れるので、それをLaravel側に送信してユーザー情報に保存します。

import * as firebase from "firebase";
import axios from "axios";

const messaging = firebase.messaging();

messaging
  .requestPermission()
  .then(() => messaging.getToken())
  .then(token => {
    if (token) {
      const params = {
        token,
        user_agent: window.navigator.userAgent
      };
      return axios.post("/fcm-tokens", params);
    }
  })
  .then(response => {
    if (response && response.data.result) {
      console.log('Done');
    }
  })
  .catch(err => {
    console.log(err);
  });

上記のような感じで、ユーザーエージェントなどと紐付けてtokenを保存し、ユーザーのhasManyとして紐付けておきます。というのも、ユーザー毎ではなく操作する端末毎での許可になるので、１ユーザーにつき複数のtokenが紐づく形になるためです。

Laravel側

Laravel側ですが、今回僕は下記のライブラリを使用しました。

brozot/Laravel-FCM: Laravel-FCM

READMEを見てもらえば分かりますが、むちゃくちゃ簡単に必要な処理が可能です。

Webプッシュ通知する端末の登録

上記を使って、Laravel側では下記のようにして保存しました。

    public function store(Request $request)
    {
        $user = Auth::user();
        $fcmToken = FcmToken::firstOrNew([
            'user_id' => $user->id,
            'user_agent' => $request->input('user_agent'),
        ]);

        // 念の為
        if (!$fcmToken->id) {
            $fcmToken->token = $request->input('token');
            $fcmToken->save();
        }

        // 適当にユーザーのグループ名を作る
        $groupName = $user->getFcmGroupName();

        if ($user->notification_key) {
            FCMGroup::addToGroup($groupName, $user->notification_key, [$fcmToken->token]);
        } else {
            $user->notification_key = FCMGroup::createGroup($groupName, [$fcmToken->token]);
            $user->save();
        }

        return response()->json(['result' => true]);
    }

非常に簡単ではありますが、FCMを初めて実装する人は何がなんやら分からないと思いますので説明していきます。

本家のマニュアルにあるように、FCMでは複数の端末に一度にWebプッシュ通知を送る場合には、下記の方法があります。

・トピックメッセージングでは、特定のトピックにオプトインした複数の端末にメッセージを送信できます。
・端末グループメッセージングでは、定義したグループに属する複数の端末にメッセージを送信できます。

つまり例えばある投稿をウォッチしている全ての端末にWebプッシュ通知を送りたい場合はトピックメッセージ、あるユーザーの端末全てに送りたい場合は端末グループメッセージを送る、ということです。

今回のサンプルはユーザーへの通知を想定しているため、端末グループメッセージの説明を行います。

        // 適当にユーザーのグループ名を作る
        $groupName = $user->getFcmGroupName();

グループ名の文字列が必要なため、メソッド化し一意になるような文字列を返しています。

        } else {
            $user->notification_key = FCMGroup::createGroup($groupName, [$fcmToken->token]);
            $user->save();

グループがまだ存在しない場合はまずグループを作成します。作成時には追加するトークンも一緒に指定することができます。取得した通知キーはWebプッシュ通知の際に使用するのでLaravel側でDBに保存しておきます。

        if ($user->notification_key) {
            FCMGroup::addToGroup($groupName, $user->notification_key, [$fcmToken->token]);

グループが既に存在する場合（PCで許可済みでスマホでも許可した場合等）には既に登録したグループに端末を追加するだけです。

Webプッシュ通知する端末の削除

FCMでWebプッシュ通知する端末を削除するのはLaravel側では下記のような処理になります。

        $groupName = $user->getFcmGroupName();
        FCMGroup::removeFromGroup($groupName, $user->notification_key, [$fcmToken->token]);

        $fcmToken->delete();

        if (!$user->fcmTokens()->count()) {
            $user->notification_key = null;
            $user->save();
        }

注意点として、マニュアルにも書かれていますがグループ内の端末が全てなくなった場合は、自動的にグループも削除されます。そのためユーザーに紐づくトークンを全て削除した場合はグループの通知keyも削除しておきましょう。

Webプッシュ通知を送信する

送信は非常に簡単です。Laravel-FCMにかかれている通りそのままです。アイコン指定は追記していますが、httpsから始まるフルURLを指定します。

        $notificationBuilder = new PayloadNotificationBuilder('新着コメント');
        $notificationBuilder->setBody("「{$post->name}」にコメントが投稿されました。")
            ->setIcon(config('app.url') . '/img/icon.png')
            ->setSound('default');

        $notification = $notificationBuilder->build();

        $groupResponse = FCM::sendToGroup($user->notification_key, null, $notification, null);

一点注意点として、Laravel-FCMのREADMEを見ると宛先を配列で指定していますが、今回はうまく動きませんでした。

これはたまたまなのかFCMの仕様なのか忘れてしまった＆今回細かくは確認していないので、もし仕様であれば、一度にWebプッシュ通知を送信する宛先が多い場合は別途バックグラウンドで送信する、等が必要だと思われます。

もしくはトピックグループ送信でも良いと思いますが、管理が非常に大変になりそうだったので今回は使いませんでした。

まとめ

とりあえずざっとにはなりますがLaravelでFCMのWebプッシュ通知を送信する方法をまとめました。とりあえずここに書いた内容を理解できれば、あとは本家のマニュアルの方を見てもスムーズに理解できるのではないかと思います。細かい部分は本家のマニュアルも実際に確認してみてください。