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
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.](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=6&hl=vi)
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.
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.