1. 환영합니다
이 실습에서는 기존 웹 애플리케이션에 스트리밍 경로 응답을 추가하여 성능을 개선합니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈 중 일곱 번째입니다. 이전 Codelab은 PWA 강화였습니다. 이 시리즈에는 Codelab이 하나 더 있습니다.
학습할 내용
- 서비스 워커에 스트리밍 응답 추가
유의해야 할 사항
- 자바스크립트
필요한 항목
2. 설정하기
이 Codelab을 완료하는 데 필요한 시작 코드를 클론하거나 다운로드하여 시작하세요.
저장소를 클론하는 경우 pwa06--service-worker-includes 브랜치에 있는지 확인합니다. ZIP 파일에는 해당 브랜치의 코드도 포함되어 있습니다.
이 코드베이스에는 Node.js 14 이상이 필요합니다. 코드를 사용할 수 있게 되면 코드 폴더의 명령줄에서 npm ci를 실행하여 필요한 모든 종속 항목을 설치합니다. 그런 다음 npm start를 실행하여 Codelab의 개발 서버를 시작합니다.
소스 코드의 README.md 파일은 배포된 모든 파일에 대한 설명을 제공합니다. 또한 이 Codelab 전반에서 작업할 주요 기존 파일은 다음과 같습니다.
키 파일
js/preview.js- 페이지의 JavaScript 파일 미리보기service-worker.js- PWA의 서비스 워커 파일
3. 스트리밍 미리보기
미리보기 페이지는 머리, 컴파일된 본문, 바닥의 세 부분으로 명확하게 나눌 수 있습니다. 현재 컴파일된 본문은 클라이언트 측에서 렌더링되지만 그럴 이유가 없습니다. 서비스 워커로 옮기겠습니다.
본문을 컴파일하기 위해 비동기 콘텐츠 조회가 있습니다. 탐색 응답의 비동기 작업은 비용이 많이 들기 때문에 알려진 콘텐츠를 브라우저에 먼저 스트리밍하는 것이 좋습니다.
이렇게 하려면 먼저 js/preview.js의 콘텐츠를 지워 더 이상 컴파일하지 않도록 합니다. 그런 다음 service-worker.js에서 다음을 실행합니다.
workbox-streams에서strategy라는 이름의 내보내기를streamsStrategy로 가져오기- 명명된 내보내기
openDB및idb에서 가져오고 명명된 내보내기marked을marked에서 가져옵니다. - 탐색의 경로 등록 전에 새 경로 등록
- URL의
pathname이/preview인지 확인해야 합니다. main태그의 콘텐츠 영역을 통해preview/index.html의 콘텐츠로 응답settings-storeIndexedDB를 열고,settings객체 저장소에서 콘텐츠를 가져오고, 해당 콘텐츠의 마크다운 렌더링 버전을 반환하는 함수로 응답하세요.- 닫는
main,body,html태그로 응답합니다.
- URL의
스트리밍 응답이 준비되면 다시 돌아가 브라우저에서 사이트 미리보기를 엽니다. 이제 페이지 콘텐츠가 서비스 워커에서 직접 렌더링되는 것을 확인할 수 있습니다. 클라이언트 측 코드는 필요하지 않습니다.
4. 축하합니다.
서비스 워커와 캐시 스토리지 API를 사용하여 웹 앱을 오프라인으로 전환하는 방법을 배웠습니다.
이 시리즈의 다음 Codelab은 작업자 사용입니다.