在普通桌面浏览器中进行测试时，如何将 sqlite 与 cordova 一起使用？

Posted 2023-05-07

【中文标题】在普通桌面浏览器中进行测试时，如何将 sqlite 与 cordova 一起使用？

【英文标题】：How do I use sqlite with cordova while testing in a normal desktop browser?

【发布时间】：2015-05-03 06:01:18

【问题描述】：

在开发我的 Cordova 混合应用程序时，我已经非常习惯于在常规桌面浏览器中测试我的应用程序，并且到目前为止效果很好。

现在我想在我的应用程序中添加 sqlite 功能。我看到有一个cordova的插件，但是我很好奇，我怎样才能写一个回退，以便如果没有使用cordova，我可以自然地使用sqlite而不使用cordova插件？理想情况下，我希望将其抽象化，以便原生 sqlite 对象的行为与插件完全相同，因此我可以在常规浏览器中进行所有测试，以尽量减少将应用程序安装到实际设备的次数- android的构建时间很长，所以我想尽可能避免它。

谢谢！

【问题讨论】：

第一：你为什么不试试模拟器？第二：构建时间没有那么多！花了将近20-40秒。第三：你可以试试波纹模拟器。 chrome.google.com/webstore/detail/ripple-emulator-beta/…我没用过。但听说你可以在浏览器中运行它来测试 phonegap 应用程序。

您可以在桌面浏览器上使用 WebSQL。无论您在科尔多瓦还是桌面浏览器中使用它，接口（API）都是相同的。使用的底层数据库可以是 SQLite，但这取决于浏览器。检查此link 以获得桌面浏览器中的 WebSQL 支持。

好问题 - 我看没有人提供答案。你自己到过任何地方吗？

【参考方案1】：

您可以使用一个简单的包装器，它将 WebSQL 用于浏览器，将 SQLite 用于设备。只需使用不同的数据库对象。 WebSQL 和 SQLite API 几乎相同。您只需要对浏览器和设备进行不同的初始化。

这是我的示例代码（ES6）：

var runios = false;
var DB;

// Check browser or device

var onDeviceReady = new Promise(function(resolve, reject)     
    if (document.URL.match(/^https?:/i)) 
        console.log("Running in a browser...");
        resolve();
     else 
        console.log("Running in an app...");
        runiOS = true;
        document.addEventListener("deviceready", resolve, false);
    
);

// Run application
onDeviceReady.then(function() 
    //  Init WebSQL on browser or SQLite on device
    if (runiOS) 
        DB = window.sqlitePlugin.openDatabase( name: 'my.db', location: 'default' , function (db) , function (error)  console.log('Open database ERROR: ' + JSON.stringify(error)); );          
        console.log('DB: SQLite');
    
    else 
        DB = window.openDatabase('my', "0.1", "My list", 200000);    
        console.log('DB: WebSQL');
    

    // ...

    db.transaction(function(tx) 
        tx.executeSql('CREATE TABLE IF NOT EXISTS DemoTable (name, score)');
        tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', ['Alice', 101]);
        tx.executeSql('INSERT INTO DemoTable VALUES (?,?)', ['Betty', 202]);
    , function(error) 
        console.log('Transaction ERROR: ' + error.message);
    , function() 
        console.log('Populated database OK');
    );


    db.transaction(function(tx) 
        tx.executeSql('SELECT count(*) AS mycount FROM DemoTable', [], function(tx, rs) 
            console.log('Record count (expected to be 2): ' + rs.rows.item(0).mycount);
        , function(tx, error) 
            console.log('SELECT error: ' + error.message);
        );
    );
);

【讨论】：

虽然此链接可能会回答问题，但 Stack Overflow 上不鼓励仅链接的答案，您可以通过获取链接的重要部分并将其放入您的答案来改进此答案，这样可以确保您的答案是如果链接被更改或删除，仍然是一个答案:)

请不要只发布一些工具或库作为答案。至少在答案本身中展示how it solves the problem。

对不起，伙计们）我花了很多时间寻找如何在浏览器中测试 SQLite 的解决方案。如果我为我找到了类似的答案，这就足够了。但是我没有足够的时间，而且我的英语说得不好，无法给出更详细的答案:) 我希望这对某人也有用...

@ДмитрийВасильев 我有现有的数据库文件，如何导入该文件然后在浏览器中进行测试？

【参考方案2】：

根据Дмитрий Васильев 的回答，这是适合我的解决方案

if (navigator.userAgent.match(/(Android)/)) 
    db = window.sqlitePlugin.openDatabase(name: 'mydb.db', location: 'default' , function (db) , function (error)  console.log('Open database ERROR: ' + JSON.stringify(error)); );          
    console.log('DB: SQLite');

else 

    db = window.openDatabase('mydb', "0.1", "mydb description", 200000);    
    console.log('DB: WebSQL');

这里发生的情况是，如果检测到Android设备，则db对象将切换到SQLITE，否则如果是浏览器，它将使用WebSql。

要检测更多设备，您可以使用：

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) 
    db = window.sqlitePlugin.openDatabase(name: 'mydb.db', location: 'default' , function (db) , function (error)  console.log('Open database ERROR: ' + JSON.stringify(error)); );          
    console.log('DB: SQLite');

else 

    db = window.openDatabase('mydb', "0.1", "mydb description", 200000);    
    console.log('DB: WebSQL');

您所要做的就是正常运行您的代码，db 对象将使用正确的数据库类型。

【讨论】：

为什么不直接使用插件github.com/apache/cordova-plugin-device，然后使用device.platform而不是navigator.userAgent进行平台检测