下一步

對於那些了解如何使用 Cordova CLI 和外掛的開發人員來說，接下來您可能需要考慮研究一些事項，以便建構更好、效能更高的 Cordova 應用程式。以下文件提供了關於最佳實踐、測試、升級和其他主題的建議，但並非規範性的。請將此視為您作為 Cordova 開發人員成長的起點。此外，如果您發現有任何可以改進的地方，請貢獻！

Cordova 應用程式的最佳實踐

1) SPA 是您的朋友

首先，也是最重要的是 - 您的 Cordova 應用程式應採用 SPA (單頁應用程式) 設計。大致來說，SPA 是一種從網頁單次請求執行的客戶端應用程式。使用者載入初始資源集 (HTML、CSS 和 JavaScript)，進一步的更新 (顯示新視圖、載入資料) 則透過 XHR 請求完成。SPA 通常用於更複雜的客戶端應用程式。Gmail 就是一個很好的例子。載入 Gmail 後，郵件視圖、編輯和組織都透過更新 DOM 來完成，而不是實際離開目前頁面來載入全新的頁面。

使用 SPA 可以幫助您更有效地組織應用程式，但它也為 Cordova 應用程式帶來了特定的好處。Cordova 應用程式必須等待 deviceready 事件觸發後才能使用任何外掛。如果您不使用 SPA，且使用者點擊從一個頁面跳轉到另一個頁面，您將必須等待 deviceready 再次觸發，才能使用外掛。隨著您的應用程式越來越大，這一點很容易被遺忘。

即使您選擇不使用 Cordova，若不使用單頁架構建立行動應用程式也會產生嚴重的效能影響。這是因為在頁面之間導覽將需要重新載入指令碼、資源等。即使這些資源被快取，仍然會出現效能問題。

您可以在 Cordova 應用程式中使用的 SPA 函式庫範例包括

• React
• Vue.js
• Angular
• Ember.js
• Backbone.js
• Kendo UI
• Onsen UI

還有許多其他函式庫。

2) 效能考量

請考量以下問題，以改善行動應用程式的效能

• 點擊與觸控

  許多裝置會對點擊事件施加 300 毫秒的延遲，以便區分點擊和點擊縮放手勢。這可能會讓您的應用程式感覺遲緩且無反應。避免這種延遲是提高應用程式感知效能的最重要方法之一。

  如需更多關於點擊延遲的資訊，請參閱 Google 開發人員網站上的 300 毫秒點擊延遲已消失。

  截至 2015 年，大多數 Android 和 iOS 裝置不再施加延遲。對於 Android 和 iOS，請確保您的 viewport meta 標籤已設定 width=device-width 值，否則您仍然會有點擊延遲。

• CSS 過渡效果與 DOM 操作

  使用硬體加速的 CSS 過渡效果會比使用 JavaScript 建立動畫要好得多。請參閱本節末尾的資源清單以取得範例。

• 網路

  行動網路的延遲，即使是良好的行動網路，也比您想像的要差得多。每 30 秒下載 500 行 JSON 資料的桌面應用程式，在行動裝置上會更慢，而且耗電量也會更大。請記住，Cordova 應用程式有多種方式可以將資料保存到應用程式中 (例如 LocalStorage 和檔案系統)。在本地快取該資料，並注意您來回傳送的資料量。當您的應用程式透過蜂巢式網路連線時，這是一個特別重要的考量因素。

3) 識別並處理離線狀態

請參閱前一個關於網路的提示。您的應用程式不僅可能處於速度慢的網路中，而且完全有可能處於離線狀態。您的應用程式應以智慧方式處理這種情況。如果您的應用程式沒有這樣做，人們會認為您的應用程式已損壞。考慮到處理起來是如此容易 (Cordova 支援偵聽離線和線上事件)，您的應用程式在離線執行時沒有任何理由不做出良好的回應。請務必測試 (請參閱下方的「測試」章節) 您的應用程式，並務必測試當您從一種狀態啟動然後切換到另一種狀態時，您的應用程式如何處理。

