ReactJS のサービス ワーカー

1. React Service Worker とは
2. Service Worker の機能
3. React Service Worker をアクティブ化する方法
4. サービス ワーカーの構成
5. まとめ

電話がオフラインになっていてもアプリでメッセージを受信できる場合、これはサービス ワーカーの仕事です。

完璧な例は聖書のモバイルアプリです。 割り当てられた時間が経過すると、ユーザーはプッシュ通知と呼ばれるアプリから毎日の記憶の一節を受け取ります。 Instagram アプリも同じことを行います。オフラインですが、アプリからの通知は引き続き受け取ります。

幸いなことに、React はこの機能をフレームワークに組み込みました。この記事では、Service Worker について知る必要があるすべてのことを説明します。

React Service Worker とは

Service Worker は、Web ブラウザーと Web サーバー間のリンクとして機能することにより、既存の Web サイトを強化する特殊な JavaScript アセットです。

それらの機能は、Web サイトへのオフライン アクセスを提供し、Web ページの全体的なパフォーマンスを向上させることにより、Web サイトの信頼性を向上させます。 これは、Web ページの一部の動作が背景の影響を受け、Web ページが重要な要素で動作するためです。

オフラインでもユーザーが Web サイトをスクロールできるのは、サービス ワーカーの手作業です。

Service Worker は、localhost で実行されない限り、HTTPS でのみ実行できます。また、Service Worker は特定の Web ページに関連付けられています。 ユーザーがページを切り替えるたびに、常に再利用できます。 Service Worker はシャットダウンすると情報の保持を停止するため、Service Worker の状態に注意する必要があります。

Service Worker の機能

1. Service Worker は Web サイトの重要な側面をキャッシュできます。 これにより、足が軽くなり (読み込みが速くなり)、Web サイトのパフォーマンスが向上します。
2. 従来の Web テクノロジーでは通常利用できない機能である通知 API とプッシュ API を有効にします。
3. Service Worker の可用性により、ユーザーがインターネット機能を失った場合でも、アプリケーションを通常どおり使用できます。 これは、Service Worker が Web サイトの重要な部分をキャッシュするのに役立ったためです。
4. アプリがオフラインのときに実行されたアクションは、インターネットが完全に復元されたときにバックグラウンドで同期できます。

React Service Worker をアクティブ化する方法

create-react-app を使用して新しい React プロジェクトを作成すると、デフォルトで Service Worker が生成されます。 プロジェクトの src フォルダーに serviceWorker.js ファイルがあります。

しかし、Service Worker はそのままでは機能しません。 構成する必要があります。

Service Worker を登録する必要があります。 src/index.js ファイルに移動し、この行 serviceWorker.unregister(); を探します。 serviceWorker.register(); に変更します。

サービス ワーカーを登録すると、サービス ワーカーも機能するようになり、React アプリの製品版が作成されると、サービス ワーカーはそれと一緒に有効になります。

サービス ワーカーの構成

React アプリを作成すると、service-worker.js はデフォルトで、Web ページに直接関連付けられたコンテンツをキャッシュします。 例として、Web ページに埋め込まれたビデオがあります。 新しいファイル custom-service-worker.js を作成し、register() を編集して、作成した新しいファイルをロードする必要があります。

serviceWorker.js ファイルで、34 行目あたりの load() イベント リスナーを探し、以下のようにカスタム ファイルを追加します。

window.addEventListener('load', () => {
  const swUrl = `${process.env.PUBLIC_URL}/custom-service-
worker.js`;
  ...
}

それが完了したら、次に package.json ファイルを更新します。

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

ここで、Google の Workbox プラグインをインストールする必要があります。 npm install --save-dev workbox-build を使用します。 ワークボックス プラグインは、バックグラウンド同期などの機能を Service Worker に簡単に統合するのに役立ちます。

次に、以下のように、Create React App (CRA) に新しく作成されたカスタム サービス ワーカーを挿入するように指示する構成ファイルを作成します。

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = function override(config, env) {
  config.plugins = config.plugins.map((plugin) => {
    if (plugin.constructor.name === 'GenerateSW') {
      return new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/custom-service-worker.js',
        swDest: 'service-worker.js'
      });
    }
    return plugin;
  });
  return config;
};

最後に、以下に示すように、特定のディレクトリをキャッシュするカスタム ワーカーを作成します。

workbox.routing.registerRoute(
    new RegExp('/path/to/cache/directory/'), workbox.strategies.NetworkFirst());
workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

この部分が完了したら、アプリケーションをビルドできます。

まとめ

Service Worker が提供する機能は、Web アプリケーションをスムーズに実行するのに理想的であり、時間の経過とともに、Web アプリケーションのパフォーマンスを現在よりもさらに向上させるいくつかの新しいエキサイティングな機能を作成するために使用されます。