プログレッシブWebアプリケーション(PWA)を使用すると、Web開発者はネイティブアプリケーションのように動作できるWebアプリを作成できます。

PWAの大きなセールスポイントは、ネットワーク接続が不十分な場合でも、接続がまったくない場合でも機能することです。 これは、Webアプリのアセットをキャッシュし、可能であれば、バックグラウンドで更新をダウンロードすることで実現します。 PWAのもう1つの利点は、Webアプリがプッシュ通知などのネイティブ機能にアクセスできることです。 アクセスを容易にするために、ユーザーのホーム画面に追加することもできます。

この短いチュートリアルでは、Reactcreate-react-appを使用してPWAを作成する方法について説明します。

入門

まず、CreateReactAppを使用して新しいプロジェクトを開始します。

$ yarn create react-app my-app-name

ここでは、Yarnからcreateコマンドを使用していることに注意してください。

次に、src/index.jsを開きます。 サービスワーカーはデフォルトでオプトアウトではなくオプトインになっているため、サービスワーカーのunregisterregisterに変更するだけです。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// Changed from 'unregister' to 'register'
serviceWorker.register();

それでおしまい! Service Workerを有効にし、Reactアプリケーションがオフラインで動作するようになりました。 ただし、本番環境でのみ機能するため、試してみたい場合は、最初にビルドを作成する必要があります。

$ yarn build

# If you'd like to serve it locally:
$ yarn global add serve
$ serve -s build

アプリはオフラインで動作し、そのシェルには常にアクセスできることにも注意してください。ただし、これも魔法ではなく、アプリの機能の一部としてAjax経由で取得する必要のある新しいデータはオフラインでは取得されません。 そのため、ユーザーに通知するために、その周りにフェイルセーフとアプリ通知/トーストを作成する必要があります。

また、PWAがユーザーにどのように表示されるかをカスタマイズする場合は、public/manifest.jsonにあるWebアプリマニフェストを編集できます。 ここでは、アプリケーションの名前、アイコン、およびテーマを設定できます。

警告

CreateReactAppアプリケーションをPWAに変換するのは非常に簡単ですが、それは正当な理由でオプトインされています。 PWAを展開する前に、知っておく必要のある非常に重要なことがいくつかあります。

1つは、HTTPSを介してWebアプリケーションを提供する必要があるということです。 サービスワーカーは、ローカルホストでテストしている場合を除いて、HTTPS経由で提供されるWebアプリでのみ機能します。

次に、開いているすべてのタブを閉じるまで、キャッシュされたアセットを更新できません。 これは、異なるタブが異なるバージョンのServiceWorkerを実行している場合に問題が発生する可能性があるためです。 これは、ユーザーがすぐには理解できないかもしれないことであり、次のポイントにつながります。

最後に、ユーザーはプログレッシブWebアプリに慣れていない可能性があります。 したがって、アプリがオフラインで動作すること、または他のすべてのタブが閉じられるまでアプリを更新できないことをユーザーに通知するメッセージを作成することが重要です。 これを行うには、src/serviceWorker.jsにあるファイルを変更できます。 デフォルトでは、このファイルはconsole.logを使用してこの情報を出力するだけですが、これらのメッセージを実際にユーザーに表示するためのカスタム機能を追加する必要があります。

もっと詳しく知る

これは、食欲をそそる簡単な紹介でした。ここでは、プログレッシブWebアプリとCreateReactAppでの使用法に関するいくつかのリソースを紹介します。