웹 번들 시작하기

블루투스를 통해 웹사이트를 단일 파일로 공유하고 원본 컨텍스트에서 오프라인으로 실행

Yusuke Utsunomiya

Kenji Baheux

경고: 웹 번들로 이동하는 실험 구현은 2023년 2월에 Chrome에서 삭제되었습니다.

전체 웹사이트를 하나의 파일로 묶어 공유 가능 상태로 만들기 웹의 새로운 사용 사례의 문을 열어 주었습니다. 여러분이 다음을 할 수 있는 세상을 상상해 보세요.

• 직접 콘텐츠를 만들어 다른 사람의 손길 없이 온갖 방법으로 배포할 수 있습니다. 네트워크로 제한됨
• Bluetooth 또는 Wi-Fi Direct를 통해 웹 앱 또는 웹 콘텐츠를 친구와 공유
• USB로 사이트를 옮기거나 자체 로컬 네트워크에서 호스팅

Web Bundles API는 이 모든 작업을 수행할 수 있게 해 주는 최첨단 제안입니다.

브라우저 호환성

Web Bundles API는 현재 다음 버전의 Chromium 기반 브라우저에서만 지원됩니다. 실험용 플래그입니다.

Web Bundles API 소개

웹 번들은 하나 이상의 HTTP 리소스를 할 수 있습니다 하나 이상의 HTML 파일, JavaScript 파일, 이미지, 스타일시트 등이 있습니다.

웹 번들의 경우 공식적으로 번들 HTTP 교환(Bundled HTTP Exchange)이라고 합니다. 웹 패키징의 일부입니다. 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 웹 번들 작동 방식

웹 번들의 HTTP 리소스는 요청 URL별로 색인이 생성되며, 선택적으로 리소스를 보증하는 서명이 함께 제공됩니다 서명을 통해 브라우저에서 각 리소스의 출처를 이해하고 확인하며 각 리소스의 출처로 취급 알 수 있습니다. 이는 서명된 HTTP 교환 방식과 비슷합니다. 단일 HTTP 리소스 서명 기능이 처리됩니다.

이 도움말에서는 웹 번들의 정의와 사용 방법을 안내합니다.

웹 번들 설명

정확히 말해 웹 번들은 확장자 (규칙에 따라)가 .wbn인 CBOR 파일입니다. HTTP 리소스를 바이너리 형식으로 패키징하고 application/webbundle MIME를 사용하여 제공됩니다. 있습니다. 자세한 내용은 최상위 구조를 참고하세요. 섹션을 참조하세요

웹 번들에는 여러 고유한 기능이 있습니다.

• 여러 페이지를 캡슐화하여 전체 웹사이트를 하나의 파일로 묶을 수 있음
• MHTML과 달리 실행 가능한 자바스크립트를 사용 설정합니다.
• HTTP 변형을 사용하여 작업 수행 Accept-Language(으)로 다국어화할 수 있는 콘텐츠 협상 사용 시에는 헤더의 이름을 지정합니다.
• 게시자가 암호화 방식으로 서명할 때 출처의 컨텍스트에서 로드합니다.
• 로컬에서 게재할 때 거의 즉시 로드됩니다.

이러한 기능은 여러 시나리오를 엽니다. 일반적인 시나리오 중 하나는 별도의 소프트웨어 없이 쉽게 공유하고 사용할 수 있는 독립 실행형 웹 앱을 빌드 인터넷 연결 예를 들어 도쿄에서 샌프란시스코까지 비행기에 탑승하여 할 수 있습니다. 비행기 내 엔터테인먼트가 마음에 들지 않아요. 친구가 흥미로운 게임을 하고 있습니다. PROXX라는 이름의 웹 게임이 표시되며 게임을 웹으로 다운로드했다고 표시됩니다. 항공편에 탑승하기 전 묶음 상품 제공 오프라인에서도 문제없이 작동합니다. 웹 버전 이전 번들 같은 경우 스토리는 여기로 끝나며, 각 플레이어는 이를 번갈아 가며 다운될 다른 무언가를 찾는 경우 있습니다. 하지만 웹 번들을 사용하면 다음과 같은 작업을 할 수 있습니다.

1. 친구에게 게임의 .wbn 파일을 공유해 달라고 요청하세요. 예를 들면 다음과 같습니다. 파일 공유 앱을 사용하여 P2P로 쉽게 공유할 수 있었습니다.
2. 웹 번들을 지원하는 브라우저에서 .wbn 파일을 엽니다.
3. 내 기기에서 게임을 플레이하고 친구의 최고 기록을 경신해 보세요. 있습니다.

다음은 이 시나리오를 설명하는 동영상입니다.

보시다시피 웹 번들에는 모든 리소스가 포함될 수 있으므로 오프라인에서 작동하도록 합니다. 즉시 로드할 수 있습니다

