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

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

Yusuke Utsunomiya
Yusuke Utsunomiya
X ホームページ
Kenji Baheux
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 type="x-smartling-placeholder">
</ph> ウェブバンドルがウェブリソースのコレクションであることを示す図。 <ph type="x-smartling-placeholder">
</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 より前 バンドルでストーリーは終了し 友だちのデバイスでゲームをプレイしたり、 あります。一方、ウェブバンドルを使用すると、次のようなことができます。

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

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

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

ウェブバンドルのビルド

go/bundle CLI は現在、 ウェブサイトをバンドルする最も簡単な方法です。go/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 はウェブバンドルになりました。

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

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

Web Bundle を試すには:

  1. about://version にアクセスして、お使いの Chrome のバージョンを確認してください。バージョンを実行している場合は、 80 以降の場合は次の手順はスキップします。
  2. Chrome 80 以外をご利用の場合は、Chrome Canary をダウンロードします。 以降のバージョンです。
  3. about://flags/#web-bundles を開きます。

  4. [ウェブバンドル] フラグを [有効] に設定します。

    <ph type="x-smartling-placeholder">
    </ph> about://flags のスクリーンショット <ph type="x-smartling-placeholder">
    </ph> about://flags でウェブバンドルを有効にする

  5. Chrome を再起動します。

  6. パソコンを使用している場合は、Chrome に todomvc.wbn ファイルをドラッグ&ドロップするか、ファイル内でタップします 管理アプリを使用します。

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

<ph type="x-smartling-placeholder">
</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 が登場します。ぜひ試してみて、ウェブバンドルに携わる人たちに感想をお聞かせください。

謝辞

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