reactjsのサービスワーカーとは

反応アプリを作成すると、デフォルトでServiceWorkerが呼び出されます。なぜサービスワーカーが使われるのですか？デフォルトの呼び出しの理由は何ですか？

アプリケーションにサービスワーカーは必要ない場合があります。create-react-appを使用してプロジェクトを作成している場合、デフォルトで呼び出されます

この記事では、サービスワーカーについて詳しく説明しています。それから要約するには

Aservice workerは、ブラウザがWebページとは別にバックグラウンドで実行するスクリプトであり、Webページやユーザーの操作を必要としない機能への扉を開きます。今日、彼らはすでになどの機能が含まれるpush notificationsとbackground syncして持っている ability to intercept and handle network requestsなど、 programmatically managing a cache of responses。

将来的には、サービスの労働者のような他のものサポートする場合があります periodic syncかをgeofencing。

このPRによるとcreate-react-app

Service workersを介してcreate-react-appで導入されます SWPrecacheWebpackPlugin。

キャッシュファースト戦略でサーバーワーカーを使用すると、ネットワークがナビゲーション要求を満たすためのボトルネックではなくなるため、パフォーマンス上の利点が得られます。ただし、以前にキャッシュされたリソースはバックグラウンドで更新されるため、開発者（およびユーザー）は、ページへの「N +1」アクセス時にのみデプロイされた更新を表示することを意味します。

register service worker新しいアプリでは、への呼び出しはデフォルトで有効になっていますが、いつでも削除して、通常の動作に戻すことができます。

簡単に言えば、これはブラウザがバックグラウンドで実行され、WebページやDOMとはまったく関係がなく、すぐに使用できる機能を提供するスクリプトです。また、ユーザーがオフラインまたは低速のネットワーク上にいるときに、アセットやその他のファイルをキャッシュするのにも役立ちます。

これらの機能のいくつかは、ネットワークリクエストのプロキシ、プッシュ通知、バックグラウンド同期です。サービスワーカーは、ユーザーが豊富なオフラインエクスペリエンスを利用できるようにします。

Service Workerは、クライアントとサーバーの間に位置し、サーバーに対して行われるすべての要求がServiceWorkerを通過する人と考えることができます。基本的には仲買人。すべてのリクエストはServiceWorkerを通過するため、これらのリクエストをその場でインターセプトできます。

考慮すべきサービスワーカーに関する2つの重要な考慮事項を追加したいと思います。

1. ServiceWorkerにはHTTPSが必要です。ただし、ローカルテストを有効にするために、この制限はには適用されませんlocalhost。これはセキュリティ上の理由からです。ServiceWorkerはWebアプリケーションとサーバーの中間者のように振る舞います。

2. で作成するには、アプリリアクト実行しているときにサービス労働者にのみ、たとえば、本番環境で有効になっていますnpm run build。

Service Workerは、プログレッシブWebアプリの開発を支援するためにここにいます。Create React Appのコンテキストでのそれに関する優れたリソースは、こちらのWebサイトにあります。