在 App 中加入遊戲：用 WebView 執行 HTML5 遊戲

要在 App 中加入遊戲，不需要在裡面放一套遊戲引擎。你需要的是 WebView：Android 和 iOS 提供、用來在原生畫面中顯示網頁內容的元件。把一個完成的 HTML5 遊戲資料夾放進 App 安裝檔，或放在你自己的 HTTPS 伺服器上，讓 WebView 指向它的 index.html，你的 App 就多了一個遊戲專區，執行的是和瀏覽器版相同的程式碼。

這篇文章寫給已經有 App 的團隊（零售 App、銀行、學校平台、俱樂部或媒體品牌），想把 App 內遊戲當成一項功能，而不是在商店再上架一個新 App。內容包括本機與遠端檔案的取捨、設定錯了就會讓遊戲壞掉的 WebView 選項、進度儲存、返回鍵、我們哪些範本適合，以及授權怎麼依 App 計算。平台細節來自 Android Developers 與 Apple Developer 文件，查閱日期為 2026 年 10 月 30 日。

在 App 中加入遊戲：WebView 做法如何運作

WebView 就是拿掉外框的瀏覽器引擎。你的原生程式碼建立它、決定它的大小和設定，並告訴它要載入什麼。在 Android 上這個類別叫 WebView；在 iOS 上叫 WKWebView。HTML5 遊戲分不出差別：它看到的是一個頁面、一塊 canvas 和儲存空間，跟在 Chrome 或 Safari 裡一樣。

這就是這種做法在 App 內遊戲中受歡迎的原因。遊戲團隊用 HTML、CSS 和 JavaScript 開發，App 團隊加一個畫面和幾項設定，同一個遊戲資料夾也能放在網站上。需要規劃的有三個環節：

1. 檔案放在哪裡：打包進 App，或從你的 HTTPS 伺服器提供。
2. WebView 怎麼設定：JavaScript、儲存空間、遊戲執行的網址。
3. 遊戲和 App 怎麼溝通：開啟、暫停、返回鍵、關閉。

我們的範本剛好符合這個架構，因為每一款都附有現成的 game/ 資料夾和 index.html，專為靜態主機設計，遊戲本身不需要 PHP 或資料庫。它們都不包含原生的部分。每個版本都在「本版本不包含」中列出原生 App 或商店建置，所以 WebView 畫面是你們團隊的工作，或由我們另外報價。

瀏覽 HTML5 遊戲範本

本機還是遠端：遊戲檔案該放哪裡

本機：遊戲隨 App 一起發布

Android 關於載入 App 內容的指南提到，編譯進 App 的網頁內容不需要網路連線，也不會用到使用者的流量。你把 game/ 資料夾複製到 App 的 assets 裡，從那裡載入。代價是容量：遊戲會增加下載大小，而每次更新遊戲都得發布新版 App、重新送商店審查。

遠端：App 從你的伺服器載入遊戲

WebView 開啟你自有網域上的一個 HTTPS 網址。不用重新建置 App 就能更新遊戲，App 也維持輕巧。代價是遊戲需要連網，網路慢時第一次載入也會慢。

Apple 在這裡有一條特別規定。《App 審查指南》第 4.7 條涵蓋未內嵌於二進位檔中的 HTML5 和 JavaScript 小遊戲。其中一項條件是，未經 Apple 許可，App 不得向這類軟體擴充或開放原生平台 API，而且必須提供所提供軟體的索引，並附上通用連結。在 iOS 上選擇遠端做法之前，請完整讀過 4.7 條。

• App 容量：本機會加上遊戲的大小；遠端幾乎不增加。
• 更新：本機需要發布新版 App；遠端上傳就生效。
• 連線：本機安裝後可離線啟動；遠端需要網路。
• 審查：本機遊戲隨 App 一起審查；iOS 上的遠端遊戲適用第 4.7 條。

決定遊戲成敗的 Android WebView 設定

大部分「遊戲一片白」的回報都來自三個預設值。這三點在 Android Developers 上都有文件。

