はじめに

Vue + Cordova + Firebase でプッシュ通知を利用する方法を整理した。

※Firebase やプッシュ通知の細かい仕様については詳しくないため、最新/最適でない方法の可能性があることに注意。
※試行錯誤を経て成功した後に情報を整理しているので、手順漏れや実施タイミングが異なるものなどがあるかもしれないことに注意。

TL;DR

プラグインは dpa99c/cordova-plugin-firebasex を利用
- arnesson/cordova-plugin-firebase ではないので注意
iOS の証明書周りでハマるポイントがあるので注意

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.1
BuildVersion:	19B88

$ node -v
v12.7.0

$ npm -v
6.10.3

$ vue -V
3.10.0

$ cordova -v
9.0.0 (cordova-lib@9.0.1)

$ cordova platforms
Installed platforms:
  android 8.1.0
  browser 6.0.0
  ios 5.1.1

$ cordova plugin
cordova-plugin-androidx 1.0.2 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-firebasex 7.0.1 "Google Firebase Plugin"
cordova-plugin-whitelist 1.3.4 "Whitelist"

Xcode Version 11.3.1 (11C504)

詳細

リポジトリ: 17number/vue-cordova-firebase-push-example

事前準備

iOS: Identifier/Profile 作成

Certificates, Identifiers & Profiles で必要なリソースを追加しておく。

Identifier 作成

App IDs → Continue
以下を選択/入力して Register
- Platform: iOS, tvOS, watchOS
- Description: 適宜
- Bundle ID: Explicit, 適宜
- Capabilities: Push Notifications にチェック

プッシュ通知用証明書の登録

Identifiers で先ほど作成した ID を選択

Certificates(0) となっているはずなので Configure

Create Certificate → Choose File で以前作成した CertificateSigningRequest.certSigningRequest を選択。

プッシュ通知用の証明書ファイル(aps.cer, aps_development.cer)をダウンロードし、ダブルクリックでキーチェーンに登録

Profile 作成

iOS App Development
Select an App ID
- 対象 App ID(vueCordovaFirebasePushExample)
Select Certificates
- 自分の Certificate
Select Devices
- 自分のデバイス
Provisioning Profile Name
- vueCordovaFirebasePushDevelopmentExample
Generate → Download → 実行してプロファイルを追加

プロジェクト作成

vue create

vue-cli でプロジェクト作成。各種設定はお好みで。
※vue-cli のバージョンがちょっと古いが、ひとまず無視した

$ vue create cordova-push-example
Vue CLI v3.10.0
┌───────────────────────────┐
│  Update available: 4.1.2  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
...

$ cd cordova-push-example/

vue add cordova

cordova 環境の構築。ここも各種設定はお好みで。

$ vue add cordova

📦  Installing vue-cli-plugin-cordova...

+ vue-cli-plugin-cordova@2.4.0
updated 1 package in 5.908s
✔  Successfully installed plugin: vue-cli-plugin-cordova

? Name of folder where cordova should be installed src-cordova
? ID of the app co.jp.foobar.push.example
? Name of the app VueCordovaPushExample
? Select Platforms: Android, iOS, Browser
...

いくつかのファイルを修正、317ebe5 を参照。

ビルド確認

プッシュ通知の話に入る前に、一度ビルドできるか確認しておく。

iOS

Xcode を開いて Signing & Capabilities を変更。

1	$ open src-cordova/platforms/ios/VueCordovaPushExample.xcworkspace/

Mac と iOS デバイスを接続し、ビルド/デプロイできるかを確認

1	$ npm run build-deploy-ios

Android

Mac と Android デバイスを接続し、ビルド/デプロイできるかを確認

1	$ npm run cordova-serve-android

Firebase の設定

Firebase を設定。

プロジェクト作成

Firebase console にアクセス

プロジェクトを作成 → cordova-push-example → アナリティクス無効 → 作成

アプリの追加

プロジェクトページに移動 → 左上 Project Overview ⚙ → プロジェクトの設定

マイアプリで追加

iOS

Firebase で iOS のボタンをクリックして追加

アプリ情報入力

`GoogleService-Info.plist` をダウンロード

