프로그레시브 웹 앱: 워커 사용

1. 환영합니다

이 실습에서는 기존 웹 애플리케이션을 가져와 열려 있는 두 창 간에 상태를 공유하는 웹 워커를 추가합니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈 중 여덟 번째입니다. 이전 Codelab은 서비스 워커 포함이었습니다. 이 Codelab은 시리즈의 마지막 Codelab입니다.

학습할 내용

  • 열려 있는 여러 창 사이에 공유 작업자 추가
  • Comlink를 사용하여 작업자와 더 쉽게 작업하기

유의해야 할 사항

  • 자바스크립트

필요한 항목

2. 설정하기

이 Codelab을 완료하는 데 필요한 시작 코드를 클론하거나 다운로드하여 시작하세요.

저장소를 클론하는 경우 pwa06--working-with-workers 브랜치에 있는지 확인합니다. ZIP 파일에는 해당 브랜치의 코드도 포함되어 있습니다.

이 코드베이스에는 Node.js 14 이상이 필요합니다. 코드를 사용할 수 있게 되면 코드 폴더의 명령줄에서 npm ci를 실행하여 필요한 모든 종속 항목을 설치합니다. 그런 다음 npm start를 실행하여 Codelab의 개발 서버를 시작합니다.

소스 코드의 README.md 파일은 배포된 모든 파일에 대한 설명을 제공합니다. 또한 이 Codelab 전반에서 작업할 주요 기존 파일은 다음과 같습니다.

키 파일

  • js/preview.js - 미리보기 페이지 JavaScript 파일
  • js/main.js - 기본 애플리케이션 JavaScript 파일

3. 작업자 작성

현재 웹 앱의 미리보기 기능은 로드 시 최신 콘텐츠만 표시합니다. 사용자가 입력할 때 실시간 미리보기가 표시되는 것이 좋습니다. 이를 위해서는 잠재적으로 많은 양의 데이터를 컴파일하고 두 개의 서로 다른 열린 창 사이에서 데이터를 전송해야 합니다. 따라서 열린 창의 기본 스레드에서 실행하면 안 됩니다. 대신 공유 웹 워커를 사용해 보겠습니다.

먼저 다음 코드를 사용하여 js/worker.js 파일을 만듭니다.

import { expose } from 'comlink';
import { marked } from 'marked';

class Compiler {
  state = {
    raw: '',
    compiled: '',
  };
  subscribers = [];

  async set(content) {
    this.state = {
      raw: content,
      compiled: marked(content),
    };

    await Promise.all(this.subscribers.map((s) => s(this.state)));
  }

  subscribe(cb) {
    this.subscribers.push(cb);
  }
}

const compiler = new Compiler();

onconnect = (e) => expose(compiler, e.ports[0]);

설명

이 코드는 콘텐츠를 설정할 수 있고 콘텐츠가 컴파일된 후 구독을 호출할 수 있는 Compiler라는 클래스를 설정합니다. 공유 작업자이므로 이 클래스의 인스턴스는 하나만 사용해야 하므로 Compiler의 새 인스턴스가 인스턴스화됩니다. 그런 다음 작업자 외부에서 이 클래스를 원활하게 사용할 수 있도록 Comlink를 사용하여 컴파일러 인스턴스를 노출합니다. 이렇게 하면 컴파일러 인스턴스를 사용하는 코드에 선언된 것처럼 모든 메서드를 사용할 수 있습니다. 전용 작업자가 아닌 공유 작업자이므로 모든 연결에 노출되어야 합니다.

4. 작업자에게 콘텐츠 전송

작업자가 생성되었으므로 이제 콘텐츠를 작업자에게 전송해야 합니다. 이렇게 하려면 js/main.js를 업데이트하여 다음을 실행하세요.

  • comlink에서 이름이 지정된 내보내기 wrap 가져오기
  • worker라는 새 모듈 유형 공유 작업자를 만들고, 유형을 module로 설정하고, new URL 패턴 (new URL('./worker.js', import.meta.url))을 사용하여 이를 가리킵니다.
  • worker.port를 wrap하는 compiler 변수를 만듭니다.
  • 편집기의 업데이트 함수 (editor.onUpdate)에서 콘텐츠를 데이터베이스에 저장한 후 compiler.set가 완료될 때까지 기다리면서 콘텐츠를 전달합니다.

설명

Comlink 내보내기를 래핑하면 노출된 클래스 메서드를 작업자 경계를 넘어 공유되지 않은 것처럼 사용할 수 있습니다. 단, 이제 모든 것이 비동기식입니다. 전용 작업자가 아닌 공유 작업자이므로 Comlink는 작업자 자체가 아닌 작업자의 포트를 래핑해야 합니다. 이제 편집기가 업데이트될 때마다 콘텐츠가 작업자에게 전송되어 작업됩니다.

5. 미리보기 페이지 업데이트

마지막 단계는 컴파일된 콘텐츠를 공유 작업자에서 미리보기로 가져오는 것입니다. 이렇게 설정하는 방법은 거의 동일하지만 함수는 작업자 경계를 통과할 수 없으므로 함수 대신 프록시를 사용해야 합니다. Comlink가 다시 한번 도움이 될 것입니다. 다음을 수행하도록 js/preview.js을 업데이트합니다.

  • comlink에서 명명된 내보내기 wrap 및 proxy 가져오기
  • js/main.js에서와 같이 공유 작업자를 만들고 래핑합니다.
  • 수신 데이터의 compiled 속성을 미리보기 영역의 내부 HTML로 설정하는 프록시 함수를 사용하여 컴파일러의 subscribe 메서드를 호출합니다.

완료되면 미리보기를 열고 편집기에 입력을 시작하세요. 페이지의 기본 스레드를 차단하지 않고도 마크다운이 자동으로 컴파일되어 미리보기 영역에 실시간으로 표시되는 것을 보면서 즐거움과 흥분을 느껴 보세요.

6. 축하합니다.

공유 작업자를 사용하여 여러 PWA 인스턴스 간에 상태를 공유하는 방법을 알아봤습니다.