ウェブサイトを Bluetooth 経由で単一のファイルとして共有し、オリジンのコンテキストでオフラインで実行します
ウェブサイト全体を 1 つのファイルにまとめて共有可能にすることで、ウェブの新たなユースケースの可能性が広がります。自分が実現できる世界を想像してみましょう。
- 独自のコンテンツを作成し、ネットワークに制限されることなく、さまざまな方法で配信できる
- ウェブアプリやウェブ コンテンツを Bluetooth や Wi-Fi Direct で友だちと共有できます
- サイトを独自の USB で転送することも、独自のローカル ネットワークでホストすることもできます
Web Bundles API は、これらすべてを可能にする最先端の提案です。
ブラウザの互換性
現在、Web Bundles API は、試験運用版フラグが設定されている Chromium ベースのブラウザでのみサポートされています。
Web Bundles API のご紹介
ウェブバンドルは、1 つ以上の HTTP リソースを単一のファイルにカプセル化するためのファイル形式です。このファイルには、1 つ以上の HTML ファイル、JavaScript ファイル、画像、スタイルシートを含めることができます。
ウェブバンドル(正式には Bundled HTTP Exchange)は、ウェブ パッケージング提案の一部です。
ウェブバンドル内の HTTP リソースは、リクエスト URL によってインデックスに登録されます。また、必要に応じて、リソースを保証するシグネチャを付けることもできます。署名を使用することにより、ブラウザは各リソースの取得元を把握し、確認できるようになります。また、各リソースは真の送信元から生成されたものとして処理されます。これは、単一の HTTP リソースに署名する機能である Signed HTTP Exchange の処理方法と同様です。
この記事では、Web Bundle の概要と使用方法について説明します。
ウェブバンドルの説明
正確に言うと、ウェブバンドルは、(慣例として).wbn
拡張子を持つ CBOR ファイルであり、HTTP リソースをバイナリ形式にパッケージ化し、application/webbundle
MIME タイプで提供されます。詳しくは、仕様のドラフトの最上位の構造のセクションをご覧ください。
ウェブバンドルには複数の独自の機能があります。
- 複数のページをカプセル化して、ウェブサイト全体を 1 つのファイルにまとめる
- MHTML とは異なり、実行可能な JavaScript を有効にする
- HTTP バリアントを使用してコンテンツ ネゴシエーションを行います。これにより、バンドルがオフラインで使用されている場合でも、
Accept-Language
ヘッダーで国際化が可能になります。 - パブリッシャーが暗号署名した場合、元のコンテキストで読み込まれます
- ローカルで提供すると、ほぼ瞬時に読み込まれる
こうした機能により、さまざまなシナリオが可能になります。一般的なシナリオの 1 つは、インターネット接続がなくても簡単に共有して使用できる自己完結型のウェブアプリを構築するというものです。たとえば、友人と東京からサンフランシスコへの飛行機内で移動するとします。機内でのエンターテイメントが好きじゃない。友だちが「PROXX」というおもしろいウェブゲームをプレイしていて、飛行機に乗る前にウェブバンドルとしてゲームをダウンロードしたと言っています。オフラインでも問題なく動作する。Web Bundle が導入される前は、ストーリーはここまでで、友だちのデバイスで順番にプレイするか、時間つぶしの何かを見つける必要がありました。ウェブバンドルでは、次のようなことが可能です。
- 友だちにゲームの
.wbn
ファイルを共有してもらいます。たとえば、ファイル共有アプリを使用してピアツーピアでファイルを簡単に共有できます。 - ウェブバンドルに対応しているブラウザで
.wbn
ファイルを開きます。 - 自分のデバイスでゲームをプレイして、友だちのハイスコアを上回りましょう。
このシナリオについては、こちらの動画をご覧ください。
このように、ウェブバンドルにはすべてのリソースを含めることができ、オフラインで動作して瞬時に読み込まれます。
ウェブバンドルのビルド
現時点では、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
.wbn
ファイルを作成するには、gen-bundle
コマンドを使用します。gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
お疲れさまでした。TodoMVC はウェブバンドルになりました。
このバンドルには他の選択肢があり、今後さらに増える予定です。go/bundle
CLI では、HAR ファイルまたはリソース URL のカスタムリストを使用してウェブバンドルを作成できます。go/bundle
の詳細については、GitHub リポジトリをご覧ください。バンドル用の試験運用版 Node.js モジュール wbn
を試すこともできます。wbn
はまだ開発の初期段階です。
ウェブバンドルの試用
Web Bundle を試すには:
- 実行中の Chrome のバージョンを確認するには、
about://version
に移動してください。バージョン 80 以降を実行している場合は、次の手順をスキップしてください。 - Chrome 80 以降を使用していない場合は、Chrome Canary をダウンロードします。
about://flags/#web-bundles
を開きます。[ウェブバンドル] フラグを [有効] に設定します。
Chrome を再起動します。
パソコンの場合は、Chrome に
todomvc.wbn
ファイルをドラッグ&ドロップします。Android の場合は、ファイル管理アプリでタップします。
すべてが魔法のように機能します。
他のサンプルウェブバンドルを試すこともできます。
- web.dev.wbn は、2019 年 10 月 15 日時点の web.dev サイト全体のスナップショットです。
- proxx.wbn: PROXX は、オフラインで動作するマインスイーパーのクローンです。
- 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 のバグを報告してください。
- 仕様に関するディスカッションやツールへの貢献も歓迎します。仕様リポジトリで詳細をご覧ください。
謝辞
仕様に貢献し、Canary の機能を開発し、この記事をレビューしてくれた、素晴らしい Chrome エンジニアリング チームである坂本久二ひこ、Tsuyoshi Horo、豊島卓、安田紀子、Jeffrey Yasskin の各氏に敬意を表したいと思います。標準化プロセスにおいて、Dan York は IETF の議論の推進に協力してきました。また、パブリッシャーが実際に何を必要としているのか、Dave Cramer も重要なリソースです。また、preact-todomvc の素晴らしい協力とフレームワーク改善への落ち着きのない努力をしてくれた Jason Miller にも感謝します。