16747


MonacaでWeb SQLを使用したアプリを開発しましたが、Androidにおいて次の現象が解決できません。  
※Cordova InAppBrowserプラグイン有効。  
※Monacaデバッガー、リリースビルドで現象を確認。

下記の例を起動すると、page1で10件分のリストが表示されます。  
page2に切り替え、「stackoverflow」ボタンをタップするとWebViewが表示されます。  
「×」ボタンまたは「戻る」ボタンをタップして閉じ、page1に切り替えると、エラーコード:5 メッセージ:"no such table:
t_test"が発生します。

実際は、Dropbox datastore APIの認証でWebViewを使用しています。  
ログイン画面で「×」ボタンまたは「戻る」ボタンをタップして閉じ、一覧などの表示画面に切り替えると上記エラーが発生します。  
※API内のwindow.openで"_blank"以外は認証に失敗します。  
また、appC
cloudプラグインでもカットイン広告の画面遷移にWebViewを使用しており、「戻る」ボタンで戻ると同様のエラーが発生するため、導入を断念しました。

作りが悪いのか、諦めるしかないのか、ご教示のほどよろしくお願いします。

関連した内容と思われるリンク  
1.[inAppbrowser and webSql
failure](http://community.phonegap.com/nitobi/topics/inappbrowser_and_websql_failure)  
2.[Apache
Cordova](https://issues.apache.org/jira/browse/CB-3550?jql=project%20%3D%20CB%20AND%20text%20~%20%22inappbrowser%20database%22)

[code]

    <!DOCTYPE HTML>
    <html la="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <script>
    var app = ons.bootstrap("myApp", ["onsen"]);
    // DB初期化
    initData();
    // page1
    app.controller("page1Controller", ["$scope", function($scope) {
        ons.ready(function() {
            $scope.listTable = [];
            getData($scope);
        });
    }]);
    // page2
    app.controller("page2Controller", ["$scope", function($scope) {
        $scope.goUrl = function() {
            window.open("http://ja.stackoverflow.com/", "_blank", "location=yes");
        };
    }]);
    // DB初期化
    function initData() {
        var sql = null;
        var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
        db.transaction(function(t) {
            sql  = "CREATE TABLE IF NOT EXISTS t_test (";
            sql += " id INTEGER,";
            sql += " name TEXT)";
            t.executeSql(sql, [], function(t) {
                sql = "DELETE FROM t_test";
                t.executeSql(sql, []);
                sql = "INSERT INTO t_test (id, name) VALUES(?, ?)";
                t.executeSql(sql, [1, "佐藤"]);
                t.executeSql(sql, [2, "鈴木"]);
                t.executeSql(sql, [3, "高橋"]);
                t.executeSql(sql, [4, "田中"]);
                t.executeSql(sql, [5, "伊藤"]);
                t.executeSql(sql, [6, "山本"]);
                t.executeSql(sql, [7, "渡辺"]);
                t.executeSql(sql, [8, "中村"]);
                t.executeSql(sql, [9, "小林"]);
                t.executeSql(sql, [10, "加藤"]);
            });
        });
    }
    // 名簿データ取得
    function getData($scope) {
        var sql = null;
        var list = [];
        var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
        db.transaction(function(t) {
            sql  = "SELECT *";
            sql += " FROM t_test";
            sql += " ORDER BY id";
            t.executeSql(sql, [], function(t, r) {
                for (i = 0; i < r.rows.length; i++) {
                    list.push({
                        id:     r.rows.item(i).id,
                        name:   r.rows.item(i).name
                    });
                }
                $scope.listTable = list;
                $scope.$apply();
            },
            function(t, err) {
                console.log(err.code + " " + err.message);
            });
        });
    }
        </script>
    </head>
    <body>
        <ons-template id="page1.html">
            <ons-page ng-controller="page1Controller">
                <ons-toolbar fixed-style>
                    <div class="center">Page1</div>
                </ons-toolbar>
                <ons-list>
                    <ons-list-header>
                        名簿
                    </ons-list-header>
                    <ons-list-item ng-repeat="item in listTable">
                        <ons-row>
                            <ons-col width="20%">
                                {{item.id}}
                            </ons-col>
                            <ons-col width="80%">
                                {{item.name}}
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-template>
    
        <ons-template id="page2.html">
            <ons-page ng-controller="page2Controller">
                <ons-toolbar fixed-style>
                    <div class="center">Page2</div>
                </ons-toolbar>
                <br>
                <div style="text-align: center;">
                    <ons-button ng-click="goUrl()">stackoverflow</ons-button>
                </div>
            </ons-page>
        </ons-template>
    
        <ons-tabbar>
            <ons-tab page="page1.html" label="Page1" icon="ion-home" active="true"></ons-tab>
            <ons-tab page="page2.html" label="Page2" icon="ion-earth"></ons-tab>
        </ons-tabbar>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-09-12T08:59:51.800
16543
2015-09-18T09:25:08.443
2015-09-12T09:41:01.210
9566
9566
question
monaca angularjs cordova sql
Monaca InAppBrowserプラグインでWebView表示後、Web SQLで「no such table」エラーが発生する


自己回答です。  
InAppBrowserプラグインを使用してブラウザを表示すると、DB参照先が

[code]

    /data/data/パッケージ名/app_database
    
[/code]

から

[code]

    /data/data/パッケージ名/app_inAppBrowserDB
    
[/code]

に変わってしまうため、`"no such table"`が発生するようです。

[table not found when coming back from in app browser link:
Phonegap](https://stackoverflow.com/questions/16871103/table-not-found-when-
coming-back-from-in-app-browser-link-phonegap)

カスタマイズしたCordovaプラグインを導入すれば解決しそうですが、BASICプランなのでそれ以外の方法を考えました。

起動時に`hidden=yes`でブラウザを表示させ、数秒待ってブラウザを閉じた後にテーブルを作成します。  
DB参照先が`app_inAppBrowserDB`に切り替わった後にテーブルを作成するため、以降は`"no such
table"`が発生せずに動作するようです。

書き直したコードを載せておきます。

[code]

    <!DOCTYPE HTML>
    <html la="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <script>
    var app = ons.bootstrap("myApp", ["onsen"]);
    // index
    app.controller("indexController", ["$scope", function($scope) {
        $scope.ready = false;
        ons.ready(function() {
            var w = window.open("", "_blank", "location=no,hidden=yes");
    console.log("open browser");
            setTimeout(function() {
                w.close();
    console.log("close browser");
                initData($scope);
            }, 500);
        });
        $scope.$on("initData", function(e) {
            $scope.ready = true;
            $scope.$apply();
    console.log("ready");
        });
    }]);
    // page1
    app.controller("page1Controller", ["$scope", function($scope) {
        $scope.listTable = [];
        // indexControllerのreadyを監視
        $scope.$watch("ready", function(newVal, oldVal) {
            if (newVal == true) {
                getData($scope);
            }
        });
        $scope.$on("getData", function(e, list) {
            $scope.listTable = list;
            $scope.$apply();
    console.log("get data");
        });
    }]);
    // page2
    app.controller("page2Controller", ["$scope", function($scope) {
        $scope.goUrl = function() {
            window.open("http://ja.stackoverflow.com/", "_blank", "location=yes");
        };
    }]);
    // DB初期化
    function initData($scope) {
        var sql = null;
        var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
        db.transaction(function(t) {
            sql  = "CREATE TABLE IF NOT EXISTS t_test (";
            sql += " id INTEGER,";
            sql += " name TEXT)";
            t.executeSql(sql, [], function(t) {
                sql  = "SELECT COUNT(*) AS rowcount";
                sql += " FROM t_test";
                t.executeSql(sql, [], function(t, r) {
    console.log("reccount = " + r.rows.item(0).rowcount);
                    if (r.rows.item(0).rowcount == 0) {
                        sql = "INSERT INTO t_test (id, name) VALUES(?, ?)";
                        t.executeSql(sql, [1, "佐藤"]);
                        t.executeSql(sql, [2, "鈴木"]);
                        t.executeSql(sql, [3, "高橋"]);
                        t.executeSql(sql, [4, "田中"]);
                        t.executeSql(sql, [5, "伊藤"]);
                        t.executeSql(sql, [6, "山本"]);
                        t.executeSql(sql, [7, "渡辺"]);
                        t.executeSql(sql, [8, "中村"]);
                        t.executeSql(sql, [9, "小林"]);
                        t.executeSql(sql, [10, "加藤"]);
    console.log("insert data");
                    }
                });
            });
        },
        function(err) {
            console.log(err.code + " " + err.message);
        },
        function() {
            $scope.$emit("initData");
        });
    }
    // 名簿データ取得
    function getData($scope) {
        var sql = null;
        var list = [];
        var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
        db.transaction(function(t) {
            sql  = "SELECT *";
            sql += " FROM t_test";
            sql += " ORDER BY id";
            t.executeSql(sql, [], function(t, r) {
                for (i = 0; i < r.rows.length; i++) {
                    list.push({
                        id:     r.rows.item(i).id,
                        name:   r.rows.item(i).name
                    });
                }
            },
            function(t, err) {
                console.log(err.code + " " + err.message);
            });
        },
        function(err) {
            console.log(err.code + " " + err.message);
        },
        function() {
            $scope.$emit("getData", list);
        });
    }
        </script>
    </head>
    <body ng-controller="indexController">
        <ons-template id="page1.html">
            <ons-page ng-controller="page1Controller">
                <ons-toolbar fixed-style>
                    <div class="center">Page1</div>
                </ons-toolbar>
                <ons-list>
                    <ons-list-header>
                        名簿
                    </ons-list-header>
                    <ons-list-item ng-repeat="item in listTable">
                        <ons-row>
                            <ons-col width="20%">
                                {{item.id}}
                            </ons-col>
                            <ons-col width="80%">
                                {{item.name}}
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                </ons-list>
            </ons-page>
        </ons-template>
    
        <ons-template id="page2.html">
            <ons-page ng-controller="page2Controller">
                <ons-toolbar fixed-style>
                    <div class="center">Page2</div>
                </ons-toolbar>
                <br>
                <div style="text-align: center;">
                    <ons-button ng-click="goUrl()">stackoverflow</ons-button>
                </div>
            </ons-page>
        </ons-template>
    
        <ons-tabbar>
            <ons-tab page="page1.html" label="Page1" icon="ion-home" active="true"></ons-tab>
            <ons-tab page="page2.html" label="Page2" icon="ion-earth"></ons-tab>
        </ons-tabbar>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-09-18T09:25:08.443
16747
2015-09-18T09:25:08.443
2017-05-23T12:38:55.307
-1
9566
16543
answer