SharedWorkers に関する注意事項

最近、プロジェクトにシェアードワーカーを実装する必要がありました。これらは非常に便利ですが、通常の場所ではあまり情報が見つからなかったので、神秘的な未来からの探索者を助けるかもしれないいくつかのヒントをここに示します。

背景

SharedWorkers は、複数のタブ、ウィンドウ、または他の (通常の) Web ワーカー間で共有できる WebWorker の特別なクラスです。

私のアプリケーションでは、新しいアプリケーション イベント (購入を完了した顧客など) をポーリングし、ログインしている管理者 (より具体的には、ログインしている管理者) に通知を (通知 API を使用して) 表示するプロセスが必要でした。通知を受け取ることを選択した管理者内)。

管理者はアプリケーションを複数のタブまたはウィンドウで開くことができるため、各タブで新しいイベントをポーリングするのは無駄です。開いているタブやウィンドウの数に関係なく、イベントごとに 1 つの通知だけが必要でした。

SharedWorker が役に立ちます!開いているタブまたはウィンドウはそれぞれ 1 つのワーカーを共有し、バックグラウンドでポーリングし、新しいイベントごとに 1 つの通知だけを表示します。

Vite を使用した共有ワーカーの作成

最初の課題は、Vite ベースのセットアップに共有ワーカーをロードすることでした。

Vite を開発モードで実行している場合、Vite は別のドメインとポート (例: http://[::1]:5173/) からスクリプトを提供しますが、共有ワーカーはこれに従う必要があるため、これは機能しません。同一生成元ポリシー。

Web ワーカー向けにさまざまな Vite 回避策を試しました:

• 公式の Vite Web ワーカー方法は、同一生成元ポリシー要件のため、共有 ワーカーでは機能しません。
• Blob URL は共有ワーカーではサポートされていません。
• ワーカーを Base64 文字列としてインライン化することは、ブラウザーがワーカーを別のワーカーとして扱うため機能しません。Web ワーカーには問題ありませんが、共有ワーカーには問題ありません。

最終的に、開発環境のリソース ディレクトリ、またはステージング環境とライブ環境のビルド ディレクトリからスクリプトを提供するための新しいルートを作成しました。

Route::addRoute('GET', '/notifications-shared-worker.js', function () {
    // If in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    } else {
        // Otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    }
});

次に、そのルートを URL として共有ワーカーを作成します。

const worker = new SharedWorker('/notifications-shared-worker.js');

共有ワーカーのデバッグ

共有ワーカーの構文エラーや実行時エラーが開発ツールに表示されないことがすぐにわかります。また、コンソールのログ/警告/情報呼び出しも行われません。

これは簡単です。chrome://inspect/#workers を URL バーに貼り付け、共有ワーカーを見つけて「検査」をクリックします。これで、共有ワーカー専用の devtools ウィンドウができました。

メインのタブまたはウィンドウに戻る通信

「親」タブに通信するには、MDN SharedWorker ドキュメントの説明に従って port.postMessage メソッドを使用します。

ただし、サンプル コードでは、親が接続するたびに通信ポート参照が上書きされるため、最新の「親」タブ/ウィンドウとの通信のみが許可されます。

代わりに、ポートの配列を保存し、新しい「親」が接続するときに新しいポートを配列に追加します。

Route::addRoute('GET', '/notifications-shared-worker.js', function () {
    // If in dev environment, send the file from the resources folder
    if (app()->environment('local')) {
        return response()->file(resource_path('js/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    } else {
        // Otherwise, send the file from the public folder
        return response()->file(public_path('build/assets/notificationWatcherWorker.js'), ['Content-Type' => 'text/javascript']);
    }
});

次に、次のようなメッセージをすべての親ページに送信します。

const worker = new SharedWorker('/notifications-shared-worker.js');

以上がSharedWorkers に関する注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。