プログレッシブ ウェブアプリはウェブサイトです。すべてのアセットはウェブと同じですが、新しいツールが追加され、オンライン時にアセットの読み込みが速くなり、オフライン時でもアセットを利用できるようになりました。
アプリ コンポーネント
アプリの開発には通常、ロジックやコード（コンパイル済みかどうかにかかわらず）から、画面デザイン、画像、ロゴ、フォントなどのユーザー インターフェース要素まで、複数のアセットとリソースが含まれます。
プログレッシブ ウェブアプリはウェブサイトなので、アセットはすべてウェブと同じです。
- コンテンツと最初のページ レンダリング用の HTML。
- ロジック用の JavaScript。WebAssembly モジュール（コンパイル済みコード）の実行、ハードウェア最適化 2D および 3D グラフィックのレンダリングなどの機能が含まれます。
- レイアウト、スタイル設定、アニメーション用の CSS。
- PNG、JPEG、WebP、SVG などのウェブ形式の画像。
- MPEG-4 や WebM などのウェブ形式の動画。
- ウェブフォント。
- JSON またはその他の形式のデータ。
デフォルトでは、ウェブサイトはネットワーク経由でアセットをダウンロードします。ダウンロードされるアセットは、HTML から始まり、残りのリソースへと続きます。
読み込みが速く、オフラインで利用できるようにこれらのリソースを管理することは、ウェブにとって課題でした。 現在の PWA では、これまでプラットフォーム固有のアプリのみに関連付けられていた機能が使用されます。
プラットフォーム固有のアプリと PWA
プラットフォーム固有のアプリをインストールする場合、通常は、コード、画像、フォント、動画など、アプリのアセットをすべて含むパッケージがダウンロードされます。そのため、アプリがオフラインの場合でも、デバイスのストレージからこれらのリソースを利用できます。
一方、従来のウェブサイトでは、必要に応じてアセットをダウンロードするためにネットワーク接続が必要になります。オフラインの場合は、クライアントサイドにアセットがないため、ブラウザにエラーが表示されます。
PWA のアプローチでは、プラットフォーム固有のアプリと同様に、一部またはすべてのアセットをクライアントサイドで利用可能にすることで、従来のウェブ エクスペリエンスを強化できます。そのため、PWA を開くとプラットフォーム アプリと同じように初期レンダリングが瞬時に行われます。これは、アセットがネットワークを経由せずに使用できるためです。
キャッシュとストレージ
ウェブが誕生した当初から、デベロッパーはリソースのキャッシュ方法を完全に制御することはできませんでした。ブラウザは HTTP キャッシュを管理し、さまざまなポリシーに基づいてリソースをキャッシュに保存して提供する場合もあれば、しない場合もあります。Web Storage や IndexedDB などの他のストレージ オプションは、単純なデータやオブジェクトを保存するためのものです。
PWA は、コンテンツに関してこれらのポリシーだけに頼る必要はありません。代わりに、リソースをいつ、どのようにキャッシュし、いつ、どのようにローカルに配信するかをより適切に制御するためのソリューション、Cache Storage API を提供しています。 ウェブでは、クライアントサイド ストレージ ソリューションをいくつか利用できます。
- ウェブ ストレージ:
localStorageとsessionStorageが含まれます。これらの API は、単純な Key-Value の文字列ペアを格納します。ウェブ ストレージは制限されており、また同期 API を使用しているため、可能な限り避ける必要があります。 - IndexedDB: ウェブ パフォーマンスに優れた非同期 API を備えたオブジェクト ベースのデータベース（No-SQL）。IndexedDB は、構造化データとバイナリデータをクライアントサイドで保存できます。これは通常、API リクエストから取得するデータや、API リクエストとして送信するデータなどのデータの保存に使用します。また、データをすぐにローカルに保存し、後でサーバーと同期させると便利です。データベースの操作には IndexedDB API を使用します。
- キャッシュ ストレージ: HTTP リクエストとレスポンスのペアのコレクション。リソースを HTTP ヘッダーとともに、サーバーから配信されたときとまったく同じ状態で格納および取得するために使用できます。Cache Storage API を使用すると、オフラインの場合でも、アセットなどのネットワーク リクエストを保存、取得、更新、削除できます。
Service Worker の必要性
PWA では、キャッシュ ストレージと IndexedDB にアセットを保存できますが、これらのアセットを使用して高速かつオフラインのエクスペリエンスをユーザーに提供するにはどうすればよいでしょうか。その答えは、Service Worker。
Service Worker を使用すると、ネットワークに移動せずにアセットを提供したり、ユーザーに通知を送信したり、PWA アイコンにバッジを追加したり、バックグラウンドでコンテンツを更新したり、PWA 全体をオフラインで動作させたりできます。Service Worker については、次の章で詳しく説明します。
オフライン対応
ユーザーは、アプリが高速でいつでも使用できることを期待しています。つまり、アプリはオフラインでも機能する必要があります。
オフラインに対応しているからといって、必ずしもすべてのコンテンツやサービスをネットワーク接続なしで利用できるわけではありません。 ただし、少なくともユーザーがオフラインになっているときの基本的なエクスペリエンス（続行するためにインターネットに接続するよう求めるページなど）を用意しておくと、ユーザー エクスペリエンスが向上するため、一般的なブラウザ エラーに煩わされることなく、アプリのエクスペリエンスに留めることができます。 一部のブラウザでは、PWA のインストール基準を満たすために必須の機能です。PWA のユーザー インターフェースをキャッシュに保存されたコンテンツとともに表示することをおすすめします。オフライン作業のゴールド スタンダードとなるのは、ユーザーがオンラインに戻ったときに PWA 全体の使用を継続し、サーバーの変更を同期することです。
アプリをオフラインで使用できるようにするには、オフライン エクスペリエンスに必要なアセットをキャッシュに保存し、Service Worker が後で提供できるようにする必要があります。オフライン アセットは、必要になる前にキャッシュに追加しておいてください。これは、リクエストされたときにキャッシュできない特定のケースです。
よく使用されるキャッシュ アプローチ
PWA では、すべての決定を行います。必要に応じて、アセットをキャッシュに保存する、またはアセットをインストールする最適な方法を選択できます。決定すべき事項を以下に示します。
- プレキャッシュ: 最初の読み込み時にインストールするアセットを選択します。それらのアセットには、アプリをレンダリングするための HTML と最小限のアセットを含める必要があります。プレキャッシュを使用する場合は、デバイスのスペースとネットワークを使用することに注意してください。アセットをダウンロードしてキャッシュする際は、意識して責任を持って行ってください。
- 必要に応じてキャッシュに保存: リクエストされたアセットをキャッシュに追加するために使用します。通常は、アプリのバージョンとは無関係に変更可能なアセット（画像やコンテンツなど）です。必要に応じてキャッシュに保存する方法に関するさまざまな方法については、キャッシュ保存セクションをご覧ください。
- API とウェブサービス: API 呼び出しをキャッシュに保存できます。また、API レスポンスをキャッシュに保存する代わりに、そのデータを IndexedDB に保存することもできます。
アセットを更新しています
アプリカタログ インストール アプリの標準アプリモデルでは、デベロッパーがアプリを更新する必要がある場合、新しいパッケージを公開します。ほとんどのアセットが変更されていなくても、ユーザーはパッケージ全体を再度ダウンロードする必要があります。PWA では、上記のセクションで説明した方法で、アセットを更新する方法とタイミングを決定します。アセットを更新する方法は次のとおりです。
- フル アップデート: 小さな変更であっても、アプリで変更を加えるたびに、キャッシュにあるすべてのアセットが再度ダウンロードされます。
- 部分更新: この方法では、更新されたアセットを定義するメソッドを作成し、ユーザーの介入の有無にかかわらず、それらのアセットのみを更新します。
- 継続的アップデート: この方法では、PWA を使用するたびにアセットが自動的にチェックされ、更新されます。
サイズと寿命
通常、プラットフォーム固有のアプリの場合、サイズ制限は適用されません。つまり、インストール時のアプリのサイズがギガバイト以上になる場合があります。デバイスに十分な容量があれば、設置が可能です。また、アプリをインストールしている間は、アプリを使用するかどうかにかかわらず、その合計容量が使用されます。 PWA ではストレージの処理方法が異なります。ブラウザは、PWA のロジックで定義されたポリシーに基づいてアセットを保存します。
サイズの上限はブラウザによって異なります。 プラットフォーム固有のアプリほど柔軟ではありませんが、通常はほとんどのウェブアプリで十分です。ブラウザ別の具体的な制限については、こちらの記事をご覧ください。
ブラウザは、ストレージの負荷に応じて、またはユーザーがブラウザで PWA を使用している場合、非アクティブな状態が数週間続くと、アセットを削除することがあります。プラットフォームによっては、ユーザーが PWA をインストールしてもエビクションは発生しません。可能な場合は、コードは API を介して永続ストレージをリクエストし、このエビクションを回避できます。