傲空间 Web 端本地优先方案实践

面对的挑战

您是否遇到过，因网络信号不佳，文件始终加载不出来，操作文件时候一直转圈然后提示操作失败。您是否遇到过，因平台原因导致某段时间无法登录访问您的数据，甚至造成个人数据丢失。面对这些问题，我们该如何解决呢？

傲空间 Web 端提供文件管理、智能相册、应用中心、家庭成员等核心功能，通过端对端加密、视频加密流播放等多个技术保护个人数据隐私安全。面对网络不佳时文件无法加载、过度依赖平台、个人数据安全得不到保护等问题的挑战，傲空间采用并实践了本地优先的解决方案，本文主要介绍傲空间 Web 端本地优先方案的实践情况。

本地优先方案介绍

“本地优先软件” 最早由 Ink&Switch 发表于 2019 年 4 月的 《Local-first software》一文中提出的，作者是：Martin Kleppmann、Adam Wiggins、Peter van Hardenberg、Mark McGranaghan。

“本地优先软件”是一种软件设计原则：让用户在使用软件过程中既能拥有云服务的协作性又能像使用传统本地软件那样拥有完整的数据所有权。

和本地软件相比，云服务具有无缝协作、移动灵活等诸多优点，但同时也存在数据所有权和云服务的数据与云服务完全绑定的问题。与之相对的，本地软件能够给用户带来完全的数据所有权和控制权，但和他人实时协作具有一定的挑战。

为了解决这些挑战，我们需要一种既能享受云服务便捷性和协作优势，又能拥有数据所有权的解决方案。而本地优先软件就是这样的一种方案：将数据主体的角色交换，将本地设备作为数据主要副本，服务器仅起到辅助同步作用，从而实现数据的所有权和实时协作的完美结合。这种创新的产品形态为用户带来了更加便捷、高效、安全的数据管理方案，是未来数字化生活的重要基石。

目前已经有越来越多的应用设计采用本地优先方案，比较知名的应用有：Bangle.io、Actual、Excalidraw、Textorama 等。

理想的本地优先软件具备以下七个特点

1. 本地运行没有网络延时

2. 支持多端同步

3. 网络不是必选项

4. 支持多人协作

5. 更有生命力的数据

6. 天然具备安全和隐私

7. 用户拥有完全的所有权和控制权

傲空间 Web 端本地优先方案原理

本地优先技术实现原理如下图所示：首次加载时，从傲空间设备中获取所有文件的列表，并根据文件所属文件夹建立文件夹映射关系图 map ，然后把这些信息分别保存在内存和数据库 indexdb 中。在执行后续的增删改查等操作时，会先在内存中进行操作，然后将处理结果同步到 indexdb 中。接着，设备会发起相应的请求接口，并根据接口返回的结果来决定是否进行后续的操作。如果接口返回成功，则文件操作到此为止；如果接口返回失败，则傲空间设备会还原相关的文件夹信息映射。这样的实现方式能够有效地提升文件操作的效率和稳定性，让用户能够更加高效地管理文件。

具体实现

具体实现从以下几个方面分别说明具体实现:

1. 文件信息存储结构及其实现

2. 文件列表展示

3. 文件新增操作

4. 文件修改操作(包括名称修改，文件移动、复制)

5. 文件删除操作

文件信息存储结构及其实现

我们展示的文件列表是某一特定文件夹下的所有文件。如果想查看其他文件夹中的文件，需要进入该文件夹，如下两个示意图所示的结构：

 我们可以在同一时间内只查看单个文件夹下的文件。为了实现这一点，傲空间使用一种名为 map（映射关系图） 的数据结构来表示文件的存储结构。这个 map 包含所有文件夹，每个文件夹都有一个唯一标识符 uuid 作为 map 的键，同时包含该文件夹的详细信息，其中 child 字段表示该文件夹下的文件列表。具体的结构如下图所示：

文件列表展示

我们提供文件列表展示功能，可以展示一个文件夹下的所有文件，并且支持滚动加载更多功能。当您请求来自某一文件夹的文件时，我们会从内存中的文件夹映射中查找该文件夹下的 child（子文件），并按照分页逻辑展示在界面上。例如，如果您访问 `/code-check/node_modules/element-plus/es/components/result/src` 下的文件，我们可以从该文件夹的 child（子文件）中获取数据，并用如下两张图展示给您：

 文件新增操作

文件新增功能包括上传文件和新建文件夹两种操作。其中，上传文件包括单个文件上传和多个文件上传并带文件夹。当您上传单个文件时，文件上传成功后，我们会在内存文件列表映射中查找该文件所属的文件夹，并更新文件夹的子文件信息。如果您上传的文件中包含文件夹，在本地文件列表中查找该文件夹，并将其添加到其所属文件夹的 child（子文件）中，然后查询后台接口以更新文件夹信息，并将其添加到本地文件夹映射中，为其添加映射。如果该文件夹下有其他文件上传，我们会将这些文件的信息更新到该文件夹的 child（子文件）中。具体流程如下图所示：

创建新文件夹：在本地创建一个新的文件夹，并将其添加到其父文件夹中。将新文件夹信息提交到服务器，并等待服务器返回成功或失败的信息。如果成功，更新新文件夹的信息；如果失败，从其所属的文件夹 child 中删除该文件夹。此过程如下图所示：

文件修改操作

文件修改包括：文件名称修改、文件移动、文件复制操作。其本地优先原理与文件新增基本相同，具体流程如下：

1. 首先，在本地缓存中执行相应的操作，以确保用户能够体验到更快的响应速度。

2. 然后，在将操作请求发送到云端接口后，根据接口返回的结果进行下一步操作。

3. 如果接口返回成功，则表示操作已经成功执行，系统将返回对应的操作结果。

4. 如果接口返回失败，则表示操作未能成功执行，系统将还原之前已执行的本地操作。

具体流程如下图所示：

文件删除操作

文件删除操作流程和文件修改操作流程一样。具体流程如下：

总结

综上所述，傲空间 Web 端通过本地化优先方案可以解决网络不佳时文件无法加载、过度依赖平台、个人数据安全得不到保护等问题，让用户更轻松管理文件，操作体验更加顺畅，同时让用户完全掌控自己的数据，真正打造一个属于个人的数字空间。欢迎广大开发者加入slack 讨论组：https://slack.ao.space 探讨更多关于本地优先的解决方案。

参考链接

1. 迷雾：我们是否拥有自己的数据？：https://ao.space/blog/mist-do-we-own-our-own-data

2. Local-first software：https://www.inkandswitch.com/local-first/

3. 本地优先、隐私第一的数字资产管理软件：https://zhuanlan.zhihu.com/p/568989946

4. 本地优先软件 Local-first software：https://zhuanlan.zhihu.com/p/557353347?utm_id=0

5. Local-First Web Development：https://localfirstweb.dev/