前提・実現したいこと
Monacaでfirebaseを使ってアプリを開発しています。
少し前にWKWebViewに変更し移行が完了したと思っていましたが、firebaseのcloudFirestoreとの通信ができていないようです。
作っていたアプリはそのfirebaseとの通信以外は正常に動いています。ちなみにauthenticationとcloudFirestoreを利用していますが、cloudFirestoreのデータが取れません。ログインはできるので、Authenticationは通信できているようです。
発生している問題・エラーメッセージ
Monacaの開発環境でのデバッガー?プレビュー?上では正しくデータを取得してくれるが、ビルドをして動かすと「まだ記録がありません。」という表示になってしまう。おそらくカスタムビルドデバッガーや、プレビュー上ではUIWebViewでやっていて、ビルドしたものはWKWebViewになっていて、その辺りが原因ではないかと考えています。
エラーメッセージについてですが、エラーメッセージを実機上またはシミュレータ上で確認する方法がわからないので載せることができません。これについてもやり方が分かる方は教えていただきたいです。
該当のソースコード
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 9 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 10 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 11 <link rel="stylesheet" href="components/loader.css"> 12 <link rel="stylesheet" href="css/style.css"> 13 <!-- The core Firebase JS SDK is always required and must be listed first --> 14 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script> 15 16 <!-- TODO: Add SDKs for Firebase products that you want to use 17 https://firebase.google.com/docs/web/setup#available-libraries --> 18 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script> 19 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script> 20 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script> 21 <!-- Vue.js--> 22 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 23 <script src="js/app.js"></script> 24</head> 25<body> 26 <ons-navigator swapable id="myNavigator" page="index.html"></ons-navigator> 27</body> 28</html> 29 30<template id="index.html"> 31 <ons-page id="index"> 32 <div class="background" style="background-color: #FFFFFF;"></div> 33 <div class="content" v-cloak> 34 <div v-if="!tutorialFinish"> 35 <a @click="goTutorial"><img class="logo" src="images/ダウンロード後_シンボル_顔なし.png"></a> 36 </div> 37 <div v-else> 38 <header v-show="currentUser != null"> 39 <div :class="{ menu_btn: true, open_: menuFlag }" @click="naviOpen"> 40 <span class="menu_trigger"> 41 <span></span><span></span><span></span> 42 </span> 43 </div> 44 </header> 45 <transition> 46 <div class="nav" v-show="menuFlag"> 47 <input type="checkbox" id="acd-check1" class="acd-check"> 48 <label for="acd-check1" class="acd-label">OPTIONS </label> 49 <div class="acd-content"> 50 <a @click="urlClick">利用規約</a> 51 <a @click="urlClick">プライバシー<br>ポリシー</a> 52 <a @click="goFeedback">フィードバック</a> 53 <a @click="goTutorial">チュートリアル</a> 54 </div> 55 <a @click="logoutButtonClick" class="signout">SIGN OUT</a> 56 </div> 57 </transition> 58 59 <div v-show="loading"> 60 <div id="notSignIn" v-if="currentUser == null"> 61 <p><img class="logo" src="./images/サインイン前_シンボル.png" alt="ロゴ"></p> 62 <a @click="loginButtonClick"><img class="img-button" src="images/各種ボタン/signin_ボタン.png"></a><br> 63 <a @click="signUpButtonClick"><img class="img-button" src="images/各種ボタン/register_ボタン.png"></a> 64 </div> 65 <div id="isSignIn" v-else> 66 <a @click="goAnalyze"><img class="logo" src="./images/home_シンボル.png" alt="ロゴ"></a> 67 <p style="color: #7B7B7B; margin: 0;">Recents</p> 68 <div class="recode" v-if="recent.length!=0"> 69 <a v-for="data in recent" class="data" @click="onDataButton(data)"> 70 <span>{{ data.timestamp.getFullYear() }}/{{ ('0'+(data.timestamp.getMonth()+1)).slice(-2) }}/{{ data.timestamp.getDate() }}</span> 71 <p>{{ data.answers[0] }}</p> 72 <hr> 73 </a> 74 </div> 75 <div v-else> 76 <p style="padding: 80px 0;">まだ記録がありません。</p> 77 </div> 78 </div> 79 </div> 80 <my-toolbar v-show="currentUser != null"></my-toolbar> 81 </div> 82 </div> 83 84 <script> 85 ons.getScriptPage().onInit = function() { 86 sBanner(); 87 var vm_i = new Vue({ 88 el: '#index', 89 data: { 90 currentUser: null, 91 recent: [], 92 menuFlag: false, 93 tutorialFinish: localStorage.getItem('tutorial_finished'), 94 loading: false, 95 }, 96 created: function() { 97 98 }, 99 methods: { 100 loginButtonClick: function () { 101 hBanner(); 102 document.getElementById("myNavigator").pushPage('account.html', {data: {title: 'アカウント'}}); 103 }, 104 signUpButtonClick: function () { 105 hBanner(); 106 document.getElementById("myNavigator").pushPage('register.html', {data: {title: 'アカウント'}}); 107 }, 108 logoutButtonClick: function () { 109 firebase.auth().signOut(); 110 this.menuFlag = false; 111 }, 112 naviOpen: function() { 113 this.menuFlag = !this.menuFlag; 114 }, 115 onDataButton: function(data) { 116 hBanner(); 117 if (data.complete) { 118 document.getElementById("myNavigator").pushPage('result.html', { 119 data: { 120 qAndA: data, 121 recode: true, 122 } 123 }); 124 } else { 125 document.getElementById("myNavigator").pushPage('question.html', { 126 data: { 127 qAndA: data, 128 } 129 }); 130 } 131 }, 132 goTutorial: function() { 133 hBanner(); 134 document.getElementById("myNavigator").pushPage('explain.html'); 135 }, 136 goAnalyze: function() { 137 document.getElementById("myNavigator").resetToPage('analyze.html'); 138 }, 139 goFeedback: function() { 140 hBanner(); 141 document.getElementById("myNavigator").pushPage('feedback.html'); 142 }, 143 urlClick: function() { 144 window.open("https://...", "_system", "location=no,usewkwebview=yes"); 145 } 146 }, 147 }); 148 firebase.auth().onAuthStateChanged(function(user) { 149 if (user) { 150 console.log(user.uid); 151 vue.recent = getQuestionAndAnswer(2); 152 ons.notification.toast(vue.recent, {timeout: 2000, animation: "fall"}); 153 } else { 154 console.log("not LogedIn"); 155 } 156 vue.currentUser = user; 157 vue.loading = true; 158 }); 159 } 160 </script> 161 </ons-page> 162</template>
試したこと
Monacaで様々なビルドでの実行を行ってみました。それぞれのビルドでのバグの状態は以下の通りです。
カスタムビルドデバッガー:正しくデータが表示される。
デバッグビルド:表示されない。
シミュレータービルド:表示されない。
https://strobolight-developers-blog.hatenablog.com/
上記サイトの
<preference name=“InterceptRemoteRequests” value=“none” />config.xmlへ下記を入れることで、取得出来るようになりました。
という部分をやってみようとしたのですが、InterceptRemoteRequestsがないみたいなエラーが発生しました。
補足情報(FW/ツールのバージョンなど)
- 開発環境
Macbook Air 2020
Visual Studio Code
Monaca localkit 3.4.3 または Monaca Cloud IDE
- Monacaプラグイン
cordova-plugin-admob-free:v0.27.0
Cordova WKWebView File XHR Plugin:v2.1.4
cordova-custom-config:v5.1.0
monaca-plugin-monaca-core:v3.3.0
cordova-plugin-x-socialsharing:v5.6.5
cordova-plugin-splashscreen:v5.0.3
cordova-plugin-whitelist:v1.3.3
cordova-plugin-wkwebview-engine:v1.2.1
- シミュレーター
実機:iPhone Xs(13.4.1)
シミュレータ:iPhone SE(2nd Generation)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。