Skip to content
• Anonymous

Bubblewrap 與 TWA 的跨平台之旅：如何將 PWA 包裝成 Android APK 並上架 Play Store

PWA 不只能在瀏覽器運行。分享 DueWise 如何透過 Google 的 Bubblewrap 工具生成 TWA，實現低成本上架 Play Store 的實戰流程。

#TWA #Bubblewrap #Android #PWA #Google Play

Bubblewrap 與 TWA 的跨平台之旅：如何將 PWA 包裝成 Android APK 並上架 Play Store

很多開發者認為，要上架應用商店（App Store / Play Store）就必須寫原生代碼（Java/Kotlin/Swift）或是使用跨平台框架（React Native/Flutter）。但在 DueWise 的開發過程中，我們證實了另一條更便捷的路徑：Trusted Web Activity (TWA)。

透過 Google 推出的 Bubblewrap 工具，我們成功地將 DueWise PWA 打包成了專業的 Android APK，並跨越了網頁與原生應用的最後一道邊界。

1. 什麼是 TWA (Trusted Web Activity)？

TWA 是一種特殊的 Android 自定義標籤頁 (Custom Tabs)，它允許你的 PWA 在一個「全螢幕且無地址列」的容器中運行。

與傳統的 WebView 相比，TWA 具有以下優勢：

  • 效能一致: 使用的是用戶系統中的 Chrome 引擎，性能與瀏覽器版無異。
  • 共享緩存: 用戶在瀏覽器中已經登入的資訊與快取，在 TWA App 中依然有效（因為它們共享同一個 Cookie Jar）。
  • 商店認可: 完全符合 Google Play 的上架規範。

2. 實作流程：從 Web 到 APK

在 DueWise 中，我們的打包流程高度自動化：

第一步：準備 manifest.json

TWA 高度依賴你的 Web App Manifest。確保你的圖示解析度足夠（建議包含 512x512）、具備清晰的 short_name 以及明確的 start_url。

第二步：安裝並初始化 Bubblewrap

我們在開發環境中使用 Node.js CLI。

npm install -g @bubblewrap/cli
bubblewrap init --manifest https://duewise.cc/manifest.json

在初始化過程中，Bubblewrap 會詢問應用的包名 (Package Name)、主題顏色以及是否需要包含 Splash Screen。

這是最核心的安全環節，也是為什麼它被稱為「Trusted（可信）」的原因。你需要證明你同時擁有了「該域名」與「該 APK 的簽名金鑰」。

我們需要在網域的根路徑下部署一個特殊的 JSON 檔案： https://duewise.cc/.well-known/assetlinks.json

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.duewise.app",
    "sha256_cert_fingerprints": ["YOUR_SHA256_FINGERPRINT"]
  }
}]

3. 面臨的挑戰：系統整合

雖然 TWA 運行的就是你的網頁，但用戶對於「安裝在手機上的 App」有更高的期待。

1. 狀態列與手勢優化

我們在 CSS 中使用了 padding: env(safe-area-inset-bottom)，確保在全面屏手機上，DueWise 的導航列不會被系統手勢條遮擋。

2. 深色模式連動

我們在 TWA 配置中啟用了 dark_mode_supported: true。這讓系統切換到省電模式時，DueWise 的閃屏與背景也能同步變成沈穩的黑色。

4. 上架 Play Store 的心得

Google Play 的審核對於 TWA 是相對友善的，只要你的 PWA 具備以下核心能力：

  • 離線支援: 必須有一個 offline.html 或是完善的 Service Worker。
  • 功能完整: 不能只是一個導流頁面或廣告，必須具備實質的工具價值。

對於 DueWise 而言，我們從「網頁版」到「擁有一款 Play Store 商店 App」，整個轉換與佈署過程不超過 2 個小時。這種效率在傳統開發模式下是難以想像的。

5. 個人見解：Web 的力量

我始終相信「Web 第一」的原則。一旦你在 Web 上實現了卓越的體驗，透過 TWA 或 Bubblewrap 進入原生生態系只是舉手之勞。

這不僅減少了維護多套代碼的痛苦，更讓我們能以最快的速度將新功能同步推送給 Web、iOS (透過 Safari PWA) 與 Android (透過 TWA) 的所有用戶。

結論

不要被「原生外殼」所限制。透過 Bubblewrap 與 TWA，DueWise 向世界證明了：只要你的 Web 底層夠紮實，整個移動網際網路都是你的主場。

下一篇文章，我們將探討如何優化搜尋引擎的能見度：「AEO 與 SEO 實戰：讓 AI 搜尋引擎與 Google 主動推薦你的產品」。