GoogleService-Info.plist を src-cordova 直下に配置。
※GoogleService-Info.plist を Xcode プロジェクトのルートに移動 とあるが、後でインストールする dpa99c/cordova-plugin-firebasex プラグインがファイルコピーしてくれる。

1	$ mv ~/Downloads/GoogleService-Info.plist src-cordova/

Firebase SDK の追加

CocoaPods で色々とするように書かれているが、dpa99c/cordova-plugin-firebasex が自動で実施してくれるので、ここではインストールだけ行っておけば良い。

CocoaPods未インストールの場合はインストール。pod コマンドでエラーが出る場合は再インストールする。
参考: Cocoapods doesn’t work on Catalina · Issue #42906 · Homebrew/homebrew-core

$ which pod
/usr/local/bin/pod

# pod コマンドがエラーとなる場合は再インストール
$ pod
/usr/local/bin/pod: /usr/local/Cellar/cocoapods/1.7.5/libexec/bin/pod: /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: bad interpreter: No such file or directory
/usr/local/bin/pod: line 2: /usr/local/Cellar/cocoapods/1.7.5/libexec/bin/pod: Undefined error: 0

# インストール
$ brew install ruby
$ sudo gem install -n /usr/local/bin cocoapods

# 動作確認
$ pod
Usage:

    $ pod COMMAND
# 後略

iOS build notes に従い pod repo update, sudo gem install cocoapods も実行しておく。

$ pod repo update
Updating spec repo `master`
  $ /usr/local/bin/git -C /Users/hoge/.cocoapods/repos/master fetch origin --progress
  remote: Enumerating objects: 66632, done.
  remote: Counting objects: 100% (66632/66632), done.
  remote: Compressing objects: 100% (179/179), done.
  remote: Total 509253 (delta 66526), reused 66464 (delta 66448), pack-reused 442621
  Receiving objects: 100% (509253/509253), 57.15 MiB | 9.40 MiB/s, done.
  Resolving deltas: 100% (351072/351072), completed with 10804 local objects.
  From https://github.com/CocoaPods/Specs
     6056327ba58..b0153700b04  master       -> origin/master
   * [new branch]              orta-patch-1 -> origin/orta-patch-1
  $ /usr/local/bin/git -C /Users/hoge/.cocoapods/repos/master rev-parse --abbrev-ref HEAD
  master
  $ /usr/local/bin/git -C /Users/hoge/.cocoapods/repos/master reset --hard origin/master
  Updating files: 100% (389727/389727), done.
  HEAD is now at b0153700b04 [Add] ACLayout 0.0.4
Updating spec repo `trunk`

$ sudo gem install cocoapods

初期化コードの追加

この手順も dpa99c/cordova-plugin-firebasex が自動で実施するので、ここでは行わなくてよい

Android

アプリ情報入力

`google-services.json` をダウンロード

google-services.json を src-cordova 直下に配置。
※Android アプリモジュールのルートディレクトリに移動 とあるが、後でインストールする dpa99c/cordova-plugin-firebasex プラグインがファイルコピーしてくれる。

1	$ mv ~/Downloads/google-services.json src-cordova/

Firebase SDK の追加

この手順も dpa99c/cordova-plugin-firebasex が自動で実施するので、ここでは行わなくてよい

`.gitignore` を編集

設定ファイルを git 管理下から除外するために .gitignore を編集
参考: ios - Firebase: Should I add GoogleService-Info.plist to .gitignore? - Stack Overflow

1
2
3

+# Firebase
+GoogleService-Info.plist
+google-services.json

APNs 証明書の登録

iOS でプッシュ通知を利用するために、APNs 証明書を登録する。
※FCM での APNs の構成 | Firebase によると、APNs Auth Key を使うのが最新の方法っぽいが、ここでは APNs 証明書を利用した。

キーチェーンを起動、左側の 分類 で 自分の証明書 を選択後に、push で情報を絞り込み。対象の証明書を右クリックして 書き出す を選択
参考: ios - Unable to export Apple production push SSL certificate in .p12 format - Stack Overflow

ファイルフォーマットを .p12 として、パスワードは適宜設定。

.p12 ファイルを作成したら、クラウドメッセージングの設定ページに移動

