Web Bundlesって？
アプリケーション(ウェブサイト)を1個のファイルに纏めたファイル形式.wbn
- ネットワーク接続なしでアプリケーションを
.wbn形式によりBluetoothやWi-Fiでシェアできる
などなど
https://web.dev/web-bundles/
※現在はGoogle Chrome version 80 later or Google Chrome Canaryの拡張フラグをオンにした状態のみで閲覧可能な模様。
導入してみる
おなじみNode.jsのnpmでもビルド可能です。
※npm版は現時点でorigin-signeビルドに対応していない模様
- プロジェクトディレクトリ&成果物ディレクトリを用意して中に必要なファイルを入れる
── dist
├── assets
│ ├── css
│ │ └── style.css
│ ├── images
│ │ └── foo.jpg
│ └── js
│ └── app.js
├── index.html
└── pages
└── ex01
└── index.html
Golang版
-
おのおのパッケージマネージャーなどかませつつインストール
- 他言語から来た人がGoを使い始めてすぐハマったこととその答え
- https://qiita.com/mumoshu/items/0d2f2a13c6e9fc8da2a4
-
go bundleも必要なので入れる
$ go get -u github.com/WICG/webpackage/go/bundle/cmd/...
- PATHを通す
$ echo 'export GOPATH="$HOME/.go"' >> ~/.bash_profile
$ echo 'export GOPATH="$GOPATH/bin:$PATH"' >> ~/.bash_profile
- ビルドする
$ gen-bundle -dir dist -baseURL https://example.org/ -primaryURL https://example.org/ -o app.wbn
バンドル形式にも数種類オプションがある模様
https://github.com/WICG/webpackage/tree/master/go/bundle
npm版
- プロジェクトのルートディレクトリにてwbnパッケージをインストール
$ npm i -D wbn
- ビルドする
npx wbn --dir dist --baseURL https://example.org/ --output out.wbn
出来た.wbnファイルをGoogle Chrome Canaryで開く
chrome://flags/#web-bundles
URLバーに入力後、Web BundlesをEnabledにし、出来た.wbnをドラッグアンドドロップ。。。
CSS、JavaScriptや画像も文字通り1個のファイルにBundleされているようです。📦
ファイルサイズは...
distディレクトリ 312 KB
app.wbn 296 KB (Go)
out.wbn 282 KB (npm)
という感じでした。
デジタル署名を付与したBundleなども出来るようです。
.wbnの中身はCBORファイル
https://cbor.io/
[CWT入門その1] CBORによるオブジェクトのバイナリ表現
倍ナリ
文献
Get started with Web Bundles
https://github.com/WICG/webpackage/tree/master/go/bundle
https://www.npmjs.com/package/wbn
Google､Chromeウェブアプリをネイティブ並みに高速化「Web Bundles」公開
WebBundle によるコンテンツの結合と WebPackaging
2020年のWeb標準