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 nguồn gốc của bạn

Yusuke Utsunomiya

Twitter Trang chủ

Kenji Baheux

Việc nhóm toàn bộ trang web thành một tệp duy nhất và làm cho trang web đó có thể chia sẻ sẽ 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 nơi bạn có thể:

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

Web Bundle API là một đề xuất vượt trội cho phép bạn thực hiện tất cả những điều 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 sau cờ thử nghiệm.

Ra mắt Web Bundle API

Gói web 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. Tệp này có thể bao gồm một hoặc nhiều tệp HTML, tệp JavaScript, hình ảnh hoặc biểu định kiểu.

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

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 Gói web được lập chỉ mục theo URL yêu cầu và có thể đi kèm với chữ ký bảo đảm cho tài nguyên đó (không bắt buộc). Chữ ký giúp trình duyệt hiểu và xác minh nguồn gốc của từng tài nguyên và coi mỗi tài nguyên đều đến từ nguồn gốc thực sự của nó. Điều này tương tự như cách trao đổi HTTP đã ký (một tính năng dùng để ký một tài nguyên HTTP duy nhất) được xử lý.

Bài viết này sẽ giới thiệu cho bạn định nghĩa và cách sử dụng gói web.

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

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

Gói web có nhiều tính năng độc đáo:

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

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

Yêu cầu bạn bè chia sẻ tệp .wbn của trò chơi. Ví dụ: bạn có thể dễ dàng chia sẻ tệp 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 riêng bạn và cố gắng vượt qua điểm số cao của bạn bè.

Sau đây là video giải thích tình huống này.

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

Xây dựng gói web

CLI go/bundle hiện là cách dễ nhất để nhóm một trang web. go/bundle là một bản triển khai tham chiếu của quy cách Gói web được tích hợp 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à tạo ứng dụng web để sẵn sàng gói 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à một Gói web.

Ngoài ra còn có các lựa chọn khác để đóng gói và nhiều lựa chọn khác sắp ra mắt. CLI go/bundle cho phép bạn tạo Gói web bằng cách sử dụng tệp HAR hoặc danh sách URL tài nguyên tuỳ chỉnh. Hãy truy cập kho lưu trữ GitHub để tìm hiểu thêm 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 phát triển ban đầu.

Tìm hiểu các gói web

Cách dùng thử Gói web:

Hãy truy cập about://version để xem phiên bản Chrome bạn đang dùng. Nếu bạn đang chạy phiên bản 80 trở lên, hãy bỏ qua bước tiếp theo.
Tải Chrome Canary xuống nếu bạn chưa chạy Chrome 80 trở lên.
Mở about://flags/#web-bundles.
Đặt cờ Gói web thành 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 sử dụng máy tính hoặc nhấn vào tệp đó trong một ứng dụng quản lý tệp nếu bạn sử dụng Android.

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

Quá trình triển khai Preact của TodoMVC hoạt động ngoại tuyến dưới dạng một 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à thông tin tổng quan nhanh về toàn bộ trang web web.dev, tính đến ngày 15 tháng 10 năm 2019.
proxx.wbn: PROXX là 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, hỗ trợ việc đổi kích thước và chuyển đổi định dạng.

Gửi phản hồi

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

Gửi ý kiến phản hồi chung đến 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 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.
Chúng tôi rất hoan nghênh mọi sự đóng góp cho các cuộc thảo luận về quy cách và công cụ. 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 gửi lời cảm ơn chân thành tới nhóm kỹ thuật tuyệt vời của Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda và Jeffrey Yasskin đã đóng góp rất nhiều cho thông số kỹ thuật, 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 bạn khám phá nội dung thảo luận về IETF và Dave Cramer là một nguồn tài nguyên hữu ích 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ì đã có khả năng so sánh tuyệt vời và nỗ lực không ngừng nghỉ của anh để cải thiện bộ khung này.