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

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

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

これにより、デベロッパーは何もしなくてもデフォルトのオフライン ページを作成できます。Android 版 Chrome 109 以降では、ユーザーがオフラインであることを示すページが自動的に生成されます。

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

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

こちらのグリッチで、上記の例の実際の動作を確認してください。

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

この機能は、Android(Chrome 109)とデスクトップ環境(Chrome 110)で利用できます。ご意見やご要望などございましたら、こちらのフォームからお送りください。

写真撮影: Sten RitterfeldUnsplash