Golang 本身是沒有自帶官方 GUI 給使用者開發，有 Qt、TK、Electron 各種不同實現的GUI實現方式桌面應用程式

當然較為可靠的是 Flutter for Desktop 來進行建構，畢竟背後是富爸爸 Google 進行維護

但是這次先不提 Flutter，想透過 WebView 來進行桌面應用程式開發

最初想要 HTML 嵌入顯示畫面，通常想到的都是使用 Electron 來實現

後來在 Github 上面找到 Lorca 使用 HTML5 + Golang 就能實現，不必須要 Electron

Lorca 依賴於 Chrome/Chromium 實現 UI 層，並且不需要CGO

跟 Electron 相比肯定比原本來的更輕巧，所以一直想嘗試嘗試

限制

安裝 Lorca

未開啟 GO111MODULE = off

1

$ go get -u https://github.com/zserge/lorca

有開啟 GO111MODULE = on

在專案目錄中初始化 Go模組管理環境

1
2
3

$ go mod init

$ go get -u https://github.com/zserge/lorca

Example Hello World

作者有提供範例可供參考

是我們最熟悉的 Hello Wrold!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

package main

import (
	"log"
	"net/url"

	"github.com/zserge/lorca"
)

func main() {
	// Create UI with basic HTML passed via data URI
	ui, err := lorca.New("data:text/html,"+url.PathEscape(`
	<html>
		<head><title>Hello</title></head>
		<body><h1>Hello, world!</h1></body>
	</html>
	`), "", 480, 320)
	if err != nil {
		log.Fatal(err)
	}
	defer ui.Close()
	// Wait until UI window is closed
	<-ui.Done()
}

範例中很簡單，以資料文件網頁型態導入

就能顯示你我最熟悉的它 Hello World!

Example Counter

目錄結構

.
├── assets.go
├── build-linux.sh
├── build-macos.sh
├── build-windows.bat
├── counter.gif
├── gen.go
├── go.mod
├── go.sum
├── icons
│   ├── icon-256.png
│   ├── icon.icns
│   └── icon.png
├── main.go
└── www
    ├── favicon.png
    └── index.html

測試另一個 範例 Counter 就能看到一個計數器

1
2
3
4
5
6
7

$ git clone https://github.com/zserge/lorca

$ cd zserge/lorca/example/counter

$ go build

$ ./counter

整體呈現還是表現不錯，檔案大小為 8.4M ，如有需要可以藉此為標準比較比較

雖然不能跟 flutter 一樣能在 Mobile 上面呈現，但是只針對桌面應用，已經很足夠了

再透過 UPX 進行壓縮，藉此壓低檔案大小至 3.6M

1

$ upx --brute conter -o conterUPX

問題

但是由於是 Google Chromium/Chrome Swipe 導致可以透過手勢上下頁

導致有可能發生的錯誤或邏輯問題

在網頁檔案中加入禁止上下頁的 Javscript 如下

個人覺得不是一個很好的解決方案，如果有更好的方法，我會在進行補充

1
2
3
4
5
6

<script>
	history.pushState(null, null, document.URL);
	window.addEventListener('popstate', function () {
		history.pushState(null, null, document.URL);
	});
</script>

結論

整體呈現還是非常好，而且作者還有另一個 GUI 專案是以 WebView 的方式呈現

我會找時間作測試再進行比較，貌似 WebView 會來的更完善，屆時在進行比較

參考資料

  1. https://github.com/zserge/lorca