面對(duì)的挑戰(zhàn)

您是否遇到過(guò)，因網(wǎng)絡(luò)信號(hào)不佳，文件始終加載不出來(lái)，操作文件時(shí)候一直轉(zhuǎn)圈然后提示操作失敗。您是否遇到過(guò)，因平臺(tái)原因?qū)е履扯螘r(shí)間無(wú)法登錄訪問您的數(shù)據(jù)，甚至造成個(gè)人數(shù)據(jù)丟失。面對(duì)這些問題，我們?cè)撊绾谓鉀Q呢？

傲空間 Web 端提供文件管理、智能相冊(cè)、應(yīng)用中心、家庭成員等核心功能，通過(guò)端對(duì)端加密、視頻加密流播放等多個(gè)技術(shù)保護(hù)個(gè)人數(shù)據(jù)隱私安全。面對(duì)網(wǎng)絡(luò)不佳時(shí)文件無(wú)法加載、過(guò)度依賴平臺(tái)、個(gè)人數(shù)據(jù)安全得不到保護(hù)等問題的挑戰(zhàn)，傲空間采用并實(shí)踐了本地優(yōu)先的解決方案，本文主要介紹傲空間 Web 端本地優(yōu)先方案的實(shí)踐情況。

本地優(yōu)先方案介紹

“本地優(yōu)先軟件” 最早由 Ink&Switch 發(fā)表于 2019 年 4 月的 《Local-first software》[^2]一文中提出的，作者是：Martin Kleppmann、Adam Wiggins、Peter van Hardenberg、Mark McGranaghan。

“本地優(yōu)先軟件”是一種軟件設(shè)計(jì)原則：讓用戶在使用軟件過(guò)程中既能擁有云服務(wù)的協(xié)作性又能像使用傳統(tǒng)本地軟件那樣擁有完整的數(shù)據(jù)所有權(quán)。

和本地軟件相比，云服務(wù)具有無(wú)縫協(xié)作、移動(dòng)靈活等諸多優(yōu)點(diǎn)，但同時(shí)也存在數(shù)據(jù)所有權(quán)和云服務(wù)的數(shù)據(jù)與云服務(wù)完全綁定的問題。與之相對(duì)的，本地軟件能夠給用戶帶來(lái)完全的數(shù)據(jù)所有權(quán)和控制權(quán)，但和他人實(shí)時(shí)協(xié)作具有一定的挑戰(zhàn)。

為了解決這些挑戰(zhàn)，我們需要一種既能享受云服務(wù)便捷性和協(xié)作優(yōu)勢(shì)，又能擁有數(shù)據(jù)所有權(quán)的解決方案。而本地優(yōu)先軟件就是這樣的一種方案：將數(shù)據(jù)主體的角色交換，將本地設(shè)備作為數(shù)據(jù)主要副本，服務(wù)器僅起到輔助同步作用，從而實(shí)現(xiàn)數(shù)據(jù)的所有權(quán)和實(shí)時(shí)協(xié)作的完美結(jié)合。這種創(chuàng)新的產(chǎn)品形態(tài)為用戶帶來(lái)了更加便捷、高效、安全的數(shù)據(jù)管理方案，是未來(lái)數(shù)字化生活的重要基石。

目前已經(jīng)有越來(lái)越多的應(yīng)用設(shè)計(jì)采用本地優(yōu)先方案，比較知名的應(yīng)用有：Bangle.io、Actual、Excalidraw、Textorama 等。

理想的本地優(yōu)先軟件具備以下七個(gè)特點(diǎn)

1. 本地運(yùn)行沒有網(wǎng)絡(luò)延時(shí)

2. 支持多端同步

3. 網(wǎng)絡(luò)不是必選項(xiàng)

4. 支持多人協(xié)作

5. 更有生命力的數(shù)據(jù)

6. 天然具備安全和隱私

7. 用戶擁有完全的所有權(quán)和控制權(quán)

傲空間 Web 端本地優(yōu)先方案原理

本地優(yōu)先技術(shù)實(shí)現(xiàn)原理如下圖所示：首次加載時(shí)，從傲空間設(shè)備中獲取所有文件的列表，并根據(jù)文件所屬文件夾建立文件夾映射關(guān)系圖 map ，然后把這些信息分別保存在內(nèi)存和數(shù)據(jù)庫(kù) indexdb 中。在執(zhí)行后續(xù)的增刪改查等操作時(shí)，會(huì)先在內(nèi)存中進(jìn)行操作，然后將處理結(jié)果同步到 indexdb 中。接著，設(shè)備會(huì)發(fā)起相應(yīng)的請(qǐng)求接口，并根據(jù)接口返回的結(jié)果來(lái)決定是否進(jìn)行后續(xù)的操作。如果接口返回成功，則文件操作到此為止；如果接口返回失敗，則傲空間設(shè)備會(huì)還原相關(guān)的文件夾信息映射。這樣的實(shí)現(xiàn)方式能夠有效地提升文件操作的效率和穩(wěn)定性，讓用戶能夠更加高效地管理文件。

具體實(shí)現(xiàn)

具體實(shí)現(xiàn)從以下幾個(gè)方面分別說(shuō)明具體實(shí)現(xiàn):