請注意，線上和離線事件以及網路連線 API 並非完美。您可能需要依賴使用 XHR 請求來查看裝置是否真的離線或在線上。最終，請務必新增某種形式的網路問題支援 - 事實上，Apple Store (以及其他商店) 會拒絕未正確處理離線/線上狀態的應用程式。如需更多關於此主題的討論，請參閱 「這個東西連線了嗎？」

處理升級

升級 Cordova 專案

Cordova 專案沒有升級命令。相反地，請從您的專案中移除平台，然後重新新增，以取得最新版本。

cordova platform rm android
cordova platform add android

務必閱讀更新版本中變更的內容，因為更新可能會破壞您的程式碼。找到此資訊的最佳位置是儲存庫和 Cordova 部落格中發布的版本資訊。您需要徹底測試您的應用程式，以驗證在您執行更新後是否正常運作。

注意：某些外掛可能與新版本的 Cordova 不相容。如果外掛不相容，您或許可以找到可以滿足您需求的替代外掛，或者您可能需要延後升級您的專案。或者，修改外掛使其在新版本下正常運作，並回饋給社群。

外掛升級

升級外掛的流程與平台相同 - 移除它，然後重新新增。

cordova plugin rm some-plugin
cordova plugin add some-plugin

如需更多詳細資訊，請參閱管理版本和平台。

請務必查看更新後的外掛文件，因為您可能需要調整您的程式碼才能使用新版本。此外，請仔細檢查新版本的外掛是否與您專案的 Cordova 版本相容。

請務必測試您的應用程式，以確保安裝新外掛沒有破壞您意料之外的任何東西。

如果您的專案有很多需要更新的外掛，則建立一個可以使用一個指令移除和新增外掛的 shell 或批次指令碼可能會節省時間。

測試 Cordova 應用程式

測試您的應用程式非常重要。Cordova 團隊使用 Jasmine，但任何適用於網路的單元測試解決方案都可以。

在模擬器上測試與在真實裝置上測試

在開發 Cordova 應用程式時，使用桌面瀏覽器和裝置模擬器/模擬器是很常見的。但是，您必須盡可能在許多實體裝置上測試您的應用程式

• 模擬器只是模擬器。例如，您的應用程式可能在 iOS 模擬器中正常運作，但在真實裝置上可能會失敗 (尤其是在某些情況下，例如記憶體不足的情況)。或者，您的應用程式實際上可能會在模擬器上失敗，但在真實裝置上卻正常運作。
• 模擬器只是模擬器。它們並不能代表您的應用程式在實體裝置上的執行情況。例如，某些模擬器可能會以亂碼顯示您的應用程式，而真實裝置則沒有問題。(如果您遇到這個問題，請在模擬器中停用主機 GPU。)
• 模擬器通常比您的實體裝置快。另一方面，模擬器通常比較慢。不要根據您的應用程式在模擬器或模擬器中的效能來判斷其效能。請根據您的應用程式在各種實體裝置上的執行情況來判斷其效能。
• 使用模擬器或模擬器無法很好地感受您的應用程式對您的觸控的回應。相反地，在真實裝置上執行應用程式可以指出使用者介面元素的大小、回應性等問題。
• 雖然最好能夠僅在每個平台上的一個裝置上進行測試，但最好在具有許多不同 OS 版本的許多裝置上進行測試。例如，在您特定的 Android 智慧型手機上運作的應用程式可能在其他 Android 裝置上會失敗。在最新的 iOS 裝置上運作的應用程式可能在較舊的裝置上會失敗。

當然，不可能在市面上所有可能的裝置上進行測試。因此，明智的做法是招募許多擁有不同裝置的測試人員。雖然他們不會捕捉到所有問題，但他們很可能會發現您永遠無法單獨找到的怪癖和問題。

偵錯 Cordova 應用程式

