當你撰寫了一個"純原生 HTML/CSS/JS"的網頁遊戲或程式應用，但想上架 手機的APP Store，可用 Capacitor 直接封裝成原生 App。
此方案不需要 React/Vue，也不需要打包器；Capacitor 只負責把你的網頁放進原生 WebView，並提供原生能力橋接。
## 前置需求
- **Node.js / npm**：確定已可用
- **Android**
- 安裝 Android Studio + SDK
- 建議至少安裝一個 Emulator（或接實機 USB 偵錯）
- **iOS（僅 macOS）**
- 安裝 Xcode
## 目錄設定
- 網頁原始碼，例如：根目錄 `index.html / style.css / game.js`
- 打包用 Web 目錄：`www/`（由腳本自動生成）
- Capacitor 設定：`capacitor.config.json`
> 為什麼用 `www/`：避免把 `android/ios/node_modules` 等雜項塞進封裝資產，並且更接近 Capacitor 官方預設流程。
## 一次安裝（第一次做）
在你的網頁程式位置，例如 `d:\TileExplorer\TilesClear\` 執行：
```bash
npm install
```
初始化 Capacitor（只做一次）：
```bash
npm run cap:init
```
新增平台（只做一次）：
```bash
npm run cap:add:android
```
（iOS 只在 macOS）
```bash
npm run cap:add:ios
```
## 日常開發流程
每次你修改 `index.html/style.css/game.js` 之後：
```bash
npm run cap:sync
```
然後開啟原生專案：
```bash
npm run cap:open:android
```
（iOS）
```bash
npm run cap:open:ios
```
也可以直接跑到裝置/模擬器：
```bash
npm run cap:run:android
```
## 產出 APK / AAB（Android）
1. `npm run cap:sync`
2. `npm run cap:open:android`
3. Android Studio 內：
- **Build > Generate Signed Bundle / APK**
- 選 **Android App Bundle (AAB)**（上架 Play Store 建議用這個）
- 或選 **APK**（側載測試）
## 常見的坑與建議
- **路徑/資源引用**
- 目前你的資源是相對路徑（`style.css`、`game.js`），適合 WebView。
- **離線**
- 因為資源都被打包進 App，預設即離線可玩（不含 Google Fonts）。
- 若你要完全離線（不依賴 Google Fonts），可改為下載字體檔並本地引用（下一步我可以幫你做）。
- **localhost**
- 本方案是「把靜態檔複製到 `www/`」的模式，不需要開 `localhost` 才能跑。
- **AppId / AppName**
- `capacitor.config.json` 的 `appId` 目前是 `com.example.tilesclear`，上架前請換成你的正式網域風格（例如 `com.hankw.tilesclear`）。
