透過藍牙將網站做為單一檔案共用,並在來源環境下離線執行網站
將整個網站合併為單一檔案,並設為可分享,為網路開創了新的應用實例。想像您可以:
- 自行建立內容,並以各種方式散佈,不受網路限制
- 透過藍牙或 Wi-Fi Direct 與好友分享網頁應用程式或網頁內容
- 使用自有 USB 隨身攜帶網站,甚至將網站存放在本機網路中
Web Bundles API 是跨越邊緣的提案,可協助您完成上述所有操作。
瀏覽器相容性
目前只有以 Chromium 為基礎的瀏覽器支援 Web Bundles API,且瀏覽器必須採用實驗性旗標。
Web Bundles API 隆重登場
網頁套件是一種檔案格式,可將一或多個 HTTP 資源封裝成單一檔案。其中包含一或多個 HTML 檔案、JavaScript 檔案、圖片或樣式表。
Web Bundle 通常稱為套裝組合 HTTP Exchange,是網路封裝提案的一部分。
![這張圖顯示 Web Bundle 是一組網路資源。](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=3&hl=zh-tw)
網頁套件中的 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,您現在可以:
- 請好友分享遊戲的
.wbn
檔案。舉例來說,您可以使用檔案分享應用程式,輕鬆透過點對點方式共用檔案。 - 在支援 Web Bundle 的瀏覽器中開啟
.wbn
檔案。 - 在自己的裝置上開始玩遊戲,嘗試超越好友的高分。
以下影片將說明上述情境。
如您所見,Web Bundle 可以包含所有資源,讓網路套件能離線運作並立即載入。
建立網頁套件
目前使用 go/bundle
CLI 是最簡單的網站組合方式。go/bundle
是在 Go 中內建 Web Bundle 規格的參考實作。
- 安裝 Go。
安裝「
go/bundle
」。go get -u github.com/WICG/webpackage/go/bundle/cmd/...
複製 preact-todomvc 存放區並建構網頁應用程式,以便備妥資源組合。
git clone https://github.com/developit/preact-todomvc.git cd preact-todomvc npm i npm run build
使用
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:
- 前往
about://version
查看目前使用的 Chrome 版本。如果您使用的是 80 以上版本,請略過下一個步驟。 - 如果您的裝置搭載 Chrome 80 以上版本,請下載 Chrome Canary。
- 開啟
about://flags/#web-bundles
。 將「Web Bundles」標記設為「Enabled」。
正在在 about://flags
中啟用 Web Bundle重新啟動 Chrome。
將
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 揭開對決的精彩表現,他也努力改善架構。