1716 字
10 分鐘
📦 Pake 打包 Web APP 記錄
Cover image for 📦 Pake 打包 Web APP 記錄

#一、Pake是什麼?

Pake是一項使用Rust Tauri作為底層框架的、實現了快捷鍵的透傳、沉浸式的視窗、拖動、樣式改寫、去廣告、產品的極簡風格定製的web app打包開源項目。原本的網頁打包成應用要麼是PWA,要麼就是electron塞一個chromium,Pake則是用Tauri 替代之前套殼網頁打包的老思路,相比傳統的 Electron 套殼打包,軟體要小將近 20 倍,約 5M 上下。

tw93
/
Pake
Waiting for api.github.com...
00K
0K
0K
Waiting...

#二、如何使用Pake呢?

有兩種方法,一是直接在線使用Github Action(小白推薦),二是本地運行Pake。

#1.Github Action 執行打包

#(1)Fork本項目

這一步我覺得不用多說了

#(2)前往Actions

  • 點擊前往Actions界面,選擇 Build App with Pake-Cli,填寫表單信息,點擊 Run Workflow即可。
  • 表單參數與填寫要求基本和pake-cli參數保持一致,具體可以參考下麵的pake-cli變量內容

Untitled

#(3)下載附件

出現綠色小圖標則代表打包成功,可以點擊 Build App with Pake-Cli查看打包詳情和附件。

Untitled

可以看到這里的 Artfacts出現了一個1,也就代表有一個附件可供下載。

Untitled

點擊 Artfacts,自動跳轉到最下方,可以看到最終的附件信息,點擊該附件名即可正式下載。

Untitled

#(4)運行時間

  • 第一次運行會比較慢,大概10-15分鐘左右,後續有了緩存後,就會快很多。
  • 盡量保證第一次完整運行,這樣生成的緩存可以節省很多時間,如果運行失敗,則生成的緩存不完整,後續就無法實現加速的效果。
  • 可以在Actions左下角的頁面查看緩存,一般命名為 [打包平臺]-cargo-xxxx,一般在400M-600M之間,如果緩存生成較小,只有幾十M,可以通過右邊的刪除按鈕刪除緩存,那麼下次構建會自動生成新緩存來代替。 title

#2.MacOS 環境配置

#(1)安裝Node.js

MacOS里可以直接通過Homebrew安裝。打開終端用以下命令安裝Node.js:

brew install node

安裝完成後,同樣可以使用 node -v 和 npm -v 命令驗證安裝。

#(2)安裝Pake

確保 Node.js 版本為 18 或更高版本(例如 18.7),避免使用 sudo 進行安裝

npm install pake-cli -g
  • 若下載速度較慢 請給終端設定代理
  • 實測安裝之後無法在當前終端進行打包,需要重啟終端開一個新的視窗

#2.Windows/Linux 環境配置(稍微麻煩一點)

  • 對於 Windows 用戶,請確保至少安裝了 Win10 SDK(10.0.19041.0) 和 Visual Studio Build Tools 2022(版本 17.2 或更高),此外還需要安裝以下組件:

    1. Microsoft Visual C++ 2015-2022 Redistributable (x64)
    2. Microsoft Visual C++ 2015-2022 Redistributable (x86)
    3. Microsoft Visual C++ 2012 Redistributable (x86)(可選)
    4. Microsoft Visual C++ 2013 Redistributable (x86)(可選)
    5. Microsoft Visual C++ 2008 Redistributable (x86)(可選)
  • 對於 Ubuntu 用戶,在開始之前,建議運行以下命令以安裝所需的依賴項:

sudo apt install libdbus-1-dev \
libsoup2.4-dev \
libjavascriptcoregtk-4.0-dev \
libwebkit2gtk-4.0-dev \
build-essential \
curl \
wget \
libssl-dev \
libgtk-3-dev \
libayatana-appindicator3-dev \
librsvg2-dev \
gnome-video-effects \
gnome-video-effects-extra
  • 之後,命令行安裝pake即可
npm install pake-cli -g

#3.正式打包網頁(pake-cli)

pake [url] [options]

舉個例子:pake https://weekly.tw93.fun --name Weekly --hide-title-bar

變量解釋:

[url]

url 是您需要打包的網頁鏈接 🔗 或本地 HTML 文件的路徑,此參數為必填。

[options]

您可以通過傳遞以下選項來定製打包過程:

[name]

指定應用程式的名稱,如果在輸入時未指定,系統會提示您輸入,建議使用單個英文名稱,不要出現下劃線或者中文。

--name <string>

[icon]

指定應用程式的圖標,支持本地或遠程文件。默認使用 Pake 的內置圖標。您可以訪問 icon-iconsmacOSicons 下載自定義圖標。

  • macOS 要求使用 .icns 格式。
  • Windows 要求使用 .ico 格式。
  • Linux 要求使用 .png 格式。
--icon <path>

[height]

設定應用視窗的高度,默認為 780px

--height <number>

[width]

設定應用視窗的寬度,默認為 1200px

--width <number>

[hide-title-bar]

設定是否啟用沉浸式頭部,默認為 false(不啟用)。當前只對 macOS 上有效。

--hide-title-bar

[fullscreen]

設定應用程式是否在啟動時自動全屏,默認為 false。使用以下命令可以設定應用程式啟動時自動全屏。

--fullscreen

[activation-shortcut]

設定應用程式的激活快捷鍵。默認為空,不生效,可以使用以下命令自定義激活快捷鍵,例如 CmdOrControl+Shift+P,使用可參考 available-modifiers

--activation-shortcut <string>

[always-on-top]

設定是否視窗一直在最頂層,默認為 false

--always-on-top

[disabled-web-shortcuts]

設定是否禁用原有 Pake 容器裡面的網頁操作快捷鍵,默認為 false

--disabled-web-shortcuts

[multi-arch]

設定打包結果同時支持 Intel 和 M1 晶元,僅適用於 macOS,默認為 false

準備工作

  • 注意:啟用此選項後,需要使用 rust 官網的 rustup 安裝 rust,不支持通過 brew 安裝。

  • 對於 Intel 晶元用戶,需要安裝 arm64 跨平臺包,以使安裝包支持 M1 晶元。使用以下命令安裝:

    rustup target add aarch64-apple-darwin
  • 對於 M1 晶元用戶,需要安裝 x86 跨平臺包,以使安裝包支持 Intel 晶元。使用以下命令安裝:

    rustup target add x86_64-apple-darwin

使用方法:

--multi-arch

[targets]

選擇輸出的包格式,支持 debappimage 或 all。如果選擇 all,則會同時打包 deb 和 appimage。此選項僅適用於 Linux,默認為 all

--targets <string>

[user-agent]

自定義瀏覽器的用戶代理請求頭,默認為空。

--user-agent <string>

[show-system-tray]

設定是否顯示通知欄托盤,默認不顯示。

--show-system-tray

[system-tray-icon]

設定通知欄托盤圖標,僅在啟用通知欄托盤時有效。圖標必須為 .ico 或 .png 格式,解析度為 32x32 到 256x256 像素。

--system-tray-icon <path>

[use-local-file]

當 url 為本地文件路徑時,如果啟用此選項,則會遞歸地將 url 路徑文件所在的文件夾及其所有子文件復

制到 Pake 的靜態文件夾。默認不啟用。

--use-local-file

[inject]

使用 inject 可以通過本地的絕對、相對路徑的 css js 文件註入到你所指定 url 的頁面中,從而為

其做定製化改造。舉個例子:一段可以通用到任何網頁的廣告屏蔽腳本,或者是優化頁面 UI 展的 css,你

只需要書寫一次可以將其通用到任何其他網頁打包的 app

--inject ./tools/style.css --inject ./tools/hotkey.js

[safe-domain]

這個安全功能變數名稱是除你當前配置的 url 之外可能會出現重定向或跳轉到的其他功能變數名稱,只有在已配置為安全的功能變數名稱中,

才能夠使用 tauri 暴露到瀏覽器的 api ,保證 pake 內置增強功能的正確運行。

PS: 安全功能變數名稱不需要攜帶協議。

--safe-domain weread.qq.com,google.com

[debug]

打出來的包具備 deb-tools 的調試模式,此外還會輸出更多的日誌信息用於調試。

--debug
📦 Pake 打包 Web APP 記錄
https://illumi.love/posts/指南向/pake打包web-app記錄/
作者
𝑰𝒍𝒍𝒖𝒎𝒊糖糖
發布於
2024-05-13
許可協議
🔒CC BY-NC-ND 4.0
💬 參與討論
使用 GitHub 帳號登入參與討論