在大多數情況下，偵錯 Cordova 應用程式非常簡單。

iOS 偵錯

Xcode

您可以使用 Xcode 除錯 Cordova 應用程式的 iOS 原生端。請確認「除錯區域」（Debug Area）已顯示（「檢視」->「除錯區域」）。一旦您的應用程式在裝置（或模擬器）上執行，您就可以在除錯區域中檢視記錄輸出。任何錯誤或警告都會列印在此處。您也可以在原始碼檔案中設定中斷點。這可讓您一次逐步執行一行程式碼，並檢視該時間點的變數狀態。當遇到中斷點時，變數的狀態會顯示在除錯區域中。一旦您的應用程式在裝置上啟動並執行，您就可以開啟 Safari 的網頁檢閱器（如下所述）來除錯應用程式的網頁檢視和 JS 端。如需更多詳細資訊，請參閱 Apple 除錯支援文件。

使用網頁檢閱器進行 Safari 遠端除錯

您可以使用 Safari 的網頁檢閱器來除錯 Cordova 應用程式中的網頁檢視和 js 程式碼。這僅適用於 macOS。它使用 Safari 連接到您的裝置（或模擬器），並將瀏覽器的開發人員工具連接到 Cordova 應用程式。您可以從開發人員工具中獲得您期望的功能：DOM 檢查/操作、JavaScript 除錯器、網路檢查、主控台等等。就像 Xcode 一樣，您可以使用 Safari 的網頁檢閱器在 JavaScript 程式碼中設定中斷點，並檢視該時間點的變數狀態。您可以檢視列印到主控台的任何錯誤、警告或訊息。您也可以在應用程式執行時，直接從主控台執行 JavaScript 命令。

若要開始檢查，請先在裝置上的「設定」>「Safari」>「進階」>「網頁檢閱器」中啟用它。在您的桌面上，從「Safari」>「偏好設定」>「進階」>「在選單列中顯示『開發』選單」啟用開發人員工具。在「開發」選單中，您現在可以選擇連線的裝置，以及您想要檢查的應用程式。

Chrome 遠端除錯

這與 Safari 版本幾乎相同，僅適用於 Android，但可以從任何桌面作業系統使用。連線後，您可以像使用桌面應用程式一樣，獲得行動應用程式的 Chrome 開發人員工具體驗。更棒的是，Chrome 開發人員工具有一個鏡像選項，可顯示您的應用程式在行動裝置上的執行情況。這不僅僅是一個檢視畫面 - 您可以從開發人員工具捲動和點擊，它會在行動裝置上更新。

若要檢查，只需在桌面的 Chrome 中開啟網址 chrome://inspect。在這裡，您會看到已連線裝置和可檢查應用程式的清單。您的裝置必須設定為 USB 除錯才能運作。如需設定的完整說明，請參閱 https://developers.google.com/chrome/mobile/docs/debugging。

如果您可以在檢查裝置區段中看到您的裝置，但看不到 Cordova 網頁檢視，您可能需要在 AndroidManifest.xml 的 <application> 節點中新增 android:debuggable="true"。

也可以透過 WebKit Proxy 使用 Chrome 開發人員工具來檢查 iOS 應用程式：https://github.com/google/ios-webkit-debug-proxy/

使用者介面

建立在行動裝置上看起來美觀的 Cordova 應用程式可能具有挑戰性，尤其是對開發人員而言。許多人選擇使用 UI 框架來使其更容易。以下是一些您可能想考慮的選項的簡短清單。

• Ionic - 這個強大的 UI 框架實際上具有自己的 CLI 來處理專案建立。
• Ratchet - 由建立 Bootstrap 的人員提供。
• Kendo UI - 來自 Telerik 的開源 UI 和應用程式框架。
• Onsen UI - 用於網站和 Cordova 應用程式的開源 UI 框架。
• Topcoat
• ReactJS