「iOS アプリ」の「APNs 証明書」からアップロード

iOSのプッシュ通知送信時にトークン認証が使えるようになったので調べてみた - Qiita

`cordova-plugin-firebasex` の追加

src-cordova に移動して cordova plugin add
※cordova-plugin-firebase ではなく cordova-plugin-firebasex (末尾に x) なので注意。

1 2	$ cd src-cordova/ $ cordova plugin add cordova-plugin-firebasex

プラグイン追加後、src-cordova/GoogleService-Info.plist と src-cordova/google-services.json が、それぞれ以下にコピーされているはず。

src-cordova/platforms/ios/VueCordovaPushExample/Resources/GoogleService-Info.plist
src-cordova/platforms/android/app/google-services.json

上記にファイルが無い場合は、platform rm → platform add で解決するはず

1 2	$ cordova platform rm android $ cordova platform add android

※cordova-plugin-firebasex の最低要件は下記

cordova@9 (CLI)
cordova-android@8 (Android platform)
cordova-ios@5 (iOS platform)

ビルド設定

Android

特に設定ファイルの変更などは不要、プッシュ通知を受信するための処理を記述するだけで OK。

Firebase Console からプッシュ通知のテストを行うときに、token が必要になる(console.log で表示している)ので [Cordova] CordovaアプリをChromeでデバッグ（Android） - Qiita の手順を参考に、Chrome でデバッグできるようにしておく。

iOS

.eslintrc.js 設定変更

この後のビルドでエラーになるので、.eslintrc.js を変更しておく。
(あくまでも「プッシュ通知の検証」が主目的なので、問答無用で no-console, no-debugger ルールを無効化している)

  rules: {
-   "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-   "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+   "no-console": "off",
+   "no-debugger": "off"
  },

Xcode 設定変更

Xcode を開いて、署名(Signing & Capabilities -> Signing, Signing (Debug))の設定を変更

1	$ open src-cordova/platforms/ios/VueCordovaPushExample.xcworkspace/

変更前

変更後 (ここの内容は各自の環境によりけりだと思われる)

src-cordova/build.json 作成

CLI ビルド用に src-cordova/build.json を作成する

まずは Identity の確認、キーチェーンを起動して apple dev や apple distri などで絞り込む。

この証明書名(Apple Development: Rxxxx xxxxu や Apple Distribution: XXXX) を控えておく。

次に Profiles で作った xxxx.mobileprovision から UUID を抽出。

他にちゃんとしたやり方がありそうだが、今回は grep で抽出した。

$ grep -i uuid -C1 --binary-files=text vueCordovaFirebasePushDevelopmentExample.mobileprovision
<integer>365</integer>
<key>UUID</key>
<string>12345678-90ab-cdef-1234-567890abcdef</string>  # これ

src-cordva/build.json を作成。詳しい設定内容は Signing an App - iOS Platform Guide - Apache Cordova を参照。

{
  "ios": {
    "debug": {
      "codeSignIdentity":"Apple Development: Rxxxx xxxxu",
      "provisioningProfile":"12345678-90ab-cdef-1234-567890abcdef"
    },
    "release": {
      "codeSignIdentity":"Apple Distribution: XXXX",
      "provisioningProfile":"12345678-90ab-cdef-1234-567890abcdef"
    }
  }
}

その他参考:

なお、Cordova CLIでiOSのアプリをパッケージングする方法 - Qiita 内の以下の方法で抽出した ID を build.json に使うと、自分の環境ではビルド時にエラーとなった。

$ find ~/Library/MobileDevice/Provisioning\ Profiles -type f -print0 | xargs -0 grep "App ID"
Binary file /Users/hoge/Library/MobileDevice/Provisioning Profiles/abcdef01-2345-6789-abcd-ef0123456789.mobileprovision matches

# abcdef01-2345-6789-abcd-ef0123456789 を build.json に使うと、下記のエラーが発生した
error: exportArchive: Provisioning profile "iOS Team Provisioning Profile: *" doesn't support the Push Notifications capability.

プッシュ通知受信処理の作成

dpa99c/cordova-plugin-firebasex-test にサンプルプロジェクトがあるので、参考にしながらコードを実装。

