「#webbundle_study」に参加してきました

勉強会メモ

  • webbundle_studyに参加してきました。

web-study.connpass.com

タイトル 発表者
Web Packaging: Web Bundles @horo
WebPackaging Spec @jxck

Web Packaging: Web Bundles

  • @horoさん

Web Packaging

  • Webリソースをひとまとめにする技術
  • W3Cで検討されている仕様
  • その中にWeb Bundles

Web Bundles

  • HTTPリソースをまとめるための仕様
  • .wbn
  • 近くにいる人にwbnをシェアすることもできる
    • アプリで
    • USBで
  • ファイルがローカルにあるので表示がはやい

Web Bundleの作り方

www.npmjs.com

Subresources Web Bundles

  • linkタグでwbnからとってくると指定できるようになる
  • htmlごとbundleするのではなくcssとかjsだけbundleするようなシーン

Page Web Bundle

  • 同一originでなくても同一originのようにロードできる
  • アセットがたくさんあるような場面で使うイメージ

Save as Web bundle

  • ページを右クリックからwbnで保存できるようにする
  • 印刷して保存するような雰囲気
    • cacheにアクセスしたりとかはできない

TWA

  • PWAをPlayストアにAndroidアプリとしてあげられる
  • 動きとしては特定のURLを開く
  • 課題として初回アクセス時オフラインだと表示できない
    • Web Bundleでかいけつできるのではないか

WebPackaging Spec

WebPackaging Spec

  • SXG
  • Web Bundles
  • Loading

Web Bundles Spec

  • どういう風にbundleが動くかしか定義してない
  • arrayをcborというフォーマットでバンドルする
  • index/response/signetureなどどこに入ってるか決まってるから全部パースしなくても欲しい情報をとれる
    • zipとかだとそういうことできないからわざわざwbnを使ってる
  • どのaccept-type来たらどのcontent-type返すかとかハンドリングできる
    • 多言語用意しておいてaccept-languageによってどれ返すか制御したりとかが想定ユースケース
    • 配布することも考えると多言語全て入れておいた方がいいかもとかっていう話も
  • bundleしてる各ファイルに対して署名しないといけない

Serve Web Bundle

  • HTTP
Content-Type: application/webbundle
X-Content-Type-Options: nosniff