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

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

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

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

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

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

こちらのグリッチで、前述の例の動作を確認できます。

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

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

写真: Sten RitterfeldUnsplash