1 2	# ローカルでファイルを見たい場合は clone する $ git clone git@github.com:dpa99c/cordova-plugin-firebasex-test.git

プッシュ通知を処理するファイルを編集、今回は src/main.js

主に必要な処理は下記

プッシュ通知可能かどうかの確認 (hasPermission, grantPermission)
(テスト用) FCM Token の取得 (getToken)
プッシュ通知の受信ハンドラの設定 (onMessageReceived)
トピック購読/購読停止 (subscribe, unsubscribe)

※APNs Token の取得処理(getAPNsToken, onApnsTokenReceived)もあるが、この API を利用しなくてもプッシュ通知は受信できており、現時点では使いみちをうまく理解できていない。

実装詳細は src/main.js や dpa99c/cordova-plugin-firebasex-test の www/js/index.js を参照。

また、その他 API は Notifications and data messages - API を参照。

プッシュ通知の受信確認

実機接続して、プッシュ通知の動作確認。

Android

テストメッセージ受信

Android を接続、下記コマンドでアプリを起動。

1	$ npm run cordova-serve-android

[Cordova] CordovaアプリをChromeでデバッグ（Android） - Qiita を参考に、Chrome で Android に接続。

ログが表示されているので、FCM Token をコピーし、ホーム画面に戻っておく。
※デフォルト設定だと、バックグラウンドでないとシステム通知メッセージが表示されないため

Firebase で 拡大 → Cloud messaging からメッセージを送信する。

タイトルとテキストを入力し、テストメッセージを送信。

FCM Token を追加して テスト で、テストメッセージが送信される。

設定などに問題なければ、Android でプッシュ通知を受信できるはず。

参考: メッセージハンドラの受信内容

バックグラウンドにアプリがあるときに受信

{
  "google.delivered_priority": "high",
  "google.sent_time": 1579229429296,
  "google.ttl": 2419200,
  "google.original_priority": "high",
  "messageType": "notification",
  "tap": "background",
  "from": "123456789012",
  "google.message_id": "0:1579229429322283%ada8bd3aada8bd3a",
  "collapse_key": "co.jp.foobar.push.example"
}

フォアグラウンドにアプリがあるときに受信

{
  "messageType": "notification",
  "id": "0:1579229395948227%ada8bd3aada8bd3a",
  "ttl": "2419200",
  "body": "from firebase 3",
  "from": "123456789012",
  "title": "fcm android 3",
  "sent_time": "1579229395912",
  "collapse_key": "co.jp.foobar.push.example",
  "show_notification": "false"
}

トピック受信

テストメッセージを送信 ではなく、ターゲットに トピック を選んだ場合の受信確認。

同じように受信できれば OK。

参考: メッセージハンドラの受信内容

バックグラウンドで topic 受信。from が /topics/xxxx になる

{
  "google.delivered_priority": "high",
  "google.sent_time": 1579231265392,
  "google.ttl": 2419200,
  "google.original_priority": "high",
  "messageType": "notification",
  "tap": "background",
  "from": "/topics/news",
  "google.message_id": "0:1579231265929374%ada8bd3aada8bd3a",
  "collapse_key": "co.jp.foobar.push.example"
}

フォアグラウンドで topic 受信。from が /topics/xxxx になる

{
  "messageType": "notification",
  "id": "0:1579231105712320%ada8bd3aada8bd3a",
  "ttl": "2419200",
  "body": "\"news\" topic",
  "from": "/topics/news",
  "title": "topic test",
  "sent_time": "1579231105431",
  "collapse_key": "co.jp.foobar.push.example",
  "show_notification": "false"
}

iOS

iOS デバイスを接続し、Xcode でビルド/デプロイ。
※Safari のインスペクタが使えなかったので、Xcode からデプロイした。Safari でデバッグできるなら CLI(npm run build-deploy-ios)でも良い

プッシュ通知の許可ダイアログが出るはずなので Allow を選択。
※ダイアログが出ない場合は、設定アプリ→通知→アプリ名から通知を許可に変更

Xcode 上に FCM Token が表示されるので、Android と同様にテストメッセージやトピックの送信をテストし、受信できれば OK。

