Chrome Android でのウェブアプリの基本的なオフライン ページ

インストール済みのプラットフォーム アプリはオフラインでも起動できます。このような場合は、インターネット アクセスが利用できないことをユーザーに知らせるページが表示されることがよくあります。デベロッパーによっては、オフラインで使用できる機能をすべて作成していることもあります。

ウェブアプリでは、オフラインで作業できる機能が最近増えています。これは、Service Worker API のリリースで可能になりました。また、ウェブサイトがインストール可能になった時点で、PWA では、ウェブ アプリをインストール可能にするために、Service Worker を登録し、その fetch() メソッドを実装する要件が追加されました。 その目的は、少なくとも、現時点ではアプリが使用できないことをユーザーに通知するようデベロッパーに奨励することでした。

これで、デフォルトのオフライン ページを表示するために何かを行う必要がなくなりました。Android 版 Chrome 109 以降では、オフラインであることをユーザーに知らせるページがブラウザで自動生成されます。

アプリにカスタムのオフライン エクスペリエンスが実装されていない場合、ユーザーがオフラインのときは、デフォルトのオフライン ページではアプリのアイコンと「オフラインです」というシンプルなメッセージが使用されます。以下の例のようになります。

サンプルのウェブアプリのデフォルトのオフライン ページ。ピンクの円と 2 つのプラス記号でロゴに「現在オフラインです」というメッセージが表示されています。

こちらのグリッチで、前の例の実例をご確認ください。

カスタムのオフライン ページを作成するオプションは引き続き使用できます。次の動画では、Workbox を使用して、コードを 1 行追加してカスタムページを提供する方法を示しています。

この機能は Android(Chrome 109)とデスクトップ環境(Chrome 110)で利用できます。フィードバックがございましたら、こちらのフォームからお寄せください

写真撮影: Sten RitterfeldUnsplash より)