プログレッシブWebアプリケーション（PWA）を使用すると、Web開発者はネイティブアプリケーションのように動作できるWebアプリを作成できます。
PWAの大きなセールスポイントは、ネットワーク接続が不十分な場合でも、接続がまったくない場合でも機能することです。 これは、Webアプリのアセットをキャッシュし、可能であれば、バックグラウンドで更新をダウンロードすることで実現します。 PWAのもう1つの利点は、Webアプリがプッシュ通知などのネイティブ機能にアクセスできることです。 アクセスを容易にするために、ユーザーのホーム画面に追加することもできます。
この短いチュートリアルでは、Reactとcreate-react-appを使用してPWAを作成する方法について説明します。
入門
まず、CreateReactAppを使用して新しいプロジェクトを開始します。
$ yarn create react-app my-app-name
ここでは、Yarnからcreateコマンドを使用していることに注意してください。
次に、私たちは開くつもりです src/index.js. 私たちがしなければならないのは変化です unregister に register サービスワーカーの場合、サービスワーカーはデフォルトでオプトアウトではなくオプトインになっているため、次のようになります。
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がユーザーにどのように表示されるかをカスタマイズする場合は、次の場所にあるWebアプリマニフェストを編集できます。 public/manifest.json. ここでは、アプリケーションの名前、アイコン、およびテーマを設定できます。
警告
CreateReactAppアプリケーションをPWAに変換するのは非常に簡単ですが、それは正当な理由でオプトインされています。 PWAを展開する前に、知っておく必要のある非常に重要なことがいくつかあります。
1つは、HTTPSを介してWebアプリケーションを提供する必要があるということです。 サービスワーカーは、ローカルホストでテストしている場合を除いて、HTTPS経由で提供されるWebアプリでのみ機能します。
次に、開いているすべてのタブを閉じるまで、キャッシュされたアセットを更新できません。 これは、異なるタブが異なるバージョンのServiceWorkerを実行している場合に問題が発生する可能性があるためです。 これは、ユーザーがすぐには理解できない可能性があることであり、次のポイントにつながります。
最後に、ユーザーはプログレッシブWebアプリに慣れていない可能性があります。 したがって、アプリがオフラインで動作すること、または他のすべてのタブが閉じられるまでアプリを更新できないことをユーザーに通知するメッセージを作成することが重要です。 これを行うには、次の場所にあるファイルを変更できます。 src/serviceWorker.js. デフォルトでは、このファイルは単にこの情報を使用して印刷します console.log、ただし、これらのメッセージを実際にユーザーに表示するためのカスタム機能を追加する必要があります。
もっと詳しく知る
これは、食欲をそそる簡単な紹介でした。ここでは、プログレッシブWebアプリとCreateReactAppでの使用法に関するいくつかのリソースを紹介します。