1. JavaScript 預設關閉。WebView 指南說 WebView 中的 JavaScript 預設是停用的。每個 HTML5 遊戲都需要它，所以要在 WebSettings 中啟用。
2. 儲存空間預設關閉。WebSettings 參考文件說 setDomStorageEnabled 的預設值是 false。用 localStorage 保存進度的遊戲必須開啟，否則每次都從零開始。
3. file:// 是錯誤的網址。Android 的 App 內容指南說明，file:// 網址屬於不透明來源，無法使用 fetch() 或 XMLHttpRequest 等 API，也不建議開啟檔案存取的權宜設定。我們的商品頁從遊戲端也是這麼說：Gridspark 和 Twirldrop 等版本無法從 file:// 執行。

第三點的解法是 AndroidX Webkit 程式庫中的 WebViewAssetLoader。它透過 HTTPS 網址提供 App assets 裡的檔案，Android 官方範例載入的是 https://appassets.androidplatform.net/assets/index.html。對遊戲來說，這就像一般網站，所以 ES 模組、fetch 和儲存空間的表現都和在你的伺服器上一樣。

iOS：WKWebView、本機檔案與資料儲存

在 iOS 上，元件是 WKWebView。Apple 為本機內容提供 loadFileURL(_:allowingReadAccessTo:)：第二個參數是 WebKit 可以讀取的檔案或資料夾，傳入資料夾就能讓頁面載入周圍的檔案。

因為我們的版本不支援從 file:// 開啟，這條路要仔細測試，或乾脆略過。Apple 也提供 WKURLSchemeHandler，這是一個用來載入 WebKit 不處理的 URL 協定資源的協定，讓你的 App 能用自己的協定提供遊戲資料夾。Capacitor 已經幫你做好：它在 iOS 上的預設協定是 capacitor。

儲存空間位於 WKWebsiteDataStore。Apple 的文件說，預設的資料儲存會把網站資料永久寫入磁碟，而非永久性的儲存只把資料放在記憶體中，用於無痕瀏覽。如果團隊裡有人設定了非永久性儲存，玩家每次關掉 App 都會失去進度。

iOS 沒有系統返回鍵，所以遊戲畫面需要自己的離開方式：在原生導覽列放一個關閉按鈕，或讓遊戲透過訊息處理器呼叫。

在 App 內保存進度

我們的遊戲把進度存在玩家的瀏覽器儲存空間，而不是伺服器上。Solitaire Links 和 Deepforge 在頁面上寫得很清楚：進度保存在 localStorage，沒有帳號，也沒有雲端同步。放進 App 之後，這會帶來三個影響。

• 網址是存檔的一部分。瀏覽器儲存空間屬於某個來源（origin）。如果從一個協定或主機換到另一個，例如從測試網域換到 appassets.androidplatform.net，玩家就得重新開始。網址一次決定好。
• 存檔鍵是存檔的一部分。Tenguin 的商品頁提醒買家，已上線的遊戲不要更改存檔鍵，否則玩家會失去進度。好幾個 TypeScript 版本把儲存鍵放在 brand.ts。要改就在上線前刻意改，上線後絕對不要改。
• 清除 App 資料就會清除遊戲。解除安裝 App 或清除它的儲存空間會刪除存檔，就跟清除瀏覽器資料一樣。

如果進度必須跟著使用者跨裝置，那是伺服器功能，我們的版本都沒有包含。每個版本都把雲端存檔或帳號列為不包含。Deepforge 是最友善的起點：它的頁面介紹了選單中的存檔匯出與匯入，以及一個小型的 window.DeepForge API，讓宿主頁面可以暫停、繼續、讀取存檔並監聽存檔事件。

看看 Deepforge 和它的宿主頁面 API

返回鍵、暫停與離開遊戲

HTML5 遊戲通常是單一頁面。這在 Android 上很重要，因為返回鍵會沿著 WebView 的瀏覽紀錄往回走。Android 的 WebView 指南示範了做法：檢查 canGoBack() 並呼叫 goBack()，或交給系統處理該事件；使用 AndroidX 時，則在 OnBackPressedDispatcher 上註冊同樣的邏輯。單頁遊戲的瀏覽紀錄常常是空的，所以按返回鍵會立刻關掉遊戲畫面，就算正在關卡中途也一樣。

