Mulai Menggunakan Web Bundle

Bagikan situs sebagai satu file melalui Bluetooth dan jalankan secara offline dalam konteks origin Anda

Yusuke Utsunomiya

Twitter Halaman Beranda

Kenji Baheux

Peringatan: Implementasi eksperimental navigasi ke Web Bundle telah dihapus dari Chrome pada Februari 2023.

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

• Membuat konten Anda sendiri dan mendistribusikannya dengan berbagai cara tanpa dibatasi pada jaringan
• Bagikan aplikasi web atau konten web kepada teman melalui Bluetooth atau Wi-Fi Langsung
• Bawa situs Anda di USB Anda sendiri atau bahkan hosting situs di jaringan lokal Anda

Web Bundle API adalah proposal paling canggih yang memungkinkan Anda melakukan semua ini.

Kompatibilitas browser

Web Bundle API saat ini hanya didukung di browser berbasis Chromium dengan tanda eksperimental.

Memperkenalkan Web Bundle API

Paket Web 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 secara resmi dikenal sebagai Bundled HTTP Exchanges, adalah bagian dari proposal Web Packaging.

Cara kerja Paket Web

Resource HTTP di Paket Web diindeks oleh URL permintaan, dan secara opsional dapat dilengkapi dengan tanda tangan yang menjamin resource. Dengan tanda tangan, browser dapat memahami dan memverifikasi dari mana setiap resource berasal, serta memperlakukan masing-masing resource sebagai berasal dari asalnya yang sebenarnya. Hal ini mirip dengan cara penanganan Signed HTTP Exchanges, yakni fitur untuk menandatangani resource HTTP tunggal.

Artikel ini membahas tentang Paket Web dan cara menggunakannya.

Menjelaskan Paket Web

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

Paket Web memiliki beberapa fitur unik:

• Mengenkapsulasi beberapa halaman, memungkinkan penggabungan situs yang lengkap menjadi 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 ketika ditandatangani secara kriptografis oleh penayangnya
• Dimuat hampir seketika saat disalurkan secara lokal

Fitur ini membuka beberapa skenario. Salah satu skenario umumnya adalah kemampuan untuk membuat aplikasi web mandiri yang mudah dibagikan dan digunakan tanpa koneksi internet. Misalnya, Anda sedang dalam pesawat dari Tokyo ke San Francisco bersama teman Anda. Anda tidak suka hiburan dalam pesawat. Teman Anda memainkan game web menarik bernama PROXX, dan memberi tahu Anda bahwa dia mendownload game tersebut sebagai Paket Web sebelum naik pesawat. Berfungsi dengan sempurna secara offline. Sebelum Web Bundles, ceritanya akan berakhir di sana dan Anda harus bergantian memainkan game di perangkat teman Anda, atau mencari cara lain untuk menghabiskan waktu. Namun, dengan Paket Web, berikut hal-hal yang dapat Anda lakukan sekarang:

1. Minta teman Anda 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 Paket Web.
3. Mulai mainkan game di perangkat Anda dan coba kalahkan skor tertinggi teman Anda.

Berikut video yang menjelaskan skenario tersebut.

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

Catatan: Saat ini, Chrome 80 hanya mendukung paket yang tidak ditandatangani (yaitu, Paket Web tanpa tanda tangan origin). Pemaketan PROXX tanpa tanda tangan tidak berfungsi dengan baik karena masalah lintas asal pekerja web. Chrome sedang berupaya memperbaikinya. Sementara itu, lihat Menangani Masalah Umum di Paket Unsigned untuk mempelajari cara menghindari masalah lintas asal.

Membuat Paket Web

go/bundle CLI saat ini adalah cara termudah untuk memaketkan situs. go/bundle adalah implementasi referensi spesifikasi Paket Web bawaan di Go.

1. Instal Go.

2. Instal go/bundle.

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

3. Buat 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 sekarang menjadi Paket Web.

Terdapat opsi lain untuk pemaketan, dan masih banyak lagi yang akan tersedia. CLI go/bundle memungkinkan Anda membuat Paket Web menggunakan file HAR atau daftar kustom URL resource. Kunjungi repositori GitHub untuk mempelajari go/bundle lebih lanjut. Anda juga dapat mencoba modul Node.js eksperimental untuk pemaketan, wbn. Perlu diperhatikan bahwa wbn masih dalam tahap awal pengembangan.

Bermain-main dengan Paket Web

Untuk mencoba Web Bundle:

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 Paket Web ke Diaktifkan.

   

   Mengaktifkan Paket Web di about://flags

5. Luncurkan ulang Chrome.

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

Semuanya bekerja secara ajaib.

Implementasi Preact TodoMVC yang berfungsi secara offline sebagai paket web

Anda juga dapat mencoba contoh paket web lainnya:

• web.dev.wbn adalah snapshot dari 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 mudah dan cepat yang memungkinkan Anda melakukan perbandingan berbagai format kompresi gambar secara berdampingan, dengan dukungan untuk mengubah ukuran dan memformat konversi.

Catatan: Saat ini Anda hanya dapat membuka Paket Web yang disimpan dalam file lokal, tetapi itu hanya pembatasan sementara.

Kirim masukan

Penerapan Web Bundle API di Chrome bersifat eksperimental dan tidak lengkap. Tidak semuanya berfungsi dan mungkin gagal atau macet. Itu sebabnya flag ini berada di balik penanda eksperimental. Namun, API ini sudah cukup siap untuk dijelajahi di Chrome. Masukan dari developer web sangat penting untuk desain API baru, jadi silakan mencobanya dan beri tahu pendapat Anda kepada orang-orang yang menangani Paket Web.

• Kirim masukan umum ke [e-mail].
• Jika Anda memiliki masukan tentang spesifikasinya, buka https://github.com/WICG/webpackage/issues/new untuk mengajukan masalah spesifikasi baru, atau kirim email ke [e-mail].
• Jika Anda menemukan masalah pada perilaku Chrome, buka https://crbug.com/new untuk melaporkan bug Chromium.
• Kami juga mengharapkan kontribusi apa pun pada diskusi dan alat spesifikasi. Buka repositori spesifikasi untuk terlibat.

Ucapan terima kasih

Kami ingin menyapa tim engineering Chrome yang luar biasa, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda, dan Jeffrey Yasskin yang telah bekerja keras berkontribusi dalam spesifikasi ini, membangun 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 apa yang sebenarnya dibutuhkan penerbit. Kami juga ingin berterima kasih kepada Jason Miller atas preact-todomvc yang luar biasa dan upaya gelisahnya dalam menjadikan framework ini lebih baik.