Bagikan situs sebagai satu file melalui Bluetooth dan jalankan secara offline dalam konteks origin Anda
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.
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:
- Minta teman Anda membagikan file
.wbn
game. Misalnya, file dapat dengan mudah dibagikan secara peer-to-peer menggunakan aplikasi berbagi file. - Buka file
.wbn
di browser yang mendukung Paket Web. - 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.
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.
- Instal Go.
Instal
go/bundle
.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
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
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:
- Buka
about://version
untuk melihat versi Chrome yang Anda gunakan. Jika Anda menjalankan versi 80 atau yang lebih baru, lewati langkah berikutnya. - Download Chrome Canary jika Anda tidak menjalankan Chrome 80 atau yang lebih baru.
- Buka
about://flags/#web-bundles
. Tetapkan tanda Paket Web ke Diaktifkan.
Luncurkan ulang Chrome.
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.
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.
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 webpackage-dev@chromium.org.
- Jika Anda memiliki masukan tentang spesifikasinya, buka https://github.com/WICG/webpackage/issues/new untuk mengajukan masalah spesifikasi baru, atau kirim email ke wpack@ietf.org.
- 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.