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

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

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

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

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

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

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

この機能は、Android(Chrome 109)とパソコン環境(Chrome 110)でご利用いただけます。ご意見がありましたら、ぜひこちらのフォームよりお寄せください。

写真: Sten RitterfeldUnsplash