在建立使用者介面時，請務必考慮您要鎖定的所有平台以及使用者期望之間的差異。例如，具有 iOS 風格 UI 的 Android 應用程式可能不會受到使用者的歡迎。有時，這甚至會受到各種應用程式商店的強制執行。因此，尊重每個平台的慣例非常重要，因此您需要熟悉各種「人機介面指南」。

• iOS
• Android

特殊注意事項

雖然 Cordova 使跨平台開發更容易，但它並不能 100% 隔離底層原生平台，因此請注意限制。

平台特性

在閱讀文件時，請尋找概述多個平台上不同行為或要求的章節。如果有的話，這些章節會標題為「Android 特性」、「iOS 特性」等。請閱讀這些特性，並在您使用 Cordova 時注意它們。

載入遠端內容

從遠端載入的 HTML 頁面（未在本機儲存在裝置上的 HTML 頁面）叫用 Cordova JavaScript 函式是一種不支援的設定。這是因為 Cordova 並非為此而設計，而 Apache Cordova 社群也沒有測試這種設定。雖然它在某些情況下可以運作，但不建議也不支援。同源政策、保持 JavaScript 和 Cordova 的原生部分在同一版本同步（因為它們透過可能會變更的私有 API 耦合）、遠端內容呼叫原生本機函式的可信度，以及潛在的應用程式商店拒絕，都存在挑戰。

在網頁檢視中顯示遠端載入的 HTML 內容應該使用 Cordova 的 InAppBrowser 完成。InAppBrowser 的設計目的是讓在那裡執行的 JavaScript 無法存取 Cordova JavaScript API，原因如上所述。請參閱 安全指南。

保持更新

以下是一些保持 Cordova 最新狀態的方法。

• 訂閱 Cordova 網誌。
• 訂閱 開發人員列表。請注意 - 這不是支援群組，而是討論 Cordova 開發的地方。

取得協助

以下連結是取得 Cordova 協助的最佳地點

• GitHub 討論 - Apache Cordova

  官方 Apache Cordova GitHub 討論頻道是我們支援資源的最新成員，旨在集中我們 GitHub 儲存庫內的社群討論和問題。

  強烈建議使用此頻道，因為它將所有 Cordova 事物匯集在一起，並提供保留完整討論歷史記錄的優勢。透過利用 GitHub 討論，我們可以確保更好的連續性和可存取性，以供未來參考。

• Slack - Apache Cordova

  官方 Apache Cordova Slack 工作區是尋求社群協助並快速獲得問題答案的絕佳資源。

  但是，務必注意，我們的 Slack 工作區不保留訊息歷史記錄。這限制了資訊的長期可存取性。為了確保更好地保留您的問題，建議在 GitHub 討論中建立執行緒，並在 Slack 中分享連結和您的問題摘要。

  這樣一來，您就可以從 Slack 的即時回應中獲益，同時也能保留討論並使其更易於未來參考。

• Stack Overflow - Apache Cordova

  在 Stack Overflow 上，可以使用「cordova」標籤來瀏覽所有 Cordova 問題。

  注意：StackOverflow 會自動將「phonegap」標籤轉換為「cordova」，以維護歷史問題。

  Stack Overflow 擁有龐大且多元的社群，使其成為根據您的問題性質獲得結果的絕佳選擇。例如，即使您正在開發 Cordova 應用程式，如果您的問題更多地與網頁或原生應用程式開發有關，那麼使用此平台可能更合適。這樣做，您可以將您的問題暴露給專精於這些特定領域的更廣泛社群。

• Google Group - PhoneGap

  這個 Google 群組以前是 Cordova 的支援論壇，當時它被稱為 PhoneGap。雖然這個群組目前處於非活動狀態，但它仍然可以存取以供歷史參考。

  建議使用其他平台，例如 GitHub 討論、Stack Overflow 或 Slack 來獲得支援並與 Cordova 社群互動。這些平台為協助和討論提供了更積極的場所。