開始使用 Web Bundle

透過藍牙將網站分享為單一檔案，並在來源環境離線執行這些網站

Yusuke Utsunomiya

Kenji Baheux

將完整網站整合為單一檔案，方便他人共用 開拓網路的新用途想像一下，您可以在世界上：

• 自行建立內容並透過各種管道發布 僅限於網路
• 透過藍牙或 Wi-Fi Direct 與好友分享網頁應用程式或網頁內容
• 將您的網站攜帶到自己的 USB 隨身帶著走，甚至將網站交由您的區域網路代管

Web Bundles API 是一項過時的邊緣提案，可協助您完成這一切。

瀏覽器相容性

Web Bundles API 目前僅支援透過 Chromium 為基礎的瀏覽器 實驗旗標

Web Bundles API 隆重登場

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

Web Bundle (正式稱為 HTTP Exchange 套裝組合) 是網路封包的一部分 提案。

Web Bundle 中的 HTTP 資源會依照要求網址建立索引，您也可以選擇 還加上了適用於資源的簽章簽名可讓瀏覽器 瞭解並驗證每項資源的來源，然後分別處理 完全來自真正的來源這與 Signed HTTP Exchange 的做法類似 則適用於簽署單一 HTTP 資源的功能

本文將逐步說明什麼是 Web Bundle 以及使用方法。

說明 Web Bundle

確切來說，Web Bundle 是具有 .wbn 副檔名的 CBOR 檔案，依慣例而言， 將 HTTP 資源封裝為二進位格式，並由 application/webbundle MIME 提供 類型。詳情請參閱頂層結構一文 部分。

Web Bundle 具備許多獨特功能：

• 可封裝多個網頁，將完整網站整合成單一檔案
• 啟用可執行的 JavaScript，與 MHTML 不同
• 使用 HTTP 變數進行相關操作 協商內容，透過 Accept-Language 實現國際化 即使該套裝組合處於離線狀態
• 由發布者進行加密簽署時，在來源結構定義中載入
• 在本機提供時幾乎立即載入

這些功能可實現多種情境。其中一個常見情況是 建構獨立的網頁應用程式，即使沒有 網際網路連線。舉例來說，假設您搭飛機 從東京到舊金山 您的朋友。您不喜歡旅途中的娛樂內容，你的好友正在玩有趣的遊戲 名為 PROXX 的網路遊戲，通知你玩家下載了網頁版遊戲 搭飛機前的套裝組合。離線時也能順暢使用。使用網頁前 建立套裝組合後，故事就會結束，這時就必須輪流 在朋友的裝置上玩這款遊戲，或者尋找其他物品傳遞 讓應用程式從可以最快做出回應的位置 回應使用者要求您現在可以透過 Web Bundle 進行以下操作：

1. 請好友分享遊戲的 .wbn 檔案。例如， 也能輕鬆使用檔案分享應用程式進行點對點共用
2. 在支援 Web Bundle 的瀏覽器中開啟 .wbn 檔案。
3. 開始在自己的裝置上開始遊戲，並嘗試擊敗好友 分數

以下影片將說明這個情況。

如您所見，Web Bundle 可存放所有資源，方便離線運作 並立即載入

建立網路套件

go/bundle CLI 目前是 。go/bundle 是 Web Bundle 的參考實作 內建規格，Go

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 網址。前往 GitHub 存放區瞭解詳情 關於「go/bundle」。您也可以嘗試使用實驗性 Node.js 模組進行組合、 wbn。請注意，wbn 仍處於早期階段， 。

試用 Web Bundle

如何試用 Web Bundle：

1. 請前往 about://version 查看您目前使用的 Chrome 版本。若是在 iOS 和 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: SQUosh 是便利又快速的圖片最佳化工具， 可讓您並列比較各種圖片壓縮格式，並支援 調整轉換大小及設定格式

提供意見

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 致力於為 請參閱這篇文章。活動期間 標準化流程 Dan York 導入了 「IETF 討論」和 Dave Cramer 一直是 協助發布者瞭解實際需求我們也要感謝 Jason Miller 給他最偉大的王位和他的長才 並持續改進架構。