Android 用の PWA またはハイブリッド Web アプリの開発を開始する

  • [アーティクル]

このガイドは、Web およびデバイス プラットフォーム (Android、iOS、Windows) で使用できる単一の HTML/CSS/JavaScript コードベースを使って、Windows でハイブリッド Web アプリまたはプログレッシブ Web アプリ (PWA) の作成を開始するのに役立ちます。

適切なフレームワークとコンポーネントを使用することにより、Web ベースのアプリケーションは、ネイティブ アプリと非常によく似た方法で、Android デバイスで動作することができます。

PWA またはハイブリッド Web アプリの機能

Android デバイスにインストールできる Web アプリには、主に 2 つの種類があります。 主な違いは、アプリケーション コードがアプリ パッケージ (ハイブリッド) に埋め込まれているか、Web サーバー (PWA) でホストされているかということです。

  • ハイブリッド Web アプリ: コード (HTML、JS、CSS) は APK にパッケージ化されており、Google Play ストア経由で配布できます。 表示エンジンは、ユーザーのインターネット ブラウザーから分離され、セッションもキャッシュも共有されません。

  • プログレッシブ Webアプリ (PWA): コード (HTML、JS、CSS) は Web 上に存在し、APK としてパッケージ化する必要はありません。 リソースは、サービス ワーカーを使用して必要に応じてダウンロードおよび更新されます。 Chrome ブラウザーによってアプリがレンダリングおよび表示されますが、ネイティブに見え、通常のブラウザーのアドレス バーなどは含まれません。ブラウザーでストレージ、キャッシュ、およびセッションを共有できます。 これは基本的には、特別なモードで Chrome ブラウザーへのショートカットをインストールするようなものです。 PWA は、信頼できる Web アクティビティを使用して Google Play ストアに一覧表示することもできます。

PWA とハイブリッド Web アプリは、次の点でネイティブの Android アプリと非常によく似ています。

  • App Store (Google Play ストアや Microsoft Store) 経由でインストールできる
  • カメラ、GPS、Bluetooth、通知、連絡先の一覧などのネイティブ デバイス機能にアクセスできる
  • オフラインで動作する (インターネット接続なし)

PWA には次のいくつかの固有の機能もあります。

  • (App Store を使用せずに) Web から直接 Android ホーム画面にインストールできる
  • 信頼できる Web アクティビティを使用して、Google Play ストア経由でインストールすることもできる
  • Web 検索を使用して検出したり、URL リンクを介して共有したりすることができる
  • サービス ワーカーに依存して、ネイティブ コードをパッケージ化する必要がないようにする

ハイブリッド アプリまたは PWA を作成するためのフレームワークは必要ありませんが、PhoneGap (Cordova を含む) と Ionic (Angular または React を使用する Cordova または Capacitor を含む) を含め、このガイドで取り上げられる一般的なフレームワークがいくつかあります。

Apache Cordova

Apache Cordova は、プラグインを使用して、ネイティブの WebView にある JavaScript コードとネイティブの Android プラットフォーム間の通信を簡略化できるオープンソース フレームワークです。 これらのプラグインでは、コードから呼び出すことができ、ネイティブの Android デバイス API を呼び出すために使用できる JavaScript エンドポイントを公開します。 Cordova プラグインのいくつかの例には、バッテリの状態、ファイル アクセス、振動とリング トーンなどのデバイス サービスへのアクセスが含まれます。これらの機能は、通常、Web アプリやブラウザーでは使用できません。

Cordova には、次の 2 つの一般的なディストリビューションがあります。

  • PhoneGap: サポートは Adobe によって中止されました。

  • Ionic

Ionic

Ionic は、各プラットフォーム (Android、iOS、Windows) のデザイン言語に合わせてアプリのユーザー インターフェイス (UI) を調整するフレームワークです。 Ionic を利用すると、Angular または React を使用できます。

注意

Ionic には新しいバージョンがあり、Capacitor という Cordova の代わりに使用されます。 この代替手段ではコンテナーが使用され、アプリが 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 のドキュメントを参照してください。アプリをハイブリッドから PWA に移行する方法については、Ionic ドキュメントの「Angular アプリを PWA にする」セクションを参照してください。

Ionic Capacitor および Angular を使用して新しいプロジェクトを作成する

コマンド ラインで次のように入力して、Ionic と Cordova-Res をインストールします。

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

"Tabs" アプリ テンプレートを使用し、次のようにコマンドを入力して Capacitor を追加し、Ionic Angular アプリを作成します。

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 のドキュメントを参照してください。アプリをハイブリッドから PWA に移行する方法については、Ionic ドキュメントの「Angular アプリを PWA にする」セクションを参照してください。

Ionic と React を使用して新しいプロジェクトを作成する

コマンド ラインに次のように入力して、Ionic CLI をインストールします。

npm install -g @ionic/cli

次のコマンドを入力して、React で新しいプロジェクトを作成します。

ionic start myApp blank --type=react

アプリ フォルダーに変更します。

cd myApp

Web ブラウザーでアプリを実行します。

ionic serve

詳細については、Ionic React のドキュメントを参照してください。アプリをハイブリッドから PWA に移行する方法については、Ionic ドキュメントの「React アプリを PWA にする」セクションを参照してください。

デバイスまたはエミュレーターで Ionic アプリをテストする

Android デバイスで Ionic アプリをテストするには、デバイスにプラグインします (最初に開発用に有効になっていることを確認してください)。その後、コマンド ラインで次のように入力します。

ionic cordova run android

Android デバイス エミュレーターで Ionic アプリをテストするには、次のようにする必要があります。

  1. 必要なコンポーネント (Java Development Kit (JDK)、Gradle、および Android SDK) をインストールします。

  2. Android Virtual Device (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 エミュレーターに関するページを参照してください。

その他のリソース