Monacaでloader.jsを読み込むとFirestoreのデータが取得できない。

前提・実現したいこと

Monaca, Vue, Vuex を使ったモバイルアプリを作っています。
このアプリで、FirebaseのCloud Firestoreからデータを取得しようとしています。
Monaca IDE でiOSのデバッグビルドで動かしたところ、下記の状態に陥っています。

www/index.html でloader.jsを読み込んだ場合、Firestoreからデータが取得出来ない。
www/index.html でloader.jsを読まない場合、Firestoreからデータが取得出来る。

Push通知などのPluginを使用するため、loader.jsはどうしても外すことが出来ません。
どなたか、情報があれば教えて頂けないでしょうか？

発生している問題・エラーメッセージ

Firestoreからの情報が取得出来ない場合には、Webインスペクタのコンソールに下記のエラーが出ます。

[Error] [2018-10-18T07:01:04.315Z]  @firebase/firestore:
[Error] Firestore (5.5.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

該当のソースコード

Firestoreの初期化、データ取得を行っている箇所のソースコードです。

javascript
1〜〜 省略 〜〜
2
3init({ commit }) {
4  const db = firebase.firestore()
5  db.settings({ timestampsInSnapshots: true })
6  commit('setDatabase', db)
7},
8
9connect({ commit, state }) {
10  const msg = state.database.collection('messages')
11
12  // 更新時コールバックの登録
13  let unsubscribe = msg.orderBy('_createdAt').onSnapshot(
14    function(snapshot) {
15      snapshot.docChanges().forEach(function(change) {
16        if (change.type === 'added') {
17          commit('addMessage', change.doc.data())
18        }
19        if (change.type === 'removed') {
20          commit('removeMessage', change.doc.get('id'))
21        }
22      })
23    },
24    function(err) {
25      Log.error(err)
26    }
27  )
28
29  commit('setConnection', {
30    ref: msg,
31    unsub: unsubscribe
32  })
33},
34〜〜 省略 〜〜

試したこと

index.htmlから、Pluginやライブラリを読み込む components/loader.js を外すと、Firestoreのデータが取得できる。
index.htmlの components/loader.js を読み込む位置を変える → 取得出来ない
index.htmlの components/loader.js を cordova.js へ変える → 取得出来ない
index.htmlの Content-Security-Policy へ connect-src * blob: を追加 → 取得出来ない

<meta http-equiv=Content-Security-Policy content="default-src * data: gap: https://ssl.gstatic.com; connect-src * blob:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

補足情報（FW/ツールのバージョンなど）

動作確認端末

iPhoneX 11.4.1
iPhone6s Plus 11.4.1

ビルド環境

cordova: 7.1.0
cordova-ios: 4.5.4

依存パッケージ(package.jsonより抜粋)

json
1"dependencies": {
2    "axios": "^0.18.0",
3    "cordova-custom-config": "5.0.2",
4    "cordova-plugin-app-version": "",
5    "cordova-plugin-inappbrowser": "2.0.1",
6    "cordova-plugin-splashscreen": "5.0.1",
7    "cordova-plugin-whitelist": "1.3.3",
8    "cordova-plugin-wkwebview-file-xhr": "",
9    "cordova-plugin-wkwebview-inputfocusfix": "",
10    "date-fns": "^1.29.0",
11    "firebase": "^5.5.2",
12    "monaca-plugin-monaca-core": "3.2.0",
13    "onsenui": "^2.10.3",
14    "phonegap-plugin-push": "",
15    "vue": "^2.5.16",
16    "vue-analytics": "^5.16.0",
17    "vue-axios": "^2.1.3",
18    "vue-onsenui": "^2.6.1",
19    "vuejs-logger": "^1.5.3",
20    "vuex": "^3.0.1"
21}

追記(2018/10/19)

index.htmlを追記します。

html
1<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv=Content-Security-Policy content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <meta name=format-detection content="telephone=no">
2
3    <!-- 元の位置
4    <script type=text/javascript src=components/loader.js></script>
5    -->
6
7    <link rel=stylesheet type=text/css href=components/loader.css>
8    <link href=app.css rel=stylesheet>
9  </head>
10  <body>
11    <div id=app></div>
12
13    <script type=text/javascript src=runtime~app.bundle.js></script>
14    <script type=text/javascript src=vendors~app.bundle.js></script>
15    <script type=text/javascript src=app.bundle.js></script>
16
17    <!-- 移動後 -->
18    <script type=text/javascript src=components/loader.js></script>
19
20  </body>
21</html>

行動規範の内容に同意します

回答1件

ベストアンサー

index.htmlで読み込んでいるスクリプトの順番はどのようになっていますか？
loader.jsを読み込む順番を一番最後にしてみても、変わらないでしょうか？

2018/10/22 追記

config.xmlに

    <preference name="InterceptRemoteRequests" value="none" />

を追加すると、httpsプロトコルに対してcordova-plugin-wkwebview-file-xhr プラグインが動作しなくなる（fileプロトコルのみに対して動作する）ようなので、解決出来るようです。お試しいただけますでしょうか？

投稿2018/10/19 05:23

編集2018/10/23 01:32

KNaito

総合スコア376

ujiro99

2018/10/19 06:20

ご回答ありがとうございます。本文へindex.htmlを追記しました。もともとindex.htmlの先頭でloader.jsを実行していたのを一番最後にして見ましたが、動作、エラー内容は変わりませんでした。

KNaito

2018/10/19 06:34

なるほど、、、。loader.jsそのものが干渉してしまっているのか、それとも、そのうちの一部だけが干渉しているのでしょうね。とりあえず、loader.jsを読み込んでいる箇所を外して、その代わりに ``` <script src="cordova.js"></script> ``` としてみて、動作するか確認出来ますでしょうか？　この状態でも、本来であればプラグイン等は動作するはずです。

ujiro99

2018/10/19 08:12

確認致しました。ログのフォーマットに変化はありましたが、状態としては変わらないようです、、。 ``` [Error] [2018-10-19T08:08:46.290Z] @firebase/firestore: – "Firestore (5.5.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.↵This typically indicates that you…" ``` Push通知等のプラグインは問題無く動作しているようです。

KNaito

2018/10/22 05:43 編集

報告ありがとうございます。cordovaで簡単なテストプロジェクトを作って確認してみたのですが、`cordova-plugin-wkwebview-file-xhr`というプラグインに問題があるようです。このプラグインを外して、その代わりに、`cordova-plugin-wkwebview-engine` を入れれば、動作しないでしょうか？私のテスト環境では、`cordova-plugin-wkwebview-engine`だけであれば、firestoreが動作したのですが、`cordova-plugin-wkwebview-file-xhr`を入れてしまうと、firestoreは動作しませんでした。 `cordova-plugin-wkwebview-file-xhr`というプラグインは、XMLHttpRequest（やwindow.fetch）を上書きしてしまうので、それがfilebaseのライブラリに悪影響を起こしているように思います。

KNaito

2018/10/22 05:55

その後、さらに調べてみたのですが、config.xmlに、次を入れればいけそうです。 <preference name="InterceptRemoteRequests" value="none" />

KNaito

2018/10/22 05:57

上記内容を、回答に追記しました。

ujiro99

2018/10/23 03:09 編集

ご記載頂いた方法で解決することが出来ました！プラグインの調査までして頂き、誠にありがとうございます。プラグインを使うときには影響範囲を見極める必要があると、改めて認識致しました。。

KNaito

2018/10/23 03:10

うまく動作したようでよかったです！