開始使用 Web Bundle

透過藍牙分享網站做為單一檔案，並在原始網站的上下文中離線執行

Yusuke Utsunomiya

Kenji Baheux

警告：實驗性的導覽至網頁套件功能已於 2023 年 2 月從 Chrome 中移除。

將整個網站整合為單一檔案並讓其可供分享，可為網路帶來新的用途。想像一下，您可以：

• 自行建立內容並以各種方式發布，而不侷限於網路
• 透過藍牙或 Wi-Fi Direct 與好友分享網頁應用程式或網頁內容
• 將網站帶著走，甚至在自己的區域網路上代管

Web Bundles API 是最新的提案，可讓您執行上述所有操作。

瀏覽器相容性

目前只有採用實驗性標記的 Chromium 瀏覽器才支援 Web Bundles API。

隆重推出 Web Bundles API

Web 套件是一種檔案格式，可在單一檔案中封裝一或多個 HTTP 資源。可包含一或多個 HTML 檔案、JavaScript 檔案、圖片或樣式表單。

網路套件 (正式名稱為「Bundled HTTP Exchanges」) 是 Web Packaging 提案的一部分。

網頁套件的運作方式

Web 套件中的 HTTP 資源會依要求網址建立索引，並可選擇附上可為資源背書的簽名。簽章可讓瀏覽器瞭解並驗證每個資源的來源，並將每個資源視為來自其實際來源。這與處理 Signed HTTP Exchanges 的方式類似，這是用於簽署單一 HTTP 資源的功能。

本文將逐步說明什麼是網頁包，以及如何使用網頁包。

說明 Web Bundle

確切來說，Web Bundle 是具有 .wbn 副檔名的 CBOR 檔案，按照慣例將 HTTP 資源封裝為二進位格式，並且會以 application/webbundle MIME 類型提供。如需進一步瞭解這項功能，請參閱規格草稿的「頂層結構」部分。

Web 套件具有多項獨特功能：

• 可封裝多個網頁，將完整網站整合成單一檔案
• 啟用可執行的 JavaScript，而非 MHTML
• 使用 HTTP 變數執行內容交涉作業，透過 Accept-Language 標頭啟用國際化，即使組合處於離線狀態也一樣
• 在發布者以加密編譯簽署時，載入來源內容
• 在本機提供時幾乎立即載入

這些功能可開啟多種情境。其中一個常見的情況是，您可以建構易於分享且可在沒有網際網路連線的情況下使用的獨立網頁應用程式。舉例來說，假設您與朋友一起在東京到舊金山的飛機。你不喜歡機上娛樂內容。您的朋友正在玩一款名為 PROXX 的趣味網頁遊戲，並告訴您，他們在登機前已將遊戲下載為網頁套件。離線時也能正常運作。在推出 Web 套件之前，故事就會結束，你必須輪流在朋友的裝置上玩遊戲，或是找其他方式打發時間。不過，有了 Web Bundles，您現在可以執行下列操作：

1. 請好友分享遊戲的 .wbn 檔案。舉例來說，只要使用檔案共用應用程式，您就可以輕鬆透過點對點方式共用檔案。
2. 在支援 Web 套件的瀏覽器中開啟 .wbn 檔案。
3. 開始在自己的裝置上玩遊戲，並嘗試打破好友的最高分。

以下影片說明這個情境。

如您所見，Web Bundle 可包含所有資源，讓資源可離線運作並立即載入。

注意：目前 Chrome 80 僅支援未簽署的套件 (也就是沒有來源簽章的網頁套件)。由於網頁工作站跨來源問題，因此不含簽名的 PROXX 無法正常運作。Chrome 正設法解決這個問題。同時，請參閱「處理未簽署的套件中的常見問題」，瞭解如何避免跨來源問題。

建構 Web Bundle

go/bundle CLI 目前是將網站打包成套裝最簡單的方式。go/bundle 是 Go 中內建 Web Bundle 規格的參考實作。

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 檔案或自訂的資源網址清單建構 Web Bundle。請造訪 GitHub 存放區，進一步瞭解 go/bundle。您也可以試試實驗性的 Node.js 模組，用於捆綁 wbn。請注意，wbn 仍處於初期開發階段。

試用 Web Bundle

如何試用 Web Bundle：

1. 請前往 about://version 查看您目前使用的 Chrome 版本。如果您使用的是 80 以上版本，請略過下一個步驟。
2. 如果您未執行 Chrome 80 以上版本，請下載 Chrome Canary。
3. 開啟 about://flags/#web-bundles。

4. 將「Web Bundles」標記設為「Enabled」。

   

   在 about://flags 啟用 Web Bundle

5. 重新啟動 Chrome。

6. 如果是使用電腦，請將 todomvc.wbn 檔案拖曳至 Chrome；如果是使用 Android 裝置，請在檔案管理應用程式中輕觸該檔案。

一切都運作正常。

以網路套件形式離線運作的 TodoMVC Preact 實作項目

您也可以試試其他範例網頁套件：

• web.dev.wbn 是 2019 年 10 月 15 日當天 web.dev 網站的快照。
• proxx.wbn：PROXX 是能離線運作的 Minesweeper 複製檔案。
• squoosh.wbn：Squoosh 是一款方便又快速的圖片最佳化工具，可讓您並排比較各種圖片壓縮格式，並支援調整大小和格式轉換。

注意：目前您只能前往儲存在本機檔案中的 Web 套件，但這只是暫時限制。

提供意見

Chrome 中的 Web Bundle API 實作內容仍在實驗階段，目前並不完整。 並非一切運作順利，還可能會失敗或當機。所以我們選擇保留實驗用旗標不過，您可以透過 Chrome 探索這個 API。網路開發人員的意見對新 API 的設計至關重要，因此請試用並告訴 Web 套件開發人員您的想法。

• 請將一般意見寄至 [e-mail]。
• 如果您對規格有任何意見，請前往 https://github.com/WICG/webpackage/issues/new 提交新的規格問題，或傳送電子郵件至 [e-mail]。
• 如果您在 Chrome 的行為中發現任何問題，請前往 https://crbug.com/new 回報 Chromium 錯誤。
• 我們也歡迎您對規格討論和工具做出任何貢獻。歡迎前往規格存放區參與討論。

特別鳴謝

我們要特別感謝 Chrome 工程團隊的優秀成員 Kunihiko Sakamoto、Tsuyoshi Horo、Takashi Toyoshima、Kinuko Yasuda 和 Jeffrey Yasskin，他們不辭辛勞，為規格提供貢獻、在 Canary 上建構這項功能，並審查本文。在標準化過程中，Dan York 協助我們掌握 IETF 討論方向，而 Dave Cramer 也提供許多實用資源，讓我們瞭解發布商實際的需求。我們也要感謝 Jason Miller 開發出令人驚豔的 preact-todomvc，以及他不懈努力改善架構。