1. 文件信息存儲(chǔ)結(jié)構(gòu)及其實(shí)現(xiàn)

2. 文件列表展示

3. 文件新增操作

4. 文件修改操作(包括名稱修改，文件移動(dòng)、復(fù)制)

5. 文件刪除操作

文件信息存儲(chǔ)結(jié)構(gòu)及其實(shí)現(xiàn)

我們展示的文件列表是某一特定文件夾下的所有文件。如果想查看其他文件夾中的文件，需要進(jìn)入該文件夾，如下兩個(gè)示意圖所示的結(jié)構(gòu)：

我們可以在同一時(shí)間內(nèi)只查看單個(gè)文件夾下的文件。為了實(shí)現(xiàn)這一點(diǎn)，傲空間使用一種名為 map（映射關(guān)系圖） 的數(shù)據(jù)結(jié)構(gòu)來(lái)表示文件的存儲(chǔ)結(jié)構(gòu)。這個(gè) map 包含所有文件夾，每個(gè)文件夾都有一個(gè)唯一標(biāo)識(shí)符 uuid 作為 map 的鍵，同時(shí)包含該文件夾的詳細(xì)信息，其中 child 字段表示該文件夾下的文件列表。具體的結(jié)構(gòu)如下圖所示：

文件列表展示

我們提供文件列表展示功能，可以展示一個(gè)文件夾下的所有文件，并且支持滾動(dòng)加載更多功能。當(dāng)您請(qǐng)求來(lái)自某一文件夾的文件時(shí)，我們會(huì)從內(nèi)存中的文件夾映射中查找該文件夾下的 child（子文件），并按照分頁(yè)邏輯展示在界面上。例如，如果您訪問 `/code-check/node_modules/element-plus/es/components/result/src` 下的文件，我們可以從該文件夾的 child（子文件）中獲取數(shù)據(jù)，并用如下兩張圖展示給您：

文件新增操作

文件新增功能包括上傳文件和新建文件夾兩種操作。其中，上傳文件包括單個(gè)文件上傳和多個(gè)文件上傳并帶文件夾。當(dāng)您上傳單個(gè)文件時(shí)，文件上傳成功后，我們會(huì)在內(nèi)存文件列表映射中查找該文件所屬的文件夾，并更新文件夾的子文件信息。如果您上傳的文件中包含文件夾，在本地文件列表中查找該文件夾，并將其添加到其所屬文件夾的 child（子文件）中，然后查詢后臺(tái)接口以更新文件夾信息，并將其添加到本地文件夾映射中，為其添加映射。如果該文件夾下有其他文件上傳，我們會(huì)將這些文件的信息更新到該文件夾的 child（子文件）中。具體流程如下圖所示：

創(chuàng)建新文件夾：在本地創(chuàng)建一個(gè)新的文件夾，并將其添加到其父文件夾中。將新文件夾信息提交到服務(wù)器，并等待服務(wù)器返回成功或失敗的信息。如果成功，更新新文件夾的信息；如果失敗，從其所屬的文件夾 child 中刪除該文件夾。此過(guò)程如下圖所示：

文件修改操作

文件修改包括：文件名稱修改、文件移動(dòng)、文件復(fù)制操作。其本地優(yōu)先原理與文件新增基本相同，具體流程如下：

1. 首先，在本地緩存中執(zhí)行相應(yīng)的操作，以確保用戶能夠體驗(yàn)到更快的響應(yīng)速度。

2. 然后，在將操作請(qǐng)求發(fā)送到云端接口后，根據(jù)接口返回的結(jié)果進(jìn)行下一步操作。

3. 如果接口返回成功，則表示操作已經(jīng)成功執(zhí)行，系統(tǒng)將返回對(duì)應(yīng)的操作結(jié)果。

4. 如果接口返回失敗，則表示操作未能成功執(zhí)行，系統(tǒng)將還原之前已執(zhí)行的本地操作。

具體流程如下圖所示：

文件刪除操作

文件刪除操作流程和文件修改操作流程一樣。具體流程如下：

總結(jié)

綜上所述，傲空間 Web 端通過(guò)本地化優(yōu)先方案可以解決網(wǎng)絡(luò)不佳時(shí)文件無(wú)法加載、過(guò)度依賴平臺(tái)、個(gè)人數(shù)據(jù)安全得不到保護(hù)等問題，讓用戶更輕松管理文件，操作體驗(yàn)更加順暢，同時(shí)讓用戶完全掌控自己的數(shù)據(jù)，真正打造一個(gè)屬于個(gè)人的數(shù)字空間。歡迎廣大開發(fā)者加入 slack 討論組 <slack.ao.space> 探討更多關(guān)于本地優(yōu)先的解決方案。

參考鏈接

1. 迷霧：我們是否擁有自己的數(shù)據(jù)？：https://ao.space/blog/mist-do-we-own-our-own-data

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

3. 本地優(yōu)先、隱私第一的數(shù)字資產(chǎn)管理軟件：https://zhuanlan.zhihu.com/p/568989946

4. 本地優(yōu)先軟件 Local-first software：https://zhuanlan.zhihu.com/p/557353347?utm_id=0

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