SharedWorkers에 대한 몇 가지 참고 사항

최근 프로젝트에서 공유 작업자를 구현해야 했습니다. 매우 유용하기는 하지만 일반적인 장소에서는 찾을 수 있는 정보가 많지 않았습니다. 따라서 여기 신비한 미래에서 온 검색자들에게 도움이 될 수 있는 몇 가지 지침이 있습니다.

배경

SharedWorker는 여러 탭, 창 또는 기타 (일반) 웹 워커에서 공유할 수 있는 특별한 WebWorker 클래스입니다.

내 애플리케이션에는 새로운 애플리케이션 이벤트(예: 고객이 구매를 완료하는 경우)를 폴링하고 로그인한 관리자(또는 더 구체적으로 로그인한 관리자에게 알림 API 사용)를 표시하는 프로세스가 필요했습니다. 알림 수신을 선택한 관리자).

관리자는 여러 탭이나 창에서 애플리케이션을 열 수 있으므로 각 탭에서 새 이벤트를 폴링하도록 하는 것은 낭비입니다. 열린 탭이나 창 수에 관계없이 이벤트당 하나의 알림만 원했습니다.

SharedWorker가 구출해 드립니다! 열려 있는 각 탭이나 창은 백그라운드에서 폴링하고 새 이벤트당 하나의 알림만 표시하는 단일 작업자를 공유합니다.

Vite로 공유 작업자 만들기

첫 번째 과제는 Vite 기반 설정에서 공유 작업자를 로드하는 것이었습니다.

개발 모드에서 Vite를 실행하는 경우 Vite는 다른 도메인 및 포트(예: http://[::1]:5173/)에서 스크립트를 제공하지만 공유 작업자는 이를 준수해야 하기 때문에 작동하지 않습니다. 동일 출처 정책.

웹 작업자를 위해 다양한 Vite 해결 방법을 시도했습니다.

• 동일 출처 정책 요구 사항으로 인해 공식 Vite 웹 작업자 방법은 공유 작업자에게는 작동하지 않습니다.
• 공유 작업자에는 Blob URL이 지원되지 않습니다.
• 작업자를 base64 문자열로 인라인하는 것은 브라우저가 이를 다른 작업자로 취급하기 때문에 작동하지 않습니다. 웹 작업자에게는 적합하지만 공유 작업자에게는 적합하지 않습니다.

결국 dev의 리소스 디렉터리나 스테이징 및 라이브 환경의 빌드 디렉터리에서 스크립트를 제공하기 위한 새로운 경로를 만들었습니다.

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');

공유 작업자 디버깅

공유 작업자의 구문이나 런타임 오류가 개발자 도구에 표시되지 않는다는 것을 금방 알 수 있습니다. 콘솔 로그/경고/정보 호출도 수행하지 않습니다.

이 방법은 쉽습니다. URL 표시줄에 chrome://inspect/#workers를 붙여넣고 공유 작업자를 찾아 '검사'를 클릭하세요. 이제 공유 작업자만을 위한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!