NativeScript+Angular Web应用能否使用SQLite实现跨端离线数据存储

核心结论 #

NativeScript + Angular 开发的Web端应用无法直接使用原生端的SQLite访问能力。

NativeScript生态下的SQLite插件本质是桥接Android、iOS系统底层的原生SQLite接口，这类原生桥接能力仅在NativeScript编译的原生APP运行环境下生效，Web端运行在浏览器沙箱中，没有对应的原生接口可以调用，直接复用原生端的SQLite调用代码在Web环境会直接报错。

适配三端离线存储的可行方案 #

• 分层适配方案：原生端（Android/iOS）继续使用NativeScript的nativescript-sqlite插件访问SQLite，Web端基于浏览器原生能力做兼容，可选用IndexedDB、WebSQL作为Web端的离线存储介质，上层封装统一的CRUD接口，业务层无需感知底层存储差异。
• WASM版SQLite复用方案：如果需要三端完全复用SQLite语法逻辑，可以引入编译为WASM的SQLite实现，它可以直接在浏览器中运行SQLite实例，数据可持久化存储在浏览器的IndexedDB中。你可以将其封装为和原生端SQLite插件完全一致的调用接口，实现三端逻辑统一。
• 注意事项：代码中调用存储能力时必须加运行环境判断，避免Web端加载原生插件逻辑报错，参考代码示例：

import { isAndroid, isIOS, isWeb } from '@nativescript/core';

if (isAndroid || isIOS) {
  // 原生端调用nativescript-sqlite逻辑
  const SQLite = require('nativescript-sqlite');
  const db = await SQLite('offline_storage.db');
  // 执行原生端CRUD操作
} else if (isWeb) {
  // Web端调用WASM SQLite/IndexedDB逻辑
  // 执行Web端CRUD操作
}

内容的提问来源于stack exchange，提问作者Dilip Gandham