Mulai Menggunakan Web Bundle

Membagikan situs sebagai satu file melalui Bluetooth dan menjalankannya secara offline dalam konteks origin Anda

Yusuke Utsunomiya

Kenji Baheux

Memaketkan situs lengkap sebagai satu file dan membuatnya dapat dibagikan akan membuka kasus penggunaan baru untuk web. Bayangkan dunia tempat Anda dapat:

• Buat konten Anda sendiri dan distribusikan dengan berbagai cara tanpa dibatasi oleh jaringan
• Berbagi aplikasi web atau konten web dengan teman melalui Bluetooth atau Wi-Fi Langsung
• Membawa situs Anda di USB Anda sendiri atau bahkan menghostingnya di jaringan lokal Anda sendiri

Web Bundles API adalah proposal terbaru yang memungkinkan Anda melakukan semua hal ini.

Kompatibilitas browser

Web Bundles API saat ini hanya didukung di browser berbasis Chromium di balik flag eksperimental.

Memperkenalkan Web Bundles API

Web Bundle adalah format file untuk mengenkapsulasi satu atau beberapa resource HTTP dalam satu file. File ini dapat menyertakan satu atau beberapa file HTML, file JavaScript, gambar, atau stylesheet.

Paket Web, yang sebelumnya dikenal sebagai Bundle HTTP Exchange, adalah bagian dari proposal Web Packaging.

Resource HTTP dalam Web Bundle diindeks berdasarkan URL permintaan, dan secara opsional dapat disertai tanda tangan yang menjamin resource tersebut. Tanda tangan memungkinkan browser memahami dan memverifikasi asal setiap resource, serta memperlakukan setiap resource sebagai berasal dari asal aslinya. Hal ini mirip dengan cara Signed HTTP Exchanges, fitur untuk menandatangani satu resource HTTP, ditangani.

Artikel ini menjelaskan apa yang dimaksud dengan Web Bundle dan cara menggunakannya.

Menjelaskan Paket Web

Lebih tepatnya, Web Bundle adalah file CBOR dengan ekstensi .wbn (menurut konvensi) yang memaketkan resource HTTP ke dalam format biner, dan ditayangkan dengan jenis MIME application/webbundle. Anda dapat membaca selengkapnya tentang hal ini di bagian Struktur tingkat atas dari draf spesifikasi.

Web Bundle memiliki beberapa fitur unik:

• Menggabungkan beberapa halaman, sehingga memungkinkan penggabungan situs lengkap ke dalam satu file
• Mengaktifkan JavaScript yang dapat dieksekusi, tidak seperti MHTML
• Menggunakan HTTP Variants untuk melakukan negosiasi konten, yang memungkinkan internasionalisasi dengan header Accept-Language meskipun paket digunakan secara offline
• Dimuat dalam konteks asalnya saat ditandatangani secara kriptografis oleh penayangnya
• Dimuat hampir secara instan saat ditayangkan secara lokal

Fitur ini membuka beberapa skenario. Salah satu skenario umum adalah kemampuan untuk mem-build aplikasi web mandiri yang mudah dibagikan dan digunakan tanpa koneksi internet. Misalnya, Anda berada di pesawat dari Tokyo ke San Francisco bersama teman Anda. Anda tidak menyukai hiburan dalam penerbangan. Teman Anda sedang memainkan game web yang menarik bernama PROXX, dan memberi tahu Anda bahwa ia mendownload game tersebut sebagai Web Bundle sebelum naik pesawat. Fitur ini berfungsi dengan baik secara offline. Sebelum Web Bundles, cerita akan berakhir di sana dan Anda harus bergiliran memainkan game di perangkat teman, atau mencari cara lain untuk menghabiskan waktu. Namun, dengan Web Bundle, berikut hal yang dapat Anda lakukan sekarang:

1. Minta teman untuk membagikan file .wbn game. Misalnya, file dapat dengan mudah dibagikan secara peer-to-peer menggunakan aplikasi berbagi file.
2. Buka file .wbn di browser yang mendukung Web Bundle.
3. Mulai mainkan game di perangkat Anda sendiri dan coba kalahkan skor tertinggi teman Anda.

