看不慣糟糕、老舊的桌面客戶端?直接讓網頁版應用做你的桌面 App
:computer: 隨著網際網路前端的迅捷發展,越來越多產品網頁端的使用體驗愈加完善。用 Web 技術搭建的 網頁應用 不僅有著現代化的 UI,甚至體驗比原生桌面客戶端都要好上不少。
而原生桌面客戶端,由於要適配 Windows、macOS 甚至 Linux 等多個作業系統,或是為了適配老舊的系統 API(比如 Windows 7 及之前的 WinForm),很多介面、元素與使用體驗可能都要做出很大的犧牲。這樣子不僅會產生使用體驗上的割裂感,由於有著不同的 UI 元素與字型渲染引擎方案,不同系統下的客戶端甚至使用者介面都長得大相徑庭。

不妨試試下面這兩種方法,直接使用我們常用應用的網頁端服務,將其當作我們的「桌面應用」,這樣:
- 不僅可以省去下載安裝桌面客戶端的繁瑣步驟
- 還能夠享受最新 Web 技術搭建的現代化 UI
- 對於 Windows,第一種方案可以解決 基於 Chromium 的應用 (比如用 Electron 技術構建的 Notion、Slack 等客戶端)糟糕的字型渲染引擎所帶來的 襯線體中文介面
- 對於 Linux,第二種方案可以解決 尚未支援 Linux 系統的應用 (比如未支援 Linux 系統的 Notion 筆記)「桌面客戶端」的安裝
Chrome App
第一種完全不折騰的解決方案就是:直接使用 Chrome 瀏覽器來給我們的網頁生成一個「桌面應用」。
首先,用 Chrome 瀏覽器開啟想要轉換為「桌面客戶端」的網頁(我以少數派的 Slack 群為例子,地址為: https://sspai-club.slack.com/messages
),將登入後正常使用狀態的網頁 URL 收藏到書籤欄:

然後,開啟 Chrome App 頁面: chrome://apps
,將剛剛收藏的標籤頁專案拖拽到下面的空白處,在應用圖示上右鍵,勾選「在視窗中開啟」,然後點選建立快捷方式,在彈出的選單欄處選擇勾選「桌面」或「開始選單」:

這樣一個單視窗的桌面應用快捷方式就出現在我們的開始選單或桌面了:

不過,我們會發現這個快捷方式的名稱和圖示都有問題,我們「右鍵 > 更多 > 開啟檔案位置」,就來到了 Chrome 應用快捷方式的資料夾。在這裡,我們可以直接修改其檔名,並通過「右鍵 > 屬性 > 更改圖示」來配置其圖示:

需要注意的是,針對 Windows 系統,其圖示僅支援 ico 格式的檔案,我們可以通過 ofollow,noindex">ConvertICO 方便的將 png 圖片轉化為 ico 檔案,從而自定義圖示。
這樣配置之後,一個近乎完美的「桌面應用」就可以直接使用了。我經過一段時間的使用,跟來自微軟商店的 Slack 版本進行對比:
- 功能上,據我的體驗來說,沒有任何功能上面的缺失
- UI 介面上,是高度一致的,並且 Chrome App 版本的字型渲染是正常的非襯線體 — 微軟雅黑

令人愉悅。:smile:
Nativefier
Make any web page a desktop application.
另一種解決辦法就是利用開源的 Nativefier 將網頁轉製成為一個 可安裝的 桌面應用,支援 macOS 10.9+ / Windows / Linux 系統。其原理就是將網頁利用 Electron 技術將網頁內容封裝起來,成為一個可執行、可安裝的應用程式。

然而這樣的方式需要一些比較複雜的安裝配置。由於 Nativefier 是 Node.js
編寫的,所以不僅需要安裝 Node.js
環境,還要安裝 npm
包管理器,才可以通過 npm install nativefier -g
安裝 Nativefier。安裝之後 Nativefier 也只有命令列的互動方式,沒有圖形化介面。幸而有高手幫我們簡化了這一流程: Web2Desk 。
Your Favorite :earth_americas: websites to desktop apps in :one: one click :rocket:

Web2Desk 讓我們可以直接輸入網頁連結、應用名稱和應用圖示,然後經過其在伺服器上面的構建,直接給我們提供 Windows、macOS 和 Linux 的原生安裝程式的下載。
經過我自己的測試,我在本地、自己的電腦上面利用 Nativefier 構建安裝一個桌面應用需要很長很長時間(由於國內的網路環境,下載一些依賴特別慢。),而利用 Web2Desk 服務,不到兩分鐘全平臺的桌面程式就全部載入完成了,十分便捷。我自己在 Linux 下的 Notion 雲筆記桌面客戶端就是利用 Web2Desk 服務構建的。

使用體驗
說實話,我這樣推崇將網頁端直接用作桌面應用程式的使用方法,主要就是為了 解決 Windows 上面 Chromium 應用糟糕的中文字型渲染 。比如 Notion 和 Slack,他們兩個的 Windows 桌面客戶端都將中文直接渲染成了宋體,在應用的 UI 中使用襯線體太影響使用體驗了。
針對 Notion 和 Slack 兩個應用來說,我自己使用下來自己確實沒有任何的功能缺失,當然一方面是 Slack 本身就需要聯網才可以使用,另一方面是我自己處於「不聯網」的狀態太少了。

與此同時,除了解決字型渲染的問題,那些只提供手機端 App 的應用(比如我派和即刻)、或是桌面版本的應用支援得很垃圾的應用(比如微博提供的那令人絕望的 UWP 版本客戶端),我們都可以利用這樣方便的辦法來給我們自己做一個「客戶端」。
網頁端的程式越來越豐富,功能上越來越全面,我們直接使用它們的體驗也越來越好。與此同時,我們省去了下載巨大安裝包的繁瑣步驟,開發者省去了適配全平臺的繁重任務,這確實是應用程式未來的方向。Web first! :muscle: