Progressive Web App の構築

Capacitor は Progressive Web Apps をサポートしており、iOS や Android 上でネイティブに動作するアプリだけでなく、モバイル Web アプリや "Progressive Web App" として Web 上でも動作するアプリを簡単に構築することができます。

Progressive Web App とは？

簡単に言うと、Progressive Web App（PWA）とは、最新の Web 機能を使ってユーザーにアプリのような体験を提供する Web アプリのことです。これらのアプリは、従来のウェブサーバに配置され、URL でアクセスでき、検索エンジンにインデックスされることができます。

Progressive Web App とは、実際には、モバイルパフォーマンスに最適化された Web サイトの別名であり、新しく利用可能になった Web API を利用して、プッシュ通知やオフラインストレージなど、従来のネイティブアプリと同様の機能を提供するものです。

Capacitor と Progressive Web App

Capacitor は、Progressive Web Apps とネイティブアプリを最優先でサポートしている。つまり、Capacitor のブリッジは、ネイティブ・コンテキストでもウェブ・コンテキストでも動作することをサポートしており、多くのプラグインは、全く同じ API と呼び出し規則で、 両方のコンテキストで 利用可能です。

つまり、ネイティブアプリと Progressive Web App の両方に、@capacitor/coreと Capacitor のプラグインを依存関係として使用すると、Capacitor は必要に応じて Web コードを、利用可能な場合はネイティブコードをシームレスに呼び出します。

さらに、Capacitor には現在のプラットフォームを照会するための多くのユーティリティが用意されており、ネイティブまたは Web 上で実行する際にカスタマイズされた体験を提供します。

Progressive Web App サポートをアプリに追加する

プログレッシブ Web アプリは、App Manifest と Service Worker を持つ必要があります。

App Manifest

まず、App Manifest ファイル ( manifest.json )が必要です。このファイルは、 index.html ファイルと一緒に置かれ、アプリの名前、テーマカラー、アイコンなど、アプリに関するメタデータを提供します。この情報は、アプリがホーム画面にインストールされる際などに使用されます。

Service Worker

次に、プッシュ通知を送信したり、データをオフラインで保存したりするために、 Service Worker を使用して、Web アプリがネットワークリクエストをプロキシしたり、データの処理や同期に必要なバックグラウンドタスクを実行したりできるようにします。

Service Worker は強力ですが、複雑です。一般的に、ゼロから書くことはお勧めできません。代わりに、 Workbox のようなツールを利用すると、アプリに簡単に組み込むことができる一般的なサービスワーカーのレシピが提供されています。

MDN の Using Service Workers ページでは、Service Worker の登録方法など、Service Worker の使用について詳しく説明しています。

Progressive Web App のパフォーマンス

Progressive Web App は、　Time to Interactive　や　First Meaningful Paint　など、いくつかのパフォーマンス基準によって判断されます。

本番稼働前には　Progressive Web App Checklist　に従ってください。また、　Lighthouse　を使用してアプリの監査とテストを行ってください。

既存のフロントエンドスタックで Progressive Web App のパフォーマンス基準を満たすのに苦労している場合は、設定をほとんどせずに高速な PWA をサポートするオプションとして、　Ionic Framework　を見てみましょう。