移动端离线神器rxdb-supabase 双向同步实战断网照样流畅【免费下载链接】supabaseThe Postgres development platform. Supabase gives you a dedicated Postgres database to build your web, mobile, and AI applications.项目地址: https://gitcode.com/GitHub_Trending/supa/supabase移动应用最让人头疼的场景之一莫过于地铁隧道、电梯、偏远地区那几秒到几分钟的断网用户正在填表、发消息、记笔记界面转圈、数据丢失、体验崩坏。传统方案要么强制在线BaaS 的短板要么自己写一套本地缓存加手动同步维护成本极高。社区里一个名为 rxdb-supabase 的开源方案给出了更优雅的答案用 RxDB 把整张 Supabase 表复制到客户端本地断网时读写全部落在本地 IndexedDB网络恢复后由复制引擎自动双向同步、自动解决冲突。本文结合 rxdb-supabase 的源码与 Supabase 官方仓库的真实文档拆解它的同步原理、落地代码与适用边界。RxDB 与 Supabase 双向同步的原理先说两个主角的分工。RxDB 是一个 offline-first 的客户端数据库所有读写都落在本地存储如 IndexedDB应用层永远秒开Supabase 则是开源的 Firebase 替代品底层是带行级安全RLS的 PostgreSQL。rxdb-supabase 的核心思想是借用 RxDB 的复制协议replication protocol在本地 RxDB 数据库与远程 Supabase 表之间建立一条双向同步通道。这个库在 Supabase 侧做了什么准备仓库 README 中明确写了两个约束表上必须有_modified时间戳字段记录最近修改时间用于增量拉取以及_deleted布尔字段用软删除代替物理删除避免删除在部分客户端尚未复制时直接消失。这两个字段正是增量同步与删除传播的基石。在本地它把 Supabase 表中当前用户经 RLS 过滤后可见的行的完整副本存入 RxDB因此应用可以完全离线工作。整个复制流程模仿 git 的思维分为三个阶段执行Pull拉取先按_modified增量拉取远端在本地上次同步后发生变化的所有行Push推送把本地写入以 INSERT/UPDATE 形式推给 Supabase默认采用乐观并发校验——只有当远端行所有字段仍等于本地写入时的旧值时更新才成功否则触发冲突处理器Watch监听初始同步完成后借助 Supabase Realtime 订阅该表的实时变更把其他客户端产生的变化即时回灌本地。其中第三步依赖的 Realtime在 Supabase 仓库的官方文档中有非常清晰的架构说明Realtime 是一个基于 Elixir/Phoenix 的全局分布式集群客户端通过 WebSocket 连接任意节点当客户端初始化postgres_changes扩展时集群会连接到 Postgres 数据库从逻辑复制槽logical replication slot持续拉取 Write-Ahead LogWAL流再把变更以 JSON 包的形式通过 WebSocket 广播给订阅者见 Realtime 架构文档。这意味着 rxdb-supabase 的实时回灌并非轮询而是数据库层面的原生变更流。离线写入、网络恢复自动合并的代码实现下面把完整链路跑一遍。首先是服务端创建一个带同步字段的表并用moddatetime触发器保证_modified自动更新对应 rxdb-supabase 文档中的建表 SQLCREATE TABLE public.humans ( id text NOT NULL, name text NOT NULL, age smallint, _deleted boolean DEFAULT false NOT NULL, _modified timestamp with time zone DEFAULT now() NOT NULL ); ALTER TABLE ONLY public.humans ADD CONSTRAINT humans_pkey PRIMARY KEY (id); CREATE TRIGGER update_modified_datetime BEFORE UPDATE ON public.humans FOR EACH ROW EXECUTE FUNCTION extensions.moddatetime(_modified);客户端侧先用 RxDB 创建一个与表结构匹配的集合并在集合上挂载可选的冲突处理器import { createRxDatabase } from rxdb import { getRxStorageDexie } from rxdb/plugins/storage-dexie const myDatabase await createRxDatabase({ name: humans, storage: getRxStorageDexie(), // 底层使用 IndexedDB }) const mySchema { title: human schema, version: 0, primaryKey: id, type: object, properties: { id: { type: string, maxLength: 100 }, name: { type: string }, age: { type: integer }, }, required: [id, name, age], indexes: [age], } const myCollections await myDatabase.addCollections({ humans: { schema: mySchema }, })之后所有业务读写都直接操作本地集合完全不需要关心网络状态const doc await myCollections.humans.insert({ id: 1, name: Alice }) await doc.patch({ age: 21 }) await doc.remove()最关键的一步是启动双向复制。SupabaseReplication负责把本地集合与远端表绑在一起pull: {}与push: {}同时存在即启用双向同步const replication new SupabaseReplication({ supabaseClient: supabaseClient, // 已初始化且完成登录RLS 场景 collection: myCollection, replicationIdentifier: myId SUPABASE_URL, pull: {}, push: {}, })断网场景下这个方案的体验是这样的离线期间所有写操作被 RxDB 收集在本地变更队列中界面零卡顿网络恢复时复制引擎按照 retryTime默认 5000ms自动重试若检测到navigator.onLine由离线切回在线会立即跳过等待时间发起同步。此外由于实时监听在客户端间歇性离线时会漏掉远端变更官方建议在应用恢复联网时主动调用replication.reSync()补一次全量增量拉取参考 rxdb-supabase 文档中的 online 事件监听与 reSync 说明。错误处理则通过replication.errors$流观察随时可replication.cancel()停止复制。冲突处理与适用场景边界双向同步最怕两边同时改同一行。rxdb-supabase 的默认策略很务实推送更新前逐字段校验旧值一旦发现远端行已被他人修改就把本地写入判为冲突调起集合的conflictHandler。默认行为是放弃本地写入、以远端状态为准保证数据一致性优先你也可以实现自己的策略例如只要某字段没被对方改动就仍合并该字段。需要特别注意的是默认的 updateHandler 目前不支持 JSON 字段——因为 Supabase 客户端缺少对 JSON 字段做等值校验的简单手段所以含 JSON 列的表必须自定义updateHandler。频繁删除的场景则建议启用 RxDB 的 cleanup 插件把已同步删除的行从本地清理避免本地库无限膨胀。边界问题同样重要。offline-first 最大的代价是整表下载到客户端表越大、用户能访问的行越多首次同步与增量同步的负担越重。这正是仓库 Future work 中规划的方向分区复制类似 FireStore 的 subcollection、纯推送模式、以及把 RxDB 当作离线缓存而非离线优先数据库。此外软删除设计意味着 Supabase 侧的物理删除需要谨慎——必须确保所有客户端都已复制删除标记否则会出现幽灵数据。还要把安全因素纳入考量离线副本的本质是数据驻留在用户设备上因此务必配合 Supabase 的 RLS 策略让拉取请求只返回当前用户有权看到的行——RLS 在 Postgres 内部执行即便数据经由第三方客户端读取也受到保护见 Row Level Security 文档。这在本地副本即服务端数据子集的架构下是最后一道安全闸门。适用场景移动端表单填写、消息类应用、巡检/外勤记录、网络不稳定的企业级应用——凡是写入必须即时成功、断网不可避免、数据量可控的场景rxdb-supabase 都能交出流畅体验不适用的场景服务端海量大表全量复制成本过高、需要强一致实时协作应以 Realtime 原生订阅为主、以及包含复杂 JSON 结构且不想写自定义更新逻辑的表。在移动优先、网络劣化常态化的今天把数据库搬进客户端、把同步交给协议正在成为构建离线体验的标准姿势。rxdb-supabase 证明了Supabase 的 Postgres 底座加上 RxDB 的复制协议完全可以拼出一台断网照样流畅的移动端同步引擎。【免费下载链接】supabaseThe Postgres development platform. Supabase gives you a dedicated Postgres database to build your web, mobile, and AI applications.项目地址: https://gitcode.com/GitHub_Trending/supa/supabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考