Trang này được dịch bởi Cloud Translation API.

Bắt đầu sử dụng Gói web

Chia sẻ trang web dưới dạng một tệp qua Bluetooth và chạy các trang web đó khi không có mạng trong ngữ cảnh máy chủ gốc của bạn

Yusuke Utsunomiya

Kenji Baheux

Nhóm toàn bộ trang web dưới dạng một tệp duy nhất và chia sẻ trang web đó mở ra các trường hợp sử dụng mới cho web. Hãy tưởng tượng một thế giới mà bạn có thể:

Tạo nội dung của riêng bạn và phân phối nội dung đó theo mọi cách mà không phải bị hạn chế đối với mạng
Chia sẻ ứng dụng web hoặc nội dung trên web với bạn bè qua Bluetooth hoặc Wi-Fi Direct
Mang theo trang web của bạn trên USB riêng hoặc thậm chí lưu trữ trang web trên mạng cục bộ của riêng bạn

Web Bundle API là đề xuất tiên tiến giúp bạn làm được tất cả những việc này.

Khả năng tương thích với trình duyệt

Web Bundle API hiện chỉ được hỗ trợ trong các trình duyệt dựa trên Chromium một cờ thử nghiệm.

Giới thiệu về Web Bundles API

Web Bundle là một định dạng tệp để đóng gói một hoặc nhiều tài nguyên HTTP trong một tệp duy nhất. Có thể bao gồm một hoặc nhiều tệp HTML, JavaScript hình ảnh hoặc biểu định kiểu.

Web Bundle, hay còn gọi là Trao đổi HTTP theo gói, là một phần của tính năng Đóng gói web đề xuất.

Hình minh hoạ rằng Gói web là một tập hợp các tài nguyên web. — Cách hoạt động của Gói web

Các tài nguyên HTTP trong một Web Bundle được lập chỉ mục theo URL yêu cầu và bạn có thể tuỳ ý lập chỉ mục đi kèm chữ ký để đảm bảo tài nguyên. Chữ ký cho phép trình duyệt tìm hiểu và xác minh nguồn gốc của mỗi tài nguyên, đồng thời coi mỗi tài nguyên là đến từ từ nguồn gốc thực sự của nó. Điều này tương tự như cách Signed HTTP Exchanges, Google xử lý tính năng ký một tài nguyên HTTP đơn lẻ.

Bài viết này sẽ giải thích khái niệm Web Bundle và cách sử dụng.

Giải thích về gói web

Nói chính xác, Web Bundle là một tệp CBOR có đuôi .wbn (theo quy ước) đóng gói tài nguyên HTTP thành định dạng nhị phân và được phân phát cùng application/webbundle MIME loại. Bạn có thể đọc thêm về phần này trong Cấu trúc cấp cao nhất của bản nháp thông số kỹ thuật.

Web Bundle có nhiều tính năng độc đáo:

Đóng gói nhiều trang, cho phép nhóm một trang web hoàn chỉnh vào một tệp duy nhất
Bật JavaScript thực thi, không giống như MHTML
Sử dụng Biến thể HTTP để thực hiện thương lượng nội dung, cho phép quốc tế hoá với Accept-Language ngay cả khi gói được sử dụng ngoại tuyến
Tải trong bối cảnh nguồn gốc khi được nhà xuất bản ký mã hoá
Tải gần như ngay lập tức khi được phân phối cục bộ

Những tính năng này mở ra nhiều tình huống. Một tình huống phổ biến là khả năng tạo một ứng dụng web độc lập dễ chia sẻ và có thể sử dụng mà không cần kết nối Internet. Ví dụ: giả sử bạn đang trên máy bay từ Tokyo đến San Francisco với bạn của mình. Bạn không thích chương trình giải trí trên máy bay. Bạn của bạn đang chơi một trò chơi thú vị trên web có tên PROXX và cho bạn biết rằng họ đã tải trò chơi xuống dưới dạng Gói trước khi lên máy bay. Ứng dụng này hoạt động hoàn hảo khi không có mạng. Trước khi sử dụng web Gói, câu chuyện sẽ kết thúc ở đó và bạn sẽ phải thay phiên nhau chơi trò chơi trên thiết bị của bạn bè hoặc tìm thiết bị khác để truyền bất cứ lúc nào. Tuy nhiên, với Web Bundle, bạn hiện có thể làm những việc sau:

Hãy yêu cầu bạn bè chia sẻ tệp .wbn của trò chơi. Ví dụ: tệp có thể dễ dàng được chia sẻ ngang hàng bằng ứng dụng chia sẻ tệp.
Mở tệp .wbn trong trình duyệt có hỗ trợ Web Bundle.
Bắt đầu chơi trò chơi trên thiết bị của chính bạn và cố gắng vượt qua điểm cao của bạn bè điểm số.

Sau đây là video giải thích trường hợp này.

