基于Realm-js构建离线优先的Electron待办事项应用实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00267/article/details/148488560

基于Realm-js构建离线优先的Electron待办事项应用实践

realm-js realm/realm-js: 是一个用于在 JavaScript 应用程序中存储和同步数据的移动和 Web 数据库库，它支持多种数据类型，包括数值、字符串、日期等。适合用于构建高性能、易于使用的移动和 Web 应用程序，特别是对于需要实时数据同步的场景。特点是实时同步、易于使用、支持多种数据类型。项目地址: https://gitcode.com/gh_mirrors/re/realm-js

项目概述

本文介绍如何使用Realm-js（现称为Atlas Device SDK）开发一个具备离线优先特性的Electron待办事项应用。该应用展示了在无网络连接情况下如何实现数据的创建、读取、更新和删除（CRUD）操作，并在网络恢复后自动同步数据到云端。

技术架构解析

核心组件

项目采用典型的前后端分离架构：

后端服务：

基于MongoDB Atlas App Services构建
提供数据存储、用户认证和同步服务
支持灵活的权限控制

前端Electron应用：

主进程（Main Process）：负责窗口管理和应用生命周期
渲染进程（Render Process）：基于React构建的用户界面
Realm数据库：本地数据存储和同步引擎

关键技术特性

离线优先设计：
- 应用首次启动后会缓存用户凭证
- 数据变更先在本地Realm数据库执行
- 网络恢复后自动同步到云端
冲突解决机制：
- 内置自动冲突解决策略
- 支持多设备间数据一致性
灵活的同步配置：
- 支持立即打开或等待下载完成两种模式
- 可自定义新文件和已有文件的打开行为

实现细节剖析

数据模型设计

应用使用简单的Task模型：

class Task {
  _id!: ObjectId;
  name!: string;
  isComplete!: boolean;
  userId!: string;
}

同步配置策略

在AuthenticatedApp.tsx中，通过RealmProvider配置同步行为：

<RealmProvider
  sync={{
    flexible: true,
    newRealmFileBehavior: { type: OpenRealmBehaviorType.OpenImmediately },
    existingRealmFileBehavior: { type: OpenRealmBehaviorType.OpenImmediately }
  }}
>
  {/* 应用组件 */}
</RealmProvider>

这种配置确保：

新用户立即获得可操作的本地数据库
已有用户快速访问缓存数据
同步过程在后台静默进行

权限控制实现

通过App Services的权限规则确保数据安全：

{
  "roles": [{
    "name": "ownTasksOnly",
    "apply_when": {},
    "read": {
      "userId": "%%user.id"
    },
    "write": {
      "userId": "%%user.id"
    }
  }]
}