このページは Cloud Translation API によって翻訳されました。

ウェブバンドルのスタートガイド

Bluetooth 経由でウェブサイトを 1 つのファイルとして共有し、配信元のコンテキストでオフラインで実行します

Yusuke Utsunomiya

Kenji Baheux

ウェブサイト全体を 1 つのファイルにまとめて共有できるようにするウェブの新たなユースケースを切り拓きます。次のことができる世界を想像してみてください。

独自のコンテンツを作成して、さまざまな方法で配布できます。制限あり
ウェブアプリやウェブコンテンツを Bluetooth または Wi-Fi Direct で友だちと共有できます
サイトを自分の USB で運用、または独自のローカルネットワークでホストする

Web Bundles API は、これらすべてを可能にする最先端の提案です。

ブラウザの互換性

現在、Web Bundles API は、次以降の Chromium ベースのブラウザでのみサポートされています使用します。

Web Bundles API のご紹介

ウェブバンドルは、1 つ以上の HTTP リソースを作成します。1 つ以上の HTML ファイル、JavaScript ファイル、使用できます。

ウェブバンドル（正式にはバンドル HTTP エクスチェンジ）は、ウェブパッケージングの一部提案です

ウェブバンドルがウェブリソースのコレクションであることを示す図。 — </ph> Web Bundle の仕組み

ウェブバンドル内の HTTP リソースは、リクエスト URL でインデックス登録され、必要に応じてリソースが保証される署名が付属しています署名を使用すると、ブラウザは各リソースがどこから来たものなのかを理解して検証し、生成します。これは、Signed HTTP Exchange の仕組みとよく似ていますが、単一の HTTP リソースに署名する機能が処理されます。

この記事では、ウェブバンドルの概要と使用方法について説明します。

Web Bundle について

正確に言うと、ウェブバンドルは .wbn 拡張子（慣例により）を持つ CBOR ファイルです。 HTTP リソースをバイナリ形式にパッケージ化し、application/webbundle MIME で提供するあります。詳しくは、最上位の構造をご覧ください。セクションをご覧ください。

ウェブバンドルには、次のような複数の独自の機能があります。

複数のページをカプセル化して、ウェブサイト全体を 1 つのファイルにまとめることができます
MHTML とは異なり、実行可能な JavaScript を有効にする
HTTP バリアントを使用 Accept-Language との国際化を可能にするコンテンツネゴシエーションバンドルがオフラインで使用されている場合も
パブリッシャーが暗号で署名すると、元のコンテキストで読み込まれます
ローカルで提供した場合、ほぼ瞬時に読み込まれる

これらの機能により、さまざまなシナリオが可能になります。一般的なシナリオの一つは、簡単に共有できて、インストール不要で使いやすい自己完結型のウェブアプリをインターネット接続ですたとえば、東京からサンフランシスコまでの飛行機で、できます。機内でのエンターテイメントが気に入りません。友だちが面白そうなプレイをしています PROXX という名前のウェブゲームが表示され、ゲームをウェブバンドルは、飛行機の搭乗前に行ってください。オフラインで問題なく動作します。Web より前ストーリーはバンドルで終わらせ友だちのデバイスでゲームをプレイしたり、あります。ウェブバンドルを使用すると、次のようなことができます。

友だちにゲームの .wbn ファイルを共有してもらいます。たとえば、ファイル共有アプリを使ってピアツーピアで簡単に共有できます。
Web Bundle に対応しているブラウザで .wbn ファイルを開きます。
自分のデバイスでゲームのプレイを開始し、友だちのハイレベルに挑戦しましょうスコアです。

次の動画では、このシナリオについて説明しています。

ご覧のとおり、Web Bundle にはすべてのリソースを含めることができるため、オフラインでも使用できます。瞬時に読み込みます。

ウェブバンドルのビルド

go/bundle CLI は現在、ウェブサイトをバンドルする最も簡単な方法です。go/bundle は、ウェブバンドルのリファレンス実装です。 Go に組み込まれている仕様。

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 はウェブバンドルになりました。

バンドルのオプションは他にもあり、今後さらに増える予定です。go/bundle CLI を使用すると、HAR ファイルまたはリソースのカスタムリストを使用して、Web Bundle をビルドできます。できます。GitHub リポジトリで詳細を確認する「go/bundle」について。試験運用版の Node.js モジュールを使用して、バンドル、 wbn。なお、wbn はまだ初期段階であり、必要があります。

ウェブバンドルを使ってみる

Web Bundle を試すには:

about://version にアクセスして、お使いの Chrome のバージョンを確認してください。バージョンを実行している場合は、 80 以降の場合は次の手順はスキップします。
Chrome 80 以外をご利用の場合は、Chrome Canary をダウンロードします。以降のバージョンです。
about://flags/#web-bundles を開きます。
[ウェブバンドル] フラグを [有効] に設定します。
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> about://flags でウェブバンドルを有効にする
Chrome を再起動します。
パソコンを使用している場合は、Chrome に todomvc.wbn ファイルをドラッグ&ドロップするか、ファイル内でタップします管理アプリを使用します。

すべてが魔法のように機能します。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> オフラインで動作する TodoMVC の Preact 実装（ウェブバンドルとして）

他のサンプルのウェブバンドルを試すこともできます。

web.dev.wbn は web.dev サイト全体のスナップショット（2019 年 10 月 15 日時点）
proxx.wbn: PROXX は、オフラインで動作するマインスイーパのクローンです。
squoosh.wbn: Squoosh は、便利で高速な画像最適化ツールで、を使用すると、さまざまな画像圧縮形式を並べて比較できます。サイズ変更や書式設定の変換にも使用できます

で確認できます。

フィードバックを送信

Chrome での Web Bundle API の実装は試験運用版であり、不完全です。すべてが機能しているわけではなく、失敗したりクラッシュしたりする可能性があります。だからこそテストフラグに引っかからないことですしかし、この API は Chrome で試す準備ができています。ウェブデベロッパーからのフィードバックは、新しい API が登場します。ぜひ試してみて、ウェブバンドルに携わる人たちに感想をお聞かせください。

一般的なフィードバックを送信する webpackage-dev@chromium.org を使用します。
仕様に関するフィードバックがある場合は、訪問してください https://github.com/WICG/webpackage/issues/new 新しい仕様に関する問題を報告するか、wpack@ietf.org までメールでお問い合わせください。
Chrome の動作に問題がある場合は、 https://crbug.com/new で報告してください。
仕様についての議論やツールへの貢献も、ようこそ。参加するには、仕様リポジトリにアクセスしてください。

謝辞

Chrome エンジニアリングチーム一同、皆様のご協力に感謝いたします。坂本国比子、ホロツヨシ、豊島武、安田木威子、ジェフリーヤスキンは、 Canary での機能の構築、この記事の確認）。実施中 Dan York は、 IETF のディスカッションに加え、Dave Cramer 氏はパブリッシャーが実際に必要としているリソースについて簡単に説明しますまた、素晴らしい preact-todomvc と彼の Jason Miller 氏にも感謝しますフレームワークの改善に絶えず努力しています。