블루투스를 통해 웹사이트를 단일 파일로 공유하고 원본 컨텍스트에서 오프라인으로 실행
전체 웹사이트를 하나의 파일로 묶어 공유 가능 상태로 만들기 웹의 새로운 사용 사례의 문을 열어 주었습니다. 여러분이 다음을 할 수 있는 세상을 상상해 보세요.
- 직접 콘텐츠를 만들어 다른 사람의 손길 없이 온갖 방법으로 배포할 수 있습니다. 네트워크로 제한됨
- 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">웹 번들의 HTTP 리소스는 요청 URL별로 색인이 생성되며, 선택적으로 리소스를 보증하는 서명이 함께 제공됩니다 서명을 통해 브라우저에서 각 리소스의 출처를 이해하고 확인하며 각 리소스의 출처로 취급 알 수 있습니다. 이는 서명된 HTTP 교환 방식과 비슷합니다. 단일 HTTP 리소스 서명 기능이 처리됩니다.
이 도움말에서는 웹 번들의 정의와 사용 방법을 안내합니다.
웹 번들 설명
정확히 말해 웹 번들은 확장자 (규칙에 따라)가 .wbn
인 CBOR 파일입니다.
HTTP 리소스를 바이너리 형식으로 패키징하고 application/webbundle
MIME를 사용하여 제공됩니다.
있습니다. 자세한 내용은 최상위 구조를 참고하세요.
섹션을 참조하세요
웹 번들에는 여러 고유한 기능이 있습니다.
- 여러 페이지를 캡슐화하여 전체 웹사이트를 하나의 파일로 묶을 수 있음
- MHTML과 달리 실행 가능한 자바스크립트를 사용 설정합니다.
- HTTP 변형을 사용하여 작업 수행
Accept-Language
(으)로 다국어화할 수 있는 콘텐츠 협상 사용 시에는 헤더의 이름을 지정합니다. - 게시자가 암호화 방식으로 서명할 때 출처의 컨텍스트에서 로드합니다.
- 로컬에서 게재할 때 거의 즉시 로드됩니다.
이러한 기능은 여러 시나리오를 엽니다. 일반적인 시나리오 중 하나는 별도의 소프트웨어 없이 쉽게 공유하고 사용할 수 있는 독립 실행형 웹 앱을 빌드 인터넷 연결 예를 들어 도쿄에서 샌프란시스코까지 비행기에 탑승하여 할 수 있습니다. 비행기 내 엔터테인먼트가 마음에 들지 않아요. 친구가 흥미로운 게임을 하고 있습니다. PROXX라는 이름의 웹 게임이 표시되며 게임을 웹으로 다운로드했다고 표시됩니다. 항공편에 탑승하기 전 묶음 상품 제공 오프라인에서도 문제없이 작동합니다. 웹 버전 이전 번들 같은 경우 스토리는 여기로 끝나며, 각 플레이어는 이를 번갈아 가며 다운될 다른 무언가를 찾는 경우 있습니다. 하지만 웹 번들을 사용하면 다음과 같은 작업을 할 수 있습니다.
- 친구에게 게임의
.wbn
파일을 공유해 달라고 요청하세요. 예를 들면 다음과 같습니다. 파일 공유 앱을 사용하여 P2P로 쉽게 공유할 수 있었습니다. - 웹 번들을 지원하는 브라우저에서
.wbn
파일을 엽니다. - 내 기기에서 게임을 플레이하고 친구의 최고 기록을 경신해 보세요. 있습니다.
다음은 이 시나리오를 설명하는 동영상입니다.
보시다시피 웹 번들에는 모든 리소스가 포함될 수 있으므로 오프라인에서 작동하도록 합니다. 즉시 로드할 수 있습니다
웹 번들 빌드
go/bundle
CLI는 현재
웹사이트를 묶는 가장 쉬운 방법입니다. go/bundle
는 웹 번들의 참조 구현입니다.
Go에 내장되어 있습니다
- Go를 설치합니다.
go/bundle
를 설치합니다.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
preact-todomvc 저장소를 클론하고 빌드합니다. 리소스를 묶을 준비를 해야 합니다
git clone https://github.com/developit/preact-todomvc.git cd preact-todomvc npm i npm run build
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
는 아직 초기 단계에 있습니다.
있습니다.
웹 번들 둘러보기
웹 번들을 사용해 보려면 다음 단계를 따르세요.
about://version
페이지로 이동하여 현재 실행 중인 Chrome 버전을 확인하세요. 버전 1을(를) 실행 중인 경우 80 이상이면 다음 단계를 건너뜁니다.- Chrome 80을 실행하지 않는 경우 Chrome Canary 다운로드 또는 그 이상일 수 있습니다.
about://flags/#web-bundles
를 엽니다.웹 번들 플래그를 사용 설정됨으로 설정합니다.
<ph type="x-smartling-placeholder">Chrome을 다시 실행합니다.
데스크톱을 사용하는 경우
todomvc.wbn
파일을 Chrome으로 드래그 앤 드롭하거나 파일에서 탭합니다. 관리 앱도 있습니다.
모든 것이 마법처럼 일어납니다.
<ph type="x-smartling-placeholder">다른 샘플 웹 번들을 사용해 볼 수도 있습니다.
- web.dev.wbn은 2019년 10월 15일 현재 web.dev 사이트의 전체 스냅샷
- proxx.wbn: PROXX는 오프라인에서 작동하는 지뢰찾기 클론입니다.
- squoosh.wbn: Squoosh는 편리하고 빠른 이미지 최적화 도구입니다. 를 사용하면 다양한 이미지 압축 형식을 나란히 비교할 수 있으며, 크기 조절 및 서식 변환
의견 보내기
Chrome의 Web Bundle API 구현은 실험용이며 완전하지 않습니다. 모든 것이 제대로 작동하는 것은 아니며 장애나 다운될 수도 있습니다. 그렇기 때문에 실험적인 깃발 뒤에 있습니다. 하지만 이 API는 Chrome에서 살펴볼 수 있을 만큼 충분히 준비되어 있습니다. 웹 개발자의 의견은 애플리케이션의 설계에 새 API이므로 사용해 보시고 웹 번들 작업을 하는 사람들에게 의견을 알려주세요.
- 일반적인 의견 보내기 webpackage-dev@chromium.org를 사용합니다.
- 사양에 대한 의견이 있는 경우 https://github.com/WICG/webpackage/issues/new 새 사양 문제를 신고하거나 wpack@ietf.org로 이메일을 보내주세요.
- Chrome의 동작에 문제가 있는 경우 Chromium 버그를 신고하려면 https://crbug.com/new를 참고하세요.
- 또한 사양 논의 및 툴에 대한 기여는 환영합니다. 시작하려면 사양 저장소를 방문하세요.
감사의 말씀
훌륭한 Chrome 엔지니어링팀에 감사의 마음을 전합니다. 쿠니히코 사카모토, 쓰요시 호로, 타카시 토요시마, 야스다 키누코, 제프리 야스킨은 Canary에서 기능을 빌드하고 이 도움말을 검토하겠습니다. 이벤트 댄 요크(Dan York)는 표준화 과정을 통해 IETF 논의와 Dave Cramer는 게시자에게 실제로 필요한 것이 무엇인지에 관한 훌륭한 리소스입니다. 또한 놀라운 프리팩트-토돔프(preact-todomvc)와 그의 박사에 대한 제이슨 밀러(Jason Miller)에게도 감사의 인사를 전합니다. 해야 합니다.