メインコンテンツにスキップ
バージョン:v8

プログレッシブウェブアプリ

ウェブ...だがより良く

プログレッシブウェブアプリ(PWA)とは、最新のウェブ機能を活用して、ユーザーにアプリのような体験を提供するウェブアプリです。これらのアプリは特定の要件(下記参照)を満たしており、サーバーにデプロイされ、URL経由でアクセス可能であり、検索エンジンによってインデックス化されます。

これは、Capacitorと連携して、すべてのユーザーに複数のデプロイターゲットを提供することができます。アプリをPWAとしてデプロイすることも、ネイティブアプリとしてデプロイすることもでき、両方のチャネルを活用できます。

Ionicを使用すると、アプリをアプリストアに配布するだけでなく、PWAとしてモバイルウェブにデプロイすることもできます。

必要なもの

プログレッシブウェブアプリと見なされるためには、アプリは次のようである必要があります。

  • プログレッシブ - プログレッシブエンハンスメントをコアテナントとして構築されているため、ブラウザの選択に関係なく、すべてのユーザーに対して機能します。

  • レスポンシブ - デスクトップ、モバイル、タブレット、または次に登場するものであっても、あらゆるフォームファクタに対応します。

  • 接続に依存しない - オフラインまたは低品質ネットワークで動作するようにサービスワーカーで強化されています。

  • アプリのような - アプリスタイルのナビゲーションとインタラクションを提供するためにアプリシェルモデルを使用します。

  • 新鮮 - サービスワーカーの更新プロセスのおかげで、常に最新の状態です。

  • 安全 - スヌーピングを防ぎ、コンテンツが改ざんされていないことを保証するために、HTTPS経由で提供されます。

  • 発見可能 - W3Cマニフェストとサービスワーカーの登録スコープのおかげで、検索エンジンがそれらを見つけることができるため、「アプリケーション」として識別可能です。

  • 再エンゲージ可能 - プッシュ通知のような機能を通じて、再エンゲージメントを容易にします。

  • インストール可能 - アプリストアの手間をかけずに、最も役立つアプリをホーム画面に「保存」できるようにします。

  • リンク可能 - URL経由で簡単に共有でき、複雑なインストールは必要ありません。

Addy Osmani:プログレッシブウェブアプリ

ここには多くの情報がありますが、Ionicアプリに関するいくつかの点に要約されます。

オフラインサポート

アプリはオフラインで動作できる必要があります。適切な「オフライン」メッセージを表示したり、表示目的でアプリデータをキャッシュしたりする必要があります。

Webアプリマニフェスト

アプリマニフェストファイルは、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、およびスプラッシュスクリーンが含まれます。index.htmlでマニフェストファイルにリンクすると、ブラウザがそれを検出してリソースをロードします。

サービスワーカー

サービスワーカーはオフラインサポートで言及できますが、それ自体がセクションに値します。サービスワーカーは、アプリのリソースをキャッシュするためのプログラミング可能な方法を提供します。それがJavaScriptファイルであろうとHTTPリクエストからのJSONデータであろうと、プログラミング可能なAPIを使用すると、開発者はキャッシュの処理方法を決定でき、他のオプションよりもはるかに柔軟なエクスペリエンスを提供できます。