Như bạn có thể thấy, Web Bundle có thể chứa mọi tài nguyên, giúp tài nguyên hoạt động khi không có mạng và tải ngay lập tức.

Tạo gói web

CLI go/bundle hiện là cách dễ dàng nhất để nhóm một trang web. go/bundle là một cách triển khai tham chiếu của Web Bundle được tạo trong Go.

Cài đặt Go.

Cài đặt go/bundle.

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

Sao chép kho lưu trữ preact-todomvc và bản dựng ứng dụng web để sẵn sàng nhóm các tài nguyên.
```
git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build
```

Dùng lệnh gen-bundle để tạo tệp .wbn.

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

Xin chúc mừng! TodoMVC hiện là Web Bundle.

Ngoài ra, còn có nhiều cách khác để nhóm quảng cáo và nhiều cách khác nữa. Giao diện dòng lệnh (CLI) go/bundle cho phép bạn tạo Web Bundle bằng cách dùng tệp HAR hoặc danh sách tài nguyên tuỳ chỉnh URL. Truy cập kho lưu trữ GitHub để tìm hiểu thêm giới thiệu về go/bundle. Bạn cũng có thể dùng thử mô-đun Node.js thử nghiệm để nhóm, wbn. Xin lưu ý rằng wbn vẫn đang ở giai đoạn đầu của phát triển ứng dụng.

Tìm hiểu cách sử dụng Web Bundle

Cách dùng thử Web Bundle:

Truy cập about://version để xem bạn đang chạy phiên bản Chrome nào. Nếu bạn đang chạy phiên bản 80 trở lên, bỏ qua bước tiếp theo.
Tải Chrome Canary xuống nếu bạn hiện không chạy Chrome 80 hoặc phiên bản cao hơn.
Mở about://flags/#web-bundles.
Đặt cờ Web Bundle thành Enabled (Bật).

Bật Gói web trong about://flags
Chạy lại Chrome.
Kéo và thả tệp todomvc.wbn vào Chrome nếu bạn đang dùng máy tính hoặc nhấn vào tệp đó trong một tệp nếu đang sử dụng Android.

Mọi thứ đều hoạt động kỳ diệu.

Quy trình triển khai Preact của TodoMVC hoạt động ngoại tuyến dưới dạng gói web

Bạn cũng có thể dùng thử các gói web mẫu khác:

web.dev.wbn là một ảnh chụp nhanh của toàn bộ trang web web.dev, tính đến ngày 15 tháng 10 năm 2019.
proxx.wbn: PROXX là một bản sao của Dò mìn hoạt động khi không có mạng.
squoosh.wbn: Squoosh là một công cụ tối ưu hoá hình ảnh thuận tiện và nhanh chóng, cho phép bạn so sánh song song nhiều định dạng nén hình ảnh khác nhau, cùng với hỗ trợ đổi kích thước và định dạng.

Gửi phản hồi

Quá trình triển khai API Web Bundle trong Chrome còn đang ở giai đoạn thử nghiệm và chưa hoàn chỉnh. Không phải mọi tính năng đều hoạt động và có thể không thành công hoặc gặp sự cố. Đó là lý do nó nằm sau một cờ thử nghiệm. Tuy nhiên, API này đã sẵn sàng đủ để bạn khám phá trong Chrome. Phản hồi từ các nhà phát triển web có vai trò rất quan trọng đối với việc thiết kế mới. Vì vậy, hãy dùng thử và cho những người đang làm việc trên Web Bundle biết suy nghĩ của bạn.

Gửi ý kiến phản hồi chung tới webpackage-dev@chromium.org.
Nếu bạn có ý kiến phản hồi về thông số kỹ thuật, hãy truy cập vào https://github.com/WICG/webpackage/issues/new để báo cáo vấn đề mới về thông số kỹ thuật hoặc gửi email đến địa chỉ wpack@ietf.org.
Nếu bạn phát hiện thấy bất kỳ vấn đề nào trong hành vi của Chrome, hãy truy cập https://crbug.com/new để báo cáo lỗi Chromium.
Bất kỳ đóng góp nào cho quá trình thảo luận và công cụ về thông số kỹ thuật cũng không chỉ chào mừng. Hãy truy cập kho lưu trữ thông số kỹ thuật để tham gia.

Các lời xác nhận

Chúng tôi muốn cảm ơn nhóm kỹ thuật tuyệt vời của Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda và Jeffrey Yasskin đã nỗ lực đóng góp cho quy cách, xây dựng tính năng trên Canary và xem lại bài viết này. Trong quá trình tiêu chuẩn hoá Dan York đã giúp điều hướng Cuộc thảo luận của IETF và Dave Cramer là tuyệt vời về những gì nhà xuất bản thực sự cần. Chúng tôi cũng muốn cảm ơn Jason Miller vì những cảnh trước diễn tiến tuyệt vời và nỗ lực không ngừng để cải thiện khung này.