参考: メッセージハンドラの受信内容

バックグラウンドで受信した場合 "messageType": "notification", や "tap": "background" が付与
トピックでもテストメッセージでも同じフォーマットっぽい

テストメッセージバックグラウンド受信

{
  "message": {
    "messageType": "notification",
    "google.c.a.e": "1",
    "aps": {
      "alert": {
        "title": "ios background",
        "body": "hello"
      }
    },
    "gcm.n.e": "1",
    "google.c.a.c_id": "3635646399978556137",
    "google.c.a.udt": "0",
    "gcm.message_id": "1579575782276941",
    "google.c.a.ts": "1579575782",
    "tap": "background"
  }
}

テストメッセージフォアグラウンド受信

{
  "message": {
    "google.c.a.e": "1",
    "aps": {
      "alert": {
        "title": "ios foreground",
        "body": "hello"
      }
    },
    "gcm.n.e": "1",
    "google.c.a.c_id": "5516687245472666047",
    "google.c.a.udt": "0",
    "gcm.message_id": "1579575917742759",
    "google.c.a.ts": "1579575917",
    "messageType": "notification"
  }
}

トピックバックグラウンド受信

{
  "message": {
    "messageType": "notification",
    "google.c.a.e": "1",
    "aps": {
      "alert": {
        "title": "ios background topic",
        "body": "hello"
      }
    },
    "gcm.n.e": "1",
    "google.c.a.c_id": "4350569100724496122",
    "google.c.a.udt": "0",
    "gcm.message_id": "1579576172086746",
    "google.c.a.ts": "1579576171",
    "tap": "background"
  }
}

トピックフォアグラウンド受信

{
  "message": {
    "google.c.a.e": "1",
    "aps": {
      "alert": {
        "title": "ios foreground topic",
        "body": "hello"
      }
    },
    "gcm.n.e": "1",
    "google.c.a.c_id": "613280231173674123",
    "google.c.a.udt": "0",
    "gcm.message_id": "1579576050812110",
    "google.c.a.ts": "1579576050",
    "messageType": "notification"
  }
}

フォアグラウンドでのプッシュ通知受信

Foreground notifications の通り、メッセージ内に "data": { "notification_foreground": "true" } が含まれていると、アプリがアクティブな状態でもプッシュ通知が表示される。

{
  "data": {
    "notification_foreground": "true"
  }
}

その他、以下も読んでおいた方が良い。

サーバから下記のようなメッセージを送ると、Android/iOS でバックグラウンド/フォアグラウンドでのプッシュ通知(システム通知)が利用できるはず。
※簡単な検証はしたが、何か間違いなどあるかもなので詳細は公式参照

const token = "yourToken";
const msg = {
  notification: {
    title: "title",
    body: "body",
  },
  data: {
    // フォアグラウンドでも通知
    notification_foreground: "true",
    // Android 対応
    // https://github.com/dpa99c/cordova-plugin-firebasex#android-background-notifications
    title: "title",
    body: "body",
  },
  // iOS 対応
  // https://github.com/dpa99c/cordova-plugin-firebasex#ios-background-notifications
  apns: {
    payload: {
      aps: {
        "content-available": 1
      }
    }
  },
  token: token,
};

ハマった箇所

`cordova-plugin-firebase` の追加でエラー

間違えて cordova-plugin-firebase (末尾に x 無し) をインストールすると、メンテされてないため Using "requireCordovaModule" to load non-cordova module "xcode" is not supported. Instead, add this module to your dependencies and use regular "require" to load it. のエラーが発生(するはず)。

