はじめに

Cordova で Repro とカスタム URL スキームを使ってディープリンクを扱う方法。

TL;DR

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

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
    1. 動作確認端末
  4. 詳細
    1. カスタム URL スキーム
      1. インストール
      2. index.html 修正
      3. config.xml 修正
      4. JS 修正
    2. Repro プッシュ通知設定
      1. 事前準備
      2. ディープリンク
    3. 動作確認
    4. ハマったところ
      1. Android でカスタム URL スキームを開けない
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$ sw_vers
ProductName:	macOS
ProductVersion:	11.2.1
BuildVersion:	20D74

$ node -v
v12.7.0

$ npm -v
6.14.5

$ cordova -v
10.0.0

$ cordova platforms
6.0.0
Installed platforms:
  android 9.0.0
  ios 6.1.1

$ xcodebuild -version
Xcode 12.4
Build version 12D4e

動作確認端末

  • iPhone 11 Pro (iOS 14.4)
  • Huawei nova lite2 (Android 9)

詳細

Repro のプッシュ通知でディープリンクを使う方法はドキュメント通りなので、カスタム URL スキーム の設定がほぼすべて。

カスタム URL スキーム

EddyVerbruggen/Custom-URL-scheme を使う。

インストール

EddyVerbruggen/Custom-URL-scheme インストール。

インストール時に --variable URL_SCHEME=<YOUR_SCHEME> でカスタム URL スキームを指定する。なお、ハイフン(-)、大文字、2単語以上、既に使われているものなどは指定不可。

1
2
3
4
5
# ハイフン(-) は使えない: my-scheme -> NG, myscheme -> OK
# 複数単語は使えない: my scheme -> NG, myscheme -> OK
# 大文字は使えない: myScheme -> NG, myscheme -> OK
# 既に使われているものは使えない: twitter, fb など
$ cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycoolapp

index.html 修正

参考: javascript - Using handleOpenURL with Custom URL scheme in Cordova - Stack Overflow

index.html を修正。
Content-Security-Policy にカスタム URL スキームを追加、今回は mycoolapp: の記述を追加。

1
2
3
4
5
6
7
8
<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src * mycoolapp: data: gap: https://ssl.gstatic.com;
    style-src * 'self' 'unsafe-inline';
    script-src * 'self' 'unsafe-inline' 'unsafe-eval' blob:
  "
/>

config.xml 修正

参考:

allow-intent, platform name="android" 配下に config-file(intent-filter を追加する設定)を追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version='1.0' encoding='utf-8'?>
<widget
  id="my.cool.app"
  version="1.0.0"
  xmlns="http://www.w3.org/ns/widgets"
  xmlns:cdv="http://cordova.apache.org/ns/1.0"
  xmlns:android="http://schemas.android.com/apk/res/android"
>
  <!-- 中略 -->
  <!-- カスタムURLスキーム -->
  <allow-intent href="mycoolapp:*" />  <!-- 追加 -->
  <platform name="android">
    <!-- 中略 -->
    <config-file target="app/src/main/AndroidManifest.xml" parent="/manifest/application/activity">  <!-- 追加 -->
      <intent-filter>  <!-- 追加 -->
        <action android:name="android.intent.action.VIEW" />  <!-- 追加 -->
        <category android:name="android.intent.category.DEFAULT" />  <!-- 追加 -->
        <category android:name="android.intent.category.BROWSABLE" />  <!-- 追加 -->
        <data android:scheme="mycoolapp"/>  <!-- 追加 -->
      </intent-filter>  <!-- 追加 -->
    </config-file>  <!-- 追加 -->
  </platform>
</widget>

JS 修正

参考:

If you want to alert the URL for testing the plugin, at least on iOS you need to wrap it in a timeout like this:
[Google翻訳] プラグインをテストするためにURLにアラートを送信する場合は、少なくともiOSでは、次のようなタイムアウトでプラグインをラップする必要があります。

README にも書かれている通り、iOS で alert を出す場合は setTimeout を使う必要がある。

自分は Cordova + Vue を使っており src/main.js を修正した。以下は alert を表示する例だが、「指定のページを表示させたい」とか「特定の処理を行いたい」とかを url(ディープリンク) の内容をもとに実装すれば OK。

1
2
3
4
5
6
7
8
9
import Vue from 'vue';
// 略
new Vue({/**/}).$mount('#app');
// 略
window.handleOpenURL = (url) => {
  setTimeout(() => {
    alert(`on: window handleOpenURL: ${url}`);
  }, 0);
}

Repro プッシュ通知設定

事前準備

以下を参考に行う。本記事では省略。

ディープリンク

参考:

Web から設定する場合は以下のように設定する。

API を使う場合は「スタンダード形式でdeeplink_url を設定」すれば良い。

1
2
3
4
5
6
7
8
9
10
11
{
  "audience": {
    "user_ids": [
      "user-1234"
    ]
  },
  "notification": {
    "message": "Hello!",
    "deeplink_url": "mycoolapp://home?foo=bar"
  }
}

動作確認

画像など省略。

ここまでの設定で iOS/Android ともに「Repro でプッシュ通知を受信して、

ハマったところ

Android でカスタム URL スキームを開けない

参考:

上記 Issue にもある通り cordova-android v7 以降だと上手く動かないっぽい、自分は cordova-android v9.0.0 でダメだった。(「簡単になおせるよ」と言われてなぜかずっと取り込まれていない。。。)

フォーク先ではプラグインに手を入れている(当たり前)が、プラグインは修正したくないので前述の通り config.xml を修正した。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version='1.0' encoding='utf-8'?>
<widget
  id="my.cool.app"
  version="1.0.0"
  xmlns="http://www.w3.org/ns/widgets"
  xmlns:cdv="http://cordova.apache.org/ns/1.0"
  xmlns:android="http://schemas.android.com/apk/res/android"
>
  <!-- 中略 -->
  <!-- カスタムURLスキーム -->
  <allow-intent href="mycoolapp:*" />
  <platform name="android">
    <!-- 中略 -->
    <config-file target="app/src/main/AndroidManifest.xml" parent="/manifest/application/activity">
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="mycoolapp"/>
      </intent-filter>
    </config-file>
  </platform>
</widget>

まとめ

参考文献

関連記事

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