套件名稱真的很醜

昨天做出了基本介面，但有個大問題：APP 列表顯示的都是 com.android.systemui、com.miui.securitycenter 這種名稱。

我媽看到這些絕對會問我：「這是什麼鬼東西？」

必須想辦法把這些套件名稱轉換成人看得懂的 APP 名稱。

研究 ADB 指令

我開始研究怎麼用 ADB 取得 APP 的真實名稱。

找到幾個有用的指令：

# 取得 APP 的標籤名稱
adb shell dumpsys package com.android.chrome | grep "labelRes"

# 或是用這個更直接
adb shell pm dump com.android.chrome | grep "versionName"

但這些指令回傳的資料很亂，要解析出有用的資訊不容易。

另一個思路：APK 資訊

後來發現可以用這個指令取得更完整的 APK 資訊：

adb shell dumpsys package com.android.chrome | grep -A3 -B3 "Application Label"

但問題是每個 APP 都要執行一次指令，200 個 APP 就要執行 200 次，太慢了。

批次處理的解法

想到一個比較有效率的方法：

async getAppDisplayNames(deviceId, packages) {
  const cmd = `"${this.adbPath}" -s ${deviceId} shell 'for pkg in ${packages.join(' ')}; do echo "$pkg:$(pm dump $pkg 2>/dev/null | grep -m1 "versionName" || echo "Unknown")"; done'`;
  
  const result = await this.executeCommand(cmd);
  // 解析結果...
}

這樣可以一次處理多個套件，雖然還是很慢，但比一個一個處理快多了。

建立常見 APP 對照表

既然動態取得名稱這麼麻煩，我決定先建立一個常見 APP 的對照表：

const APP_NAME_MAP = {
  'com.android.chrome': 'Chrome 瀏覽器',
  'com.facebook.katana': 'Facebook',
  'com.instagram.android': 'Instagram',
  'com.whatsapp': 'WhatsApp',
  'com.miui.securitycenter': '手機管家',
  'com.android.systemui': '系統介面',
  // ... 更多對照
};

function getDisplayName(packageName) {
  return APP_NAME_MAP[packageName] || packageName;
}

至少常見的 APP 可以顯示中文名稱了。

加入 APP 分類

順便把 APP 分成幾類，方便使用者識別：

const APP_CATEGORIES = {
  SYSTEM: '系統應用',
  XIAOMI: '小米應用', 
  SOCIAL: '社群軟體',
  GOOGLE: 'Google 服務',
  UNKNOWN: '其他應用'
};

function categorizeApp(packageName) {
  if (packageName.startsWith('com.android.')) return APP_CATEGORIES.SYSTEM;
  if (packageName.startsWith('com.miui.')) return APP_CATEGORIES.XIAOMI;
  if (packageName.startsWith('com.google.')) return APP_CATEGORIES.GOOGLE;
  // ...
  return APP_CATEGORIES.UNKNOWN;
}

更新 UI 顯示

把分類和中文名稱整合到介面上：

renderAppList(apps) {
  const grouped = this.groupAppsByCategory(apps);
  
  let html = '';
  for (const [category, categoryApps] of Object.entries(grouped)) {
    html += `
      <div class="app-category">
        <h3>${category}</h3>
        ${categoryApps.map(app => `
          <div class="app-item">
            <input type="checkbox" value="${app.package}">
            <label>
              <span class="app-display-name">${app.displayName}</span>
              <span class="app-package">${app.package}</span>
            </label>
          </div>
        `).join('')}
      </div>
    `;
  }
  
  document.getElementById('app-list').innerHTML = html;
}

實際測試效果

重新測試後，APP 列表變得好看多了：

系統應用

• 系統介面 (com.android.systemui)
• Chrome 瀏覽器 (com.android.chrome)

小米應用

• 手機管家 (com.miui.securitycenter)
• 小米商店 (com.xiaomi.market)

其他應用

• com.some.unknown.app

雖然還是有很多不認識的套件，但至少常見的都有中文名稱了！

遇到的問題

對照表不完整

只能處理我知道的 APP，很多冷門的還是顯示套件名稱。

動態取得太慢

每個 APP 都要查詢一次，體驗不好。

廠商差異

不同手機廠商的系統 APP 套件名稱都不一樣。

妥協方案

最後決定採用混合策略：

1. 優先使用對照表顯示中文名稱
2. 未知的 APP 顯示套件名稱，但加上分類
3. 之後再慢慢增加對照表的內容

這樣至少大部分常用 APP 都有中文名稱，使用者比較容易識別。