$ cd src-cordova/
$ cordova plugin add cordova-plugin-firebase
Installing "cordova-plugin-firebase" for android
Subproject Path: CordovaLib
Subproject Path: app
Installing "cordova-plugin-firebase" for browser
Installing "cordova-plugin-firebase" for ios
Failed to install 'cordova-plugin-firebase': CordovaError: Using "requireCordovaModule" to load non-cordova module "xcode" is not supported. Instead, add this module to your dependencies and use regular "require" to load it.
    at Context.requireCordovaModule (/Users/hoge/.nodenv/versions/12.7.0/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/Context.js:57:15)
    at Object.removeShellScriptBuildPhase (/Users/hoge/development/biz/foobar/experiment/cordova-push-example/src-cordova/plugins/cordova-plugin-firebase/scripts/ios/helper.js:88:25)
    at module.exports (/Users/hoge/development/biz/foobar/experiment/cordova-push-example/src-cordova/plugins/cordova-plugin-firebase/scripts/ios/after_plugin_install.js:8:12)
    at runScriptViaModuleLoader (/Users/hoge/.nodenv/versions/12.7.0/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:181:32)
    at runScript (/Users/hoge/.nodenv/versions/12.7.0/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:157:16)
    at /Users/hoge/.nodenv/versions/12.7.0/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:125:20
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
Using "requireCordovaModule" to load non-cordova module "xcode" is not supported. Instead, add this module to your dependencies and use regular "require" to load it.

@ctfrancia I think this plugin isn’t actively maintained anymore

fortunately @dpa99c actively maintain and improve his fork which notably solves this issue and add other improvements dpa99c/cordova-plugin-firebasex

cordova 9.0.0 issue installing firebase ios · Issue #1033 · arnesson/cordova-plugin-firebase より引用

`cordova-plugin-firebase` から移行

間違えてインストールした場合は Migrating from cordova-plugin-firebase に従い、移行コマンドを実行すれば OK

# 追加済みのプラットフォームを削除
$ cordova platform rm android
Removing android from cordova.platforms array in package.json

$ cordova platform rm ios
Removing ios from cordova.platforms array in package.json

# cordova-plugin-firebase を削除
$ cordova plugin rm cordova-plugin-firebase
Uninstalling cordova-plugin-firebase from browser
js-module uninstall called : plugins/cordova-plugin-firebase/www/firebase-browser.js
Removing "cordova-plugin-firebase"
Removing cordova-plugin-firebase from package.json

# プラグイン、パッケージを削除
$ rm -rf plugins/ node_modules/

# パッケージを再インストール
$ npm i
added 142 packages from 87 contributors and audited 321 packages in 1.693s
found 0 vulnerabilities

# cordova-plugin-firebasex を追加
$ cordova plugin add cordova-plugin-firebasex
Installing "cordova-plugin-firebasex" for browser
Installing "cordova-plugin-androidx" for browser
Installing "cordova-plugin-androidx-adapter" for browser
Adding cordova-plugin-firebasex to package.json

# プラットフォーム(android) 追加
$ cordova platform add android
Using cordova-fetch for cordova-android@^8.0.0
Adding android project...
...

# プラットフォーム(ios) 追加 ※完了まで時間がかかる
$ cordova platform add ios
Using cordova-fetch for cordova-ios@^5.0.0
Adding ios project...
...

iOS ビルドエラー

requires a provisioning profile with the Push Notifications feature

ビルド(npm run build-deploy-ios) で Error Domain=IDEProvisioningErrorDomain Code=9 ""VueCordovaPushExample.app" requires a provisioning profile with the Push Notifications feature." UserInfo={IDEDistributionIssueSeverity=3, NSLocalizedDescription="VueCordovaPushExample.app" requires a provisioning profile with the Push Notifications feature., NSLocalizedRecoverySuggestion=Add a profile to the "provisioningProfiles" dictionary in your Export Options property list.} のエラー。

$ npm run build-deploy-ios
...
Error Domain=IDEProvisioningErrorDomain Code=9 ... # 長いので省略

** EXPORT FAILED **

xcodebuild: Command failed with exit code 70

以下を順番に確認していく。

Identifiers で該当 ID を選択し、Certificates(0) となっていないか？

Xcode 上でビルドしたら成功しないか？
iOS デバイスを接続せずに npm run build-deploy-ios を実行したら成功しないか？

Xcode 上でのビルド、iOS デバイスを接続せずに CLI でビルドが成功するのであれば、src-cordova/build.json を作成/修正すると解決するはず。

まとめ

プラグインは dpa99c/cordova-plugin-firebasex を利用
- arnesson/cordova-plugin-firebase ではないので注意
iOS の証明書周りでハマるポイントがあるので注意

その他・メモ

Firebase 以外の方法

