離開(kāi)局域網(wǎng)也能用，他用1個(gè)插件把看板“裝”進(jìn)手機(jī)

周三晚上十點(diǎn)，你坐在咖啡館里，想瞄一眼家里的 Kanboard 看板，確認(rèn)明天要交付的那個(gè)任務(wù)是否已經(jīng)移到了“完成”列。打開(kāi)瀏覽器，輸入地址，頁(yè)面卻一直轉(zhuǎn)圈——服務(wù)器在家里，離開(kāi)局域網(wǎng)，一切就都消失了。這事兒擱以前只能認(rèn)了，但現(xiàn)在，一個(gè)叫 Kanteen 的插件，把整個(gè)看板“裝”進(jìn)了手機(jī)，離線也能用，而且作者把整個(gè)方案開(kāi)放在了 GitHub 上。

Kanteen 的出發(fā)點(diǎn)和很多自托管工具愛(ài)好者一模一樣：Kanboard 在桌面端真的順手，輕量、直觀，跑在自家 NAS 或者一臺(tái)小主機(jī)上就穩(wěn)如老狗。但一出門，離開(kāi)同一個(gè)局域網(wǎng)，看板就訪問(wèn)不了；更惱人的是，手機(jī)的移動(dòng)端網(wǎng)頁(yè)體驗(yàn)幾乎沒(méi)有針對(duì)觸屏優(yōu)化，拖動(dòng)卡片、點(diǎn)開(kāi)詳細(xì)描述都費(fèi)勁。

Kanteen 一次性修好了這兩處短板：它把 Kanboard 變成了一個(gè)可以安裝到手機(jī)主屏幕、或者通過(guò) Chrome / Edge 以獨(dú)立窗口裝到電腦上的漸進(jìn)式網(wǎng)頁(yè)應(yīng)用（PWA），而且一上來(lái)就是“離線優(yōu)先”的設(shè)計(jì)。

第一次用 Kanteen 打開(kāi)你的 Kanboard 時(shí)，它會(huì)直接把整個(gè)看板緩存到設(shè)備本地。所有項(xiàng)目、列、卡片、子任務(wù)、附件信息，一次性打包，之后你就可以關(guān)掉網(wǎng)絡(luò)，在地鐵上、飛機(jī)上，或者那家連 Wi-Fi 都沒(méi)有的舊廠房里，繼續(xù)拖拽調(diào)整進(jìn)度、新建卡片、給同事寫(xiě)評(píng)論，甚至用手機(jī)拍張照片直接貼上去。原本必須在聯(lián)網(wǎng)狀態(tài)下才能做的事，現(xiàn)在全都在本地完成，操作響應(yīng)就像手機(jī)原生應(yīng)用一樣順暢。

離線產(chǎn)生的大量編輯并不會(huì)亂套。每次修改都會(huì)在設(shè)備上排隊(duì)記錄，等你回到辦公室連上同一個(gè)局域網(wǎng)，Kanteen 會(huì)自動(dòng)檢測(cè)到服務(wù)器，把所有更改按時(shí)間順序逐一重放到服務(wù)器上。更細(xì)致的是，如果同一張卡片在其他地方也被改動(dòng)過(guò)——比如你用電腦在 Kanboard 網(wǎng)頁(yè)端改了標(biāo)題，而手機(jī)上離線時(shí)也改過(guò)同一個(gè)標(biāo)題——這時(shí)候會(huì)觸發(fā)字段級(jí)的沖突解決。你會(huì)看到三個(gè)選項(xiàng)：保留手機(jī)上的修改、接受服務(wù)器上的版本，或者把兩邊的更改合并。整個(gè)同步過(guò)程只走局域網(wǎng)，不走云、不加隧道、也不要求你折騰反向代理，安全邊界依然緊緊圈在你自己的網(wǎng)絡(luò)里。

光能看能改還不夠，一個(gè)合格的離線看板還得能分析數(shù)據(jù)。Kanteen 內(nèi)置了離線可用的分析功能，項(xiàng)目完成率、任務(wù)分布、團(tuán)隊(duì)推進(jìn)速度這些指標(biāo)直接在手機(jī)上就能生成圖表，不用非得坐到辦公桌前再打開(kāi)統(tǒng)計(jì)頁(yè)面。同時(shí)，看板過(guò)濾器、子任務(wù)拆解、Markdown 格式的描述說(shuō)明、附件預(yù)覽、項(xiàng)目封面圖，以及調(diào)整列、在制品限額、泳道和分類的編輯能力，都被一并做進(jìn)了這套移動(dòng)界面里。以前在手機(jī)上只能倉(cāng)促瀏覽，現(xiàn)在幾乎可以完成桌面端的所有管理工作。

顏值和隱私也沒(méi)掉隊(duì)。Kanteen 預(yù)置了多套主題，支持自定義配色的主題系統(tǒng)，還能單獨(dú)挑選字體，給應(yīng)用換個(gè)專屬圖標(biāo)。如果你在工位的大屏幕上查看看板，一個(gè)大屏隱私遮罩功能會(huì)模糊掉周圍的內(nèi)容，防止旁邊人無(wú)意中瞟到敏感信息。另外整個(gè)看板的數(shù)據(jù)可以打包成便攜的備份文件導(dǎo)出，哪怕只用手機(jī)也能隨時(shí)存?zhèn)€快照。

如果說(shuō)功能堆砌是常規(guī)操作，那部署過(guò)程的輕量就讓人有點(diǎn)意外了。Kanteen 本身只是一個(gè)瘦 PHP 插件外加一個(gè)預(yù)構(gòu)建好的前端應(yīng)用，服務(wù)器上不需要裝 Node.js 環(huán)境，也不用跑什么編譯命令，直接把插件文件夾丟進(jìn) Kanboard 的 plugins 目錄就行。唯一的技術(shù)要求是 Kanboard 版本需要 1.2 以上，并且必須提供一個(gè) HTTPS 來(lái)源——因?yàn)?PWA 的 service workers 要求安全上下文。不過(guò)作者也給出了簡(jiǎn)單路徑：如果只是局域網(wǎng)內(nèi)部用，用 mkcert 簽發(fā)一個(gè) LAN 本地證書(shū)就行，十分鐘搞定。

目前插件頁(yè)面上有完整的截圖和說(shuō)明，源代碼則托管在 GitHub 上，作者表示非常歡迎社區(qū)提出反饋和改進(jìn)意見(jiàn)。從“我自己需要”到“給所有 Kanboard 粉絲分享”，Kanteen 這種把自托管工具搬進(jìn)離線場(chǎng)景的嘗試，或許就是開(kāi)源自建的魅力所在。