共用方式為

開發適用於 Android 的 PWA 或混合式 Web 應用程式使用者入門

  • 發行項

本指南將協助您開始使用可在 Web 和跨裝置平台 (Android、iOS、Windows) 上使用的單一 HTML/CSS/JavaScript 程式碼基底，在 Windows 上建立混合式 Web 應用程式或漸進式 Web 應用程式 (PWA)。

透過使用正確的架構和元件，Web 型應用程式可以在 Android 裝置上運作，在使用者看來與原生應用程式非常相似。

PWA 或混合式 Web 應用程式的功能

Android 裝置上可以安裝兩種 Web 應用程式主要類型。 主要區別在於您的應用程式程式碼是內嵌到應用程式套件 (混合) 中，還是託管在 Web 伺服器 (PWA) 上。

  • 混合式 Web 應用程式：程式碼 (HTML、JS、CSS) 會封裝在 APK 中，可以透過 Google Play 商店分發。 查看引擎與使用者的網路瀏覽器隔離，沒有工作階段或快取共用。

  • 漸進式 Web Apps (PWA)：程式碼 (HTML、JS、CSS) 存在於網路上，不需要封裝為 APK。 使用 Service Worker 根據需要下載和更新資源。 Chrome 瀏覽器將會轉譯並顯示您的應用程式，但看起來是原生的，並且不包括普通的瀏覽器網址列等。您可以與瀏覽器共用儲存體、快取和工作階段。 這基本上就像在特殊模式下安裝 Chrome 瀏覽器的捷徑一樣。 PWA 也可以使用可信任網路活動 (Trusted Web Activity) 列在 Google Play 商店中。

PWA 和混合式 Web 應用程式與原生 Android 應用程式非常相似，因為它們：

  • 可透過 App Store (Google Play 商店和/或 Microsoft Store) 安裝
  • 可存取原生裝置功能，例如相機、GPS、藍牙、通知和連絡人清單
  • 離線工作 (沒有網路連線)

PWA 還有一些獨特的功能：

  • 可直接從 Web 安裝在 Android 主畫面 (無需 App Store)
  • 另外還可以使用可信任網路活動透過 Google Play 商店安裝
  • 可以透過 Web 搜尋找到或透過 URL 連結分享
  • 依靠 Service Worker 來避免封裝原生程式碼

您不需要架構來建立混合式應用程式或 PWA，但本指南將介紹一些熱門的架構，包括 PhoneGap (使用 Cordova) 和 Ionic (使用 Cordova 或使用 Angular 或 React 的 Capacitor)。

Apache Cordova

Apache Cordova 是一個開放原始碼架構，可以透過使用外掛程式簡化原生 WebView 中的 JavaScript 程式碼與原生 Android 平台之間的通訊。 這些外掛程式會公開可從程式碼呼叫的 JavaScript 端點，並用來呼叫原生 Android 裝置 API。 一些 Cordova 外掛程式範例包括存取裝置服務 (例如電池狀態、檔案存取權、振動/鈴聲等)。這些功能通常不適用於 Web 應用程式或瀏覽器。

Cordova 有兩種熱門的發行版：

  • PhoneGap：Adobe 已停止支援。

  • Ionic

Ionic

Ionic 是一種架構，可以調整應用程式的使用者介面 (UI)，以符合各個平台 (Android、iOS、Windows) 的設計語言。 Ionic 可讓您使用 Angular 或 React。

注意

Ionic 有一個新版本，它使用 Cordova 的替代方案，稱為 Capacitor。 這種替代方案會使用容器來讓您的應用程式更容易使用 Web。

安裝所需的工具開始使用 Ionic

若開始使用 Ionic 建立 PWA 或混合式 Web 應用程式，您應該先安裝以下工具：

使用 Ionic Cordova 和 Angular 建立新專案

透過在命令列中輸入以下命令來安裝 Ionic 和 Cordova：

npm install -g @ionic/cli cordova

輸入以下命令，使用「Tabs」應用程式範本建立 Ionic Angular 應用程式：

ionic start photo-gallery tabs

切換到應用程式資料夾：

cd photo-gallery

在 Web 瀏覽器中執行該應用程式：

ionic serve

有關更多資訊，請參閱 Ionic Cordova Angular 文件。造訪 Ionic 文件的讓您的 Angular 應用程式成為 PWA 一節，了解如何將應用程式從混合型轉變為 PWA。

使用 Ionic Capacitor 和 Angular 建立新專案

透過在命令列中輸入以下命令來安裝 Ionic 和 Cordova-Res：

npm install -g @ionic/cli native-run cordova-res

使用「Tabs」應用程式範本建立 Ionic Angular 應用程式，並透過輸入以下命令新增 Capacitor：

ionic start photo-gallery tabs --type=angular --capacitor

切換到應用程式資料夾：

cd photo-gallery

新增元件以讓應用程式成為 PWA：

npm install @ionic/pwa-elements

將以下內容新增至 src/main.ts 檔案來匯入 @ionic/pwa-elements：

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

在 Web 瀏覽器中執行該應用程式：

ionic serve

有關更多資訊，請參閱 Ionic Capacitor Angular 文件。造訪 Ionic 文件的讓您的 Angular 應用程式成為 PWA 一節，了解如何將應用程式從混合型轉變為 PWA。

使用 Ionic 和 React 建立新專案

在命令列中輸入以下內容來安裝 Ionic CLI：

npm install -g @ionic/cli

輸入以下命令，使用 React 建立新專案：

ionic start myApp blank --type=react

切換到應用程式資料夾：

cd myApp

在 Web 瀏覽器中執行該應用程式：

ionic serve

有關更多資訊，請參閱 Ionic React 文件。造訪 Ionic 文件的讓您的 React 應用程式成為 PWA 一節，了解如何將應用程式從混合型轉變為 PWA。

在裝置或模擬器上測試您的 Ionic 應用程式

若要在 Android 裝置上測試您的 Ionic 應用程式，請插入您的裝置 (確認已先啟用裝置以進行開發)，然後在命令列中輸入：

ionic cordova run android

若要在 Android 裝置模擬器上測試您的 Ionic 應用程式，您必須：

  1. 安裝所需的元件 - Java 開發套件 (JDK)、Gradle 和 Android SDK。

  2. 建立 Android 虛擬裝置 (AVD)：請參閱 [Android 開發者指南]](https://developer.android.com/studio/run/managing-avds.html)。

  3. 輸入 Ionic 的命令來建立應用程式並將其部署到模擬器：ionic cordova emulate [<platform>] [options]。 在這種情況下，命令應該是：

ionic cordova emulate android --list

如需更多資訊，請參閱 Ionic 文件中的 Cordova 模擬器。

其他資源