プログレッシブ ウェブアプリのオフライン サポートの検出機能を改善

Penny McLachlan
Penny McLachlan

プログレッシブ ウェブアプリ(PWA)は、モバイル デバイスとパソコン デバイス向けにウェブ テクノロジーを使用して、インストール可能な最新のアプリケーションを構築するためのパターンです。

最新のウェブ エクスペリエンス(PWA も同様)を構築するための条件の 1 つは、デバイスがオフラインの場合でもアプリが動作し続けることです。つまり、デバイスでネットワーク アクセスが失われた場合、Chrome の恐竜画面は表示されません。

PWA のすべての基準は、ユーザーがウェブを閲覧する際に、アプリに匹敵する高品質なエクスペリエンスを確実に得られるようにすることを目的としています。Chrome は、PWA のインストール機能を有効にする前に、PWA の要件に対するチェックを行います。

オフライン モードのサポートなど、プログレッシブ ウェブアプリのインストール可能性に関するすべてのコア条件を満たすアプリのみが、Chrome からデバイスにインストールできます。

以前のオフライン検出ロジック

オフライン サポートの検証は、数年前から PWA のインストール可能性の基準の一部となっています。最近まで、Chrome には Service Worker を介してリクエストをシミュレートする機能がなかったため、オフライン時の正しい動作を完全にチェックすることはできませんでした。

Service Worker の図

つまり、オフライン チェック中に fetch イベント ハンドラが HTTP 200 で有効なリソースを返したかどうかを Chrome で検証できませんでした。Chrome は、Service Worker に実際に fetch ハンドラがあるかどうかのみを確認していました。

オフライン検出ロジックを更新

Chrome 89 では、サービス ワーカーを通じてオフライン リクエストのシミュレーションを実行できるようになりました。これにより、オフライン検出ロジックが改善され、アプリケーションの実際のオフライン サポートをより正確に反映できるようになりました。

この新機能は、オフライン時に PWA が有効なページを提供できるようにするために使用する予定でしたが、計画は保留されています。ページに fetch イベント ハンドラを含むサービス ワーカーがある場合、インストール可能性チェックは引き続き合格します。

デベロッパーへの影響

現時点では変更は必要ありませんが、今後、更新されたロジックを使用して有効なページを確認する予定であるため、オフライン エクスペリエンスを提供することを強くおすすめします。

どのようなオフライン エクスペリエンスを提供するかは、デベロッパーが決定します。スペクトラムの一端には、完全に機能するオフライン エクスペリエンスがあります。つまり、必要なリソースとデータをすべて事前にキャッシュに保存し、ユーザーが再びオンラインになったときにサーバーとデータを同期します。リソースをキャッシュに保存すると、毎回ネットワークからリソースをダウンロードする必要がなくなるため、コア ウェブ バイタル指標の改善にもつながります。もう一方の極端な例は、カスタム オフライン フォールバック ページです。

デベロッパー ツールの [問題] タブに表示される警告は、Chrome 90 頃に削除されます。