Firebase 以外だと AWS SNS を使うのが一般解(っぽい)

FCM(Firebase Cloud Messaging) について

Cloud messaging - dpa99c/cordova-plugin-firebasex に概要がまとまっている。

Notification messages
- Background
  - OS System notification
    - onMessageReceived コールバックが呼ばれて、引数に tap: "background" が付与される
- Foreground
  - Not OS system notification
  - notification_foreground: true を追加するとシステム通知もするっぽい
    - onMessageReceived コールバックが呼ばれて、引数に tap: "foreground" が付与される
Data messages
- 任意の Key/Value 構造でデータを送れるっぽい？
getToken で FCM で利用するトークンの取得
onTokenRefresh で FCM で利用するトークンの取得
- Firebase 側で更新される可能性があるため、getToken よりも onTokenRefresh を使う方が良いっぽい？
- 併用するのが良さそう？？
onMessageReceived でメッセージ受信時の処理
subscribe でメッセージの購読
- Firebase Console で事前にトピック作成などの作業は不要(アプリ側で subscribe("news") とすると自動で生成される)
onMessageReceived のコールバック関数が発火するのは、プッシュ通知をタップしたとき(iOS で確認)
- 2件来ていて、そのうちの1件のみタップした場合は、タップした分に対してのみ初めてコールバック関数が動作
iOS でユーザーインタラクション無しでコールバック関数を動作させるには apns: payload: aps: content-available を 1 に設定(※未検証)
- 詳細は iOS background notifications
Android だとデフォルトでコールバック関数が発動するっぽい？(※未検証)
- Android notifications
未開封のプッシュ通知を取得するような API は無いっぽい

他のプラグイン

Cloud Messaging 特化なら chemerisuk/cordova-plugin-firebase-messaging: Cordova plugin for Firebase Cloud Messaging も良さげ？

Vue + Cordova + Firebase でプッシュ通知

はじめに

TL;DR

目次

環境・条件

詳細

事前準備

iOS: Identifier/Profile 作成

Identifier 作成

プッシュ通知用 証明書の登録

Profile 作成

プロジェクト作成

vue create

vue add cordova

ビルド確認

iOS

Android

Firebase の設定

プロジェクト作成

アプリの追加

iOS

アプリ情報 入力

GoogleService-Info.plist をダウンロード

Firebase SDK の追加

初期化コードの追加

Android

アプリ情報 入力

google-services.json をダウンロード

Firebase SDK の追加

.gitignore を編集

APNs 証明書の登録

cordova-plugin-firebasex の追加

ビルド設定

Android

iOS

.eslintrc.js 設定変更

Xcode 設定変更

src-cordova/build.json 作成

プッシュ通知受信処理の作成

プッシュ通知の受信確認

Android

テストメッセージ受信

参考: メッセージハンドラの受信内容

トピック受信

参考: メッセージハンドラの受信内容

iOS

参考: メッセージハンドラの受信内容

フォアグラウンドでのプッシュ通知受信

ハマった箇所

cordova-plugin-firebase の追加でエラー

cordova-plugin-firebase から移行

iOS ビルドエラー

requires a provisioning profile with the Push Notifications feature

まとめ

その他・メモ

Firebase 以外の方法

FCM(Firebase Cloud Messaging) について

他のプラグイン

参考文献

関連記事

r17n

Hexo でブログを作成して Netlify で公開するまで

はじめに

TL;DR

目的・やったこと

Python で MySQL の操作が可能な ORM peewee

はじめに

Git で#から始まるコミットメッセージを登録

はじめに

TL;DR

目的・やったこと

Python requests で画像をダウンロードして保存する方法

はじめに

TL;DR

目的・やったこと

Rails で既存の DB を利用するアプリケーションの作成方法(DB 参照のみ)

はじめに

TL;DR

目的・やったこと

Python boto3 で AWS S3 を操作する

プッシュ通知用証明書の登録

アプリ情報入力

`GoogleService-Info.plist` をダウンロード

アプリ情報入力

`google-services.json` をダウンロード

`.gitignore` を編集

`cordova-plugin-firebasex` の追加

`cordova-plugin-firebase` の追加でエラー

`cordova-plugin-firebase` から移行