참고: 현재 Chrome 80은 서명되지 않은 번들 (즉, 서명되지 않은 번들, 원본 서명). 서명 없이 PROXX를 번들로 묶을 수 없음 웹 작업자의 교차 출처 문제 때문입니다. Chrome에서 이 문제를 해결하기 위해 노력하고 있습니다. 포함 서명되지 않은 경우의 일반적인 문제 처리 번들 에서 교차 출처 문제를 방지하는 방법을 알아보세요.

웹 번들 빌드

go/bundle CLI는 현재 웹사이트를 묶는 가장 쉬운 방법입니다. go/bundle는 웹 번들의 참조 구현입니다. Go에 내장되어 있습니다

1. Go를 설치합니다.

2. go/bundle를 설치합니다.

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. preact-todomvc 저장소를 클론하고 빌드합니다. 리소스를 묶을 준비를 해야 합니다

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. gen-bundle 명령어를 사용하여 .wbn 파일을 빌드합니다.

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

축하합니다. TodoMVC가 이제 웹 번들이 되었습니다.

다른 번들 옵션도 제공될 예정입니다. go/bundle CLI HAR 파일 또는 커스텀 리소스 목록을 사용하여 웹 번들을 빌드할 수 있음 URL을 클릭합니다. 자세히 알아보려면 GitHub 저장소를 방문하세요. go/bundle 정보 또한 실험용 Node.js 모듈을 번들로 묶어 사용해 볼 수도 있습니다. wbn wbn는 아직 초기 단계에 있습니다. 있습니다.

웹 번들 둘러보기

웹 번들을 사용해 보려면 다음 단계를 따르세요.

1. about://version 페이지로 이동하여 현재 실행 중인 Chrome 버전을 확인하세요. 버전 1을(를) 실행 중인 경우 80 이상이면 다음 단계를 건너뜁니다.
2. Chrome 80을 실행하지 않는 경우 Chrome Canary 다운로드 또는 그 이상일 수 있습니다.
3. about://flags/#web-bundles를 엽니다.

4. 웹 번들 플래그를 사용 설정됨으로 설정합니다.

   <ph type="x-smartling-placeholder">

   </ph> <ph type="x-smartling-placeholder">

   </ph> about://flags에서 웹 번들 사용 설정

5. Chrome을 다시 실행합니다.

6. 데스크톱을 사용하는 경우 todomvc.wbn 파일을 Chrome으로 드래그 앤 드롭하거나 파일에서 탭합니다. 관리 앱도 있습니다.

모든 것이 마법처럼 일어납니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> 오프라인에서 웹 번들로 작동하는 TodoMVC의 Preact 구현

다른 샘플 웹 번들을 사용해 볼 수도 있습니다.

• web.dev.wbn은 2019년 10월 15일 현재 web.dev 사이트의 전체 스냅샷
• proxx.wbn: PROXX는 오프라인에서 작동하는 지뢰찾기 클론입니다.
• squoosh.wbn: Squoosh는 편리하고 빠른 이미지 최적화 도구입니다. 를 사용하면 다양한 이미지 압축 형식을 나란히 비교할 수 있으며, 크기 조절 및 서식 변환

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고: 현재는 로컬 파일에 저장된 웹 번들로만 탐색할 수 있지만 이는 일시적인 제한일 뿐입니다.

의견 보내기

Chrome의 Web Bundle API 구현은 실험용이며 완전하지 않습니다. 모든 것이 제대로 작동하는 것은 아니며 장애나 다운될 수도 있습니다. 그렇기 때문에 실험적인 깃발 뒤에 있습니다. 하지만 이 API는 Chrome에서 살펴볼 수 있을 만큼 충분히 준비되어 있습니다. 웹 개발자의 의견은 애플리케이션의 설계에 새 API이므로 사용해 보시고 웹 번들 작업을 하는 사람들에게 의견을 알려주세요.

• 일반적인 의견 보내기 [e-mail]를 사용합니다.
• 사양에 대한 의견이 있는 경우 https://github.com/WICG/webpackage/issues/new 새 사양 문제를 신고하거나 [e-mail]로 이메일을 보내주세요.
• Chrome의 동작에 문제가 있는 경우 Chromium 버그를 신고하려면 https://crbug.com/new를 참고하세요.
• 또한 사양 논의 및 툴에 대한 기여는 환영합니다. 시작하려면 사양 저장소를 방문하세요.

감사의 말씀

훌륭한 Chrome 엔지니어링팀에 감사의 마음을 전합니다. 쿠니히코 사카모토, 쓰요시 호로, 타카시 토요시마, 야스다 키누코, 제프리 야스킨은 Canary에서 기능을 빌드하고 이 도움말을 검토하겠습니다. 이벤트 댄 요크(Dan York)는 표준화 과정을 통해 IETF 논의와 Dave Cramer는 게시자에게 실제로 필요한 것이 무엇인지에 관한 훌륭한 리소스입니다. 또한 놀라운 프리팩트-토돔프(preact-todomvc)와 그의 박사에 대한 제이슨 밀러(Jason Miller)에게도 감사의 인사를 전합니다. 해야 합니다.