先決定返回鍵要做什麼，並寫下來：

• 第一次按開啟遊戲的暫停選單；第二次按離開遊戲畫面。
• 或者返回鍵一律離開，但要在遊戲存檔之後。每個版本都會在本機存檔，但要確認它何時寫入：關卡結束時，還是遊玩過程中。
• App 切到背景時暫停遊戲。沒有暫停的話，計時器會在 App 其他畫面背後繼續跑。

我們的版本沒有附 App 橋接。部分版本提供的是從頁面進入的方式：Gridspark 和 Ricopop 有點擊開始畫面和全螢幕按鈕，可在設定檔中開關；Deepforge 則向頁面開放暫停和繼續。其他功能，例如關卡結束時傳訊息給原生程式碼，需要在原始碼做小幅修改，由你們團隊處理或由我們報價。

看看 Gridspark：純 JavaScript，不必建置就能玩

授權：一款遊戲、一個 App，以及要先問清楚的事

我們的條款提供永久、非專屬的授權，可在一個最終產品中使用該版本，用於你自己或一位客戶。附有遊戲專區的 App 就是這個最終產品。玩家可以免費使用，或透過廣告營利的方式使用。你可以修改程式碼、美術和音效，也可以白牌使用：用你的品牌取代我們的。

有三種情況需要多看一眼。

• 多個 App。代理商把同一款遊戲放進三位客戶的 App，需要三份授權。同一筆訂單購買多個範本有組合折扣：2 個 5%，3 個 10%，4 個 15%，5 個以上 20%。
• 同一個 App 的 Android 和 iOS 版本。一份授權讓你可以把這款遊戲發布到任何地方，包括 Google Play 和 App Store。仍然是一個最終產品一份授權。
• 提供給其他開發者的遊戲 SDK。條款禁止在以開發者為對象的其他產品中再散布範本或其程式碼。賣給其他 App 開發者的遊戲模組就屬於這類產品。

如果你的 App 要對遊戲專區收費，或在裡面販售道具，也請先問我們。條款寫的是免費使用和廣告營利，而好幾個版本都把真實貨幣購買列為不包含。在 iOS 上，第 3.1.1 條規定解鎖功能或內容（包括遊戲關卡）必須使用 App 內購買。

企業授權、發票與報價

常見問題

可以把 HTML5 遊戲放進 Android 或 iOS App 嗎？

可以。在 WebView 中載入遊戲資料夾（Android 用 WebView，iOS 用 WKWebView），可以和 App 一起打包，也可以從你的 HTTPS 伺服器載入。開啟 JavaScript 和儲存空間，並用 HTTPS 形式的網址而不是 file:// 提供檔案。

遊戲在 App 裡可以離線玩嗎？

只有在你打包了檔案、而且該版本不從網路載入任何東西時才可以。我們有好幾個版本把美術、音效和字型都放在本機；Ricopop 的頁面則寫明需要連線。承諾之前，先用飛航模式測試。

更新 App 時玩家會失去進度嗎？

只要網址和存檔鍵不變就不會。存檔存在 WebView 中該來源的儲存空間。更改協定、主機或儲存鍵，所有人都會從零開始。

我的 App 需要幾份授權？

每個最終產品一份。一個 App 一款遊戲就是一份授權；同一款遊戲放進三位客戶的 App 就是三份。同一個 App 同時上架 Google Play 和 App Store 不需要第二份授權：取得授權的遊戲可以發布到任何地方。

下一步

挑一款遊戲，用手機玩它的試玩版，然後讀它的「本版本不包含」清單和手冊中關於存檔的章節。如果你希望由我們把遊戲畫面整合進你的 App，請把 App、平台和你喜歡的遊戲告訴我們，我們會回覆範圍、價格和時程。

查看所有遊戲範本

洽詢 App 整合報價