Android 用の PWA またはハイブリッド Web アプリの開発を開始する
[アーティクル] 2023/07/13
6 人の共同作成者
フィードバック
この記事の内容
PWA またはハイブリッド Web アプリの機能
Apache Cordova
Ionic
Ionic Cordova と Angular で新しいプロジェクトを作成する
Ionic Capacitor および Angular を使用して新しいプロジェクトを作成する
Ionic と React を使用して新しいプロジェクトを作成する
デバイスまたはエミュレーターで Ionic アプリをテストする
さらに 3 個を表示
このガイドは、Web およびデバイス プラットフォーム (Android、iOS、Windows) で使用できる単一の HTML/CSS/JavaScript コードベースを使って、Windows でハイブリッド Web アプリまたはプログレッシブ Web アプリ (PWA) の作成を開始するのに役立ちます。
適切なフレームワークとコンポーネントを使用することにより、Web ベースのアプリケーションは、ネイティブ アプリと非常によく似た方法で、Android デバイスで動作することができます。
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 は、プラグイン を使用して、ネイティブの WebView にある JavaScript コードとネイティブの Android プラットフォーム間の通信を簡略化できるオープンソース フレームワークです。 これらのプラグインでは、コードから呼び出すことができ、ネイティブの Android デバイス API を呼び出すために使用できる JavaScript エンドポイントを公開します。 Cordova プラグインのいくつかの例には、バッテリの状態、ファイル アクセス、振動とリング トーンなどのデバイス サービスへのアクセスが含まれます。これらの機能は、通常、Web アプリやブラウザーでは使用できません。
Cordova には、次の 2 つの一般的なディストリビューションがあります。
Ionic は、各プラットフォーム (Android、iOS、Windows) のデザイン言語に合わせてアプリのユーザー インターフェイス (UI) を調整するフレームワークです。 Ionic を利用すると、Angular または React を使用できます。
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 アプリをテストするには、次のようにする必要があります。
必要なコンポーネント (Java Development Kit (JDK)、Gradle、および Android SDK) をインストールします 。
Android Virtual Device (AVD) を作成します。[Android 開発者ガイド]](https://developer.android.com/studio/run/managing-avds.html ) を参照してください。
Ionic でアプリを構築し、エミュレーターにデプロイするために、ionic cordova emulate [<platform>] [options]
というコマンドを入力します。 この場合、コマンドは次のようになるはずです。
ionic cordova emulate android --list
詳細については、Ionic ドキュメントの Cordova エミュレーター に関するページを参照してください。