開始使用 Web Bundle

透過藍牙將網站做為單一檔案共用，並在來源環境下離線執行網站

將整個網站合併為單一檔案，並設為可分享，為網路開創了新的應用實例。想像您可以：

• 自行建立內容，並以各種方式散佈，不受網路限制
• 透過藍牙或 Wi-Fi Direct 與好友分享網頁應用程式或網頁內容
• 使用自有 USB 隨身攜帶網站，甚至將網站存放在本機網路中

Web Bundles API 是跨越邊緣的提案，可協助您完成上述所有操作。

瀏覽器相容性

目前只有以 Chromium 為基礎的瀏覽器支援 Web Bundles API，且瀏覽器必須採用實驗性旗標。

Web Bundles API 隆重登場

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

Web Bundle 通常稱為套裝組合 HTTP Exchange，是網路封裝提案的一部分。

網頁套件中的 HTTP 資源會依要求網址建立索引，並可視需要納入資源的簽名。簽名可讓瀏覽器瞭解及驗證每項資源的來源，並將每項資源視為來自其真實來源。這與 Signed HTTP Exchanges 的處理方式類似，這是用於簽署單一 HTTP 資源的功能。

本文將逐步介紹什麼是 Web Bundle 和使用方法。

說明網頁套件

準確來說，Web Bundle 是一種副檔名為 .wbn 的 CBOR 檔案 (依慣例)，可將 HTTP 資源封裝為二進位格式，並以 application/webbundle MIME 類型提供。詳情請參閱規格草稿的頂層結構一節。

Web Bundle 有多項獨特功能：

• 封裝多個網頁，以便將整個網站納入同一個檔案
• 啟用執行 JavaScript 與 MHTML 不同
• 使用 HTTP 變化版本進行內容協商，這樣即使套件離線使用，也能透過 Accept-Language 標頭進行國際化
• 載入由發布者簽署時，在來源環境內載入
• 在本機提供時幾乎立即載入

這些功能適用於多種情況。其中一個常見情況就是，能建構獨立的網頁應用程式，不僅易於分享，也能在沒有網際網路連線的情況下使用。舉例來說，假設您和朋友一起搭乘從東京飛往舊金山的飛機，你不喜歡機航中的娛樂饗宴，你的好友正在玩一款名為 PROXX 的網路遊戲，且告訴你他們在上飛機前，已將遊戲下載為 Web Bundle。離線作業可順暢運作。在 Web Bundle 推出之前，故事會結束，屆時您必須在好友的裝置上輪流播放遊戲，或是尋找其他項目來通過時間。不過，有了 Web Bundle，您現在可以：

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

以下影片將說明上述情境。

如您所見，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 現已成為 Web Bundle。

另外還有其他選項可供選購，我們也將推出更多方案。go/bundle CLI 可讓您使用 HAR 檔案或自訂資源網址清單來建立 Web Bundle。如要進一步瞭解 go/bundle，請造訪 GitHub 存放區。您也可以試用實驗性 Node.js 模組來套裝組合 wbn。請注意，wbn 仍處於早期開發階段。

使用網頁套件

如何試用 Web Bundle：

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

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

   

5. 重新啟動 Chrome。

6. 將 todomvc.wbn 檔案拖曳至 Chrome (如果使用電腦)，或在檔案管理應用程式中輕觸該檔案。

一切都能神奇

您也可以試用其他範例網頁套裝組合：

• web.dev.wbn 是整個 web.dev 網站的快照，截至 2019 年 10 月 15 日。
• proxx.wbn：PROXX 是可離線運作的 Minesweeper 本機副本。
• squoosh.wbn：Squoosh 是一款便利且快速的圖片最佳化工具，可讓您並列比較各種圖片壓縮格式，並支援調整大小和格式轉換功能。

提供意見

Chrome 中的 Web Bundle API 實作成果仍在實驗階段，且不完整。部分功能無法正常運作，可能會失敗或當機。這就是為什麼我們要使用實驗功能標記不過，這個 API 已準備就緒，可讓您在 Chrome 中加以探索。網頁開發人員的意見回饋對全新 API 的設計相當重要，因此歡迎試用，並和使用 Web Bundle 的人員分享想法。

• 將一般意見回饋傳送至 webpackage-dev@chromium.org。
• 如果您對該規格有任何意見，請前往 https://github.com/WICG/webpackage/issues/new 提出新的規格問題，或是傳送電子郵件至 wpack@ietf.org。
• 如果您在 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 揭開對決的精彩表現，他也努力改善架構。