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

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

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

デフォルトのオフライン ページを取得するために、デベロッパーが何もする必要はなくなりました。Android 版 Chrome 109 以降では、オフラインになったときにユーザーに通知するページがブラウザによって自動的に生成されます。

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

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

独自のカスタム オフライン ページを作成するオプションは引き続きご利用いただけます。次の動画では、Workbox を使用してカスタムページを 1 行のコードで配信する方法について説明します。

この機能は、Android(Chrome 109)とパソコン環境(Chrome 110)でご利用いただけます。フィードバックをお寄せください