Berikut video yang menjelaskan skenario ini.

Seperti yang dapat Anda lihat, Web Bundle dapat berisi setiap resource, sehingga dapat berfungsi secara offline dan dimuat secara instan.

Mem-build Paket Web

CLI go/bundle saat ini adalah cara termudah untuk memaketkan situs. go/bundle adalah implementasi referensi spesifikasi Web Bundle yang dibangun di Go.

1. Instal Go.

2. Instal go/bundle.

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. Clone repositori preact-todomvc dan build aplikasi web untuk bersiap memaketkan resource.

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. Gunakan perintah gen-bundle untuk mem-build file .wbn.

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

Selamat! TodoMVC kini menjadi Web Bundle.

Ada opsi lain untuk pemaketan dan opsi lainnya akan segera hadir. go/bundle CLI memungkinkan Anda membuat Paket Web menggunakan file HAR atau daftar kustom URL resource. Buka repo GitHub untuk mempelajari go/bundle lebih lanjut. Anda juga dapat mencoba modul Node.js eksperimental untuk bundling, wbn. Perhatikan bahwa wbn masih dalam tahap awal pengembangan.

Bermain-main dengan Paket Web

Untuk mencoba Paket Web:

1. Buka about://version untuk melihat versi Chrome yang Anda gunakan. Jika Anda menjalankan versi 80 atau yang lebih baru, lewati langkah berikutnya.
2. Download Chrome Canary jika Anda tidak menjalankan Chrome 80 atau yang lebih baru.
3. Buka about://flags/#web-bundles.

4. Tetapkan tanda Web Bundle ke Enabled.

   

5. Luncurkan ulang Chrome.

6. Tarik lalu lepas file todomvc.wbn ke Chrome jika Anda menggunakan desktop, atau ketuk file tersebut di aplikasi manajemen file jika Anda menggunakan Android.

Semuanya berfungsi dengan ajaib.

Anda juga dapat mencoba contoh paket web lainnya:

• web.dev.wbn adalah snapshot seluruh situs web.dev, per 15 Oktober 2019.
• proxx.wbn: PROXX adalah clone Minesweeper yang berfungsi secara offline.
• squoosh.wbn: Squoosh adalah alat pengoptimalan gambar yang praktis dan cepat yang memungkinkan Anda melakukan perbandingan berbagai format kompresi gambar secara berdampingan, dengan dukungan untuk mengubah ukuran dan format konversi.

Kirim masukan

Implementasi Web Bundle API di Chrome bersifat eksperimental dan tidak lengkap. Tidak semua hal berfungsi dan mungkin gagal atau error. Itulah sebabnya fitur ini berada di balik flag eksperimental. Namun, API tersebut sudah cukup siap bagi Anda untuk menjelajahinya di Chrome. Masukan dari developer web sangat penting untuk desain API baru, jadi harap coba dan sampaikan pendapat Anda kepada orang yang bekerja di Web Bundle.

• Kirim masukan umum ke [email protected].
• Jika Anda memiliki masukan terkait spesifikasi ini, buka https://github.com/WICG/webpackage/issues/new untuk mengajukan masalah spesifikasi baru, atau kirim email ke [email protected].
• Jika Anda menemukan masalah apa pun pada perilaku Chrome, buka https://crbug.com/new untuk melaporkan bug Chromium.
• Kontribusi apa pun untuk diskusi spesifikasi dan alat juga sangat diperlukan. Buka repo spesifikasi untuk berpartisipasi.

Ucapan terima kasih

Kami ingin mengucapkan terima kasih kepada tim engineer Chrome yang luar biasa, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda, dan Jeffrey Yasskin yang telah bekerja keras berkontribusi pada spesifikasi, mem-build fitur di Canary, dan meninjau artikel ini. Selama proses standardisasi, Dan York telah membantu menavigasi diskusi IETF dan juga Dave Cramer telah menjadi referensi yang bagus tentang hal-hal yang sebenarnya diperlukan penayang. Kami juga ingin berterima kasih kepada Jason Miller atas preact-todomvc yang luar biasa dan upayanya yang gelisah untuk membuat framework menjadi lebih baik.