I am developing an application using firebase in Monaca.
I thought I changed to WKWebView a while ago and the migration was completed, but it seems that communication with fireFire's cloudFirestore is not possible.
The application I was making is working normally except for communication with the firebase. By the way, I am using authentication and cloudFirestore, but I can't get data from cloudFirestore. Since you can log in, Authentication seems to be communicating.

Debugger in Monaca development environment? preview? The above will get the data correctly, but if you build and run it, the display will say "No record yet." I'm probably using a custom build debugger or UIWebView on the preview, and what I built is WKWebView, and I think that's the reason.

Regarding the error message, I can not post it because I do not know how to check the error message on the actual machine or simulator. If i know how to do this as well, please let me know.

Applicable source code
<!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: content: https://ssl.gstatic.com;style-src *'unsafe-inline';script-src * 'unsafe-inline''unsafe-eval'"><script src="components/loader.js"></script><link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"><link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"><script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script><link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css"><!-- The core Firebase JS SDK is always required and must be listed first --><script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script><!-- TODO: Add SDKs for Firebase products that I want to use
    https://firebase.google.com/docs/web/setup#available-libraries --><script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script><script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script><script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script><!-- Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="js/app.js"></script></head><body><ons-navigator swapable page="index.html"></ons-navigator></body></html><template><ons-page>                    logo</p>          logo          <p>Recents</p>                                      <span>{{ data.timestamp.getFullYear() }}/{{ ('0'+(data.timestamp.getMonth()+1)).slice(-2) }}/{{ data.timestamp.getDate () }}</span>            <p>{{ data.answers[0] }}</p>            <hr>                                                <p>No record yet.</p>                                  <my-toolbar v-show="currentUser != null"></my-toolbar>          <script>    ons.getScriptPage().onInit = function() {
        var vm_i = new Vue({
          data: {
            currentUser: null,
            recent: [],

            menuFlag: false,
            tutorialFinish: localStorage.getItem('tutorial_finished'),
            loading: false,

          created: function() {

          methods: {
            loginButtonClick: function () {
              hBanner();document.getElementById("myNavigator").pushPage('account.html', {data: {title:'account'}});

            signUpButtonClick: function () {
              document.getElementById("myNavigator").pushPage('register.html', {data: {title:'account'}});

            logoutButtonClick: function () {
              this.menuFlag = false;

            naviOpen: function() {
              this.menuFlag = !this.menuFlag;

            onDataButton: function(data) {
              if (data.complete) {
                document.getElementById("myNavigator").pushPage('result.html', {
                  data: {
                    qAndA: data,
                    recode: true,
              } else {
                document.getElementById("myNavigator").pushPage('question.html', {
                  data: {
                    qAndA: data,

            goTutorial: function() {

            goAnalyze: function() {

            goFeedback: function() {
            },urlClick: function() {
              window.open("https://...", "_system", "location=no,usewkwebview=yes");

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            vue.recent = getQuestionAndAnswer(2);
            ons.notification.toast(vue.recent, {timeout: 2000, animation: "fall"});
          } else {
            console.log("not LogedIn");
          vue.currentUser = user;
          vue.loading = true;
What I tried

I tried running various builds with Monaca. The bug status in each build is as follows.
Custom Build Debugger: Data is displayed correctly.
Debug build: Not displayed.
Simulator build: Not displayed.

Of the above site

You can get it by putting the following in config.xml.

I tried to do that part, but I got an error that there is no InterceptRemoteRequests.

Supplemental information (FW/tool ​​version, etc.)
  • Development environment
    Macbook Air 2020
    Visual Studio Code
    Monaca localkit 3.4.3 or Monaca Cloud IDE

  • Monaca plugin
    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

  • simulator
    Actual machine: iPhone Xs (13.4.1)
    Simulator: iPhone SE(2nd Generation)