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 membuka kasus penggunaan baru untuk web. Bayangkan sebuah dunia di mana Anda dapat:
- Membuat konten Anda sendiri dan mendistribusikannya dalam berbagai cara tanpa harus dibatasi ke jaringan
- Berbagi aplikasi web atau konten web dengan teman melalui Bluetooth atau Wi-Fi Langsung
- Simpan situs Anda di USB atau bahkan hosting di jaringan lokal Anda
Web Bundle API adalah proposal terbaru yang memungkinkan Anda melakukan semua ini.
Kompatibilitas browser
Web Bundle API saat ini hanya didukung di browser berbasis Chromium di flag eksperimental.
Memperkenalkan Web Bundle API
Paket Web adalah format file untuk mengenkapsulasi satu atau beberapa resource HTTP dalam dalam satu file. Paket ini dapat mencakup satu atau lebih file HTML, file JavaScript, gambar, atau stylesheet.
Paket Web, yang dulu dikenal sebagai Paket HTTP Exchanges, adalah bagian dari Web Packaging proposal.
![Gambar yang menunjukkan bahwa Web Bundle adalah kumpulan resource web.](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=6&hl=id)
Resource HTTP di Paket Web diindeks oleh URL permintaan, dan dapat secara opsional dilengkapi dengan tanda tangan yang menjamin resource itu. Tanda tangan memungkinkan {i>browser<i} memahami dan memverifikasi dari mana setiap sumber daya berasal, dan memperlakukan masing-masing sumber daya sebagai dari asalnya yang sebenarnya. Ini mirip dengan cara Signed HTTP Exchanges, sebuah fitur untuk menandatangani sumber daya HTTP tunggal, akan ditangani.
Artikel ini membahas apa itu Web Bundle 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 disajikan dengan MIME application/webbundle
. Anda dapat membaca hal ini selengkapnya di Struktur tingkat teratas
dalam draf spesifikasi.
Paket Web memiliki beberapa fitur unik:
- Mengenkapsulasi beberapa halaman, memungkinkan pemaketan situs yang lengkap menjadi satu file
- Mengaktifkan JavaScript yang dapat dieksekusi, tidak seperti MHTML
- Menggunakan Varian HTTP untuk melakukan
negosiasi konten, yang memungkinkan internasionalisasi dengan
Accept-Language
header meskipun paket digunakan secara offline - Dimuat dalam konteks asalnya saat ditandatangani secara kriptografi oleh penayangnya
- Memuat hampir seketika saat disajikan secara lokal
Fitur-fitur ini membuka beberapa skenario. Satu skenario yang umum adalah kemampuan untuk membangun aplikasi web mandiri yang mudah dibagikan dan digunakan tanpa koneksi internet. Misalnya, Anda berada di pesawat dari Tokyo ke San Francisco dengan teman Anda. Anda tidak menyukai hiburan dalam pesawat. Temanmu memainkan permainan game web bernama PROXX, dan memberi tahu Anda bahwa mereka mendownload game tersebut sebagai Paket sebelum naik ke pesawat. Fitur ini berfungsi dengan sempurna saat offline. Sebelum Web Bundle, ceritanya akan berakhir di sana dan Anda harus bergantian bermain game di perangkat teman Anda, atau cari aplikasi lain untuk baik. Namun dengan Web Bundle, berikut yang kini dapat Anda lakukan:
- Minta teman untuk 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 perangkatmu dan coba kalahkan game temanmu skor.
Berikut video yang menjelaskan skenario ini.
Seperti yang Anda lihat, Paket Web dapat berisi setiap resource, sehingga berfungsi secara offline dan dimuat secara instan.
Membuat Paket Web
CLI go/bundle
saat ini adalah
cara termudah untuk memaketkan
sebuah {i>website<i}. go/bundle
adalah implementasi referensi dari Web Bundle
spesifikasi bawaan Go.
- Instal Go.
Instal
go/bundle
.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
Buat clone repositori preact-todomvc dan bangun aplikasi web untuk bersiap-siap menggabungkan sumber daya.
git clone https://github.com/developit/preact-todomvc.git cd preact-todomvc npm i npm run build
Gunakan perintah
gen-bundle
untuk membuat file.wbn
.gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
Selamat! TodoMVC kini menjadi Paket Web.
Ada opsi lain untuk pemaketan dan opsi lainnya akan segera hadir. CLI go/bundle
memungkinkan Anda membuat Web Bundle
menggunakan file HAR atau daftar kustom
URL. Buka repo GitHub untuk mempelajari lebih lanjut
tentang go/bundle
. Anda juga dapat mencoba modul Node.js eksperimental untuk pemaketan,
wbn
Perhatikan bahwa wbn
masih dalam tahap awal proses
pengembangan produk.
Bermain-main dengan Web Bundle
Untuk mencoba Paket Web:
- Buka
about://version
untuk melihat versi Chrome yang Anda jalankan. Jika Anda menjalankan versi 80 atau 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 Web Bundle ke Enabled.
Mengaktifkan Paket Web di about://flags
Luncurkan ulang Chrome.
Tarik lalu lepas file
todomvc.wbn
ke Chrome jika Anda menggunakan desktop, atau ketuk file tersebut di file jika Anda menggunakan Android.
Semuanya bekerja secara ajaib.
Anda juga dapat mencoba contoh paket web lainnya:
- web.dev.wbn adalah cuplikan 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 per aspek dari berbagai format kompresi gambar, dengan dukungan untuk mengubah ukuran dan memformat konversi.
Kirim masukan
Implementasi Web Bundle API di Chrome bersifat eksperimental dan tidak lengkap. Tidak semuanya berfungsi dan mungkin gagal atau error. Itu sebabnya yang berada di balik flag eksperimental. Namun, API tersebut sudah cukup siap bagi Anda untuk menjelajahinya di Chrome. Umpan balik dari pengembang web sangat penting untuk desain API baru, jadi cobalah dan sampaikan pendapat Anda kepada orang yang bekerja di Web Bundle.
- Kirim masukan umum ke webpackage-dev@chromium.org.
- Jika Anda memiliki masukan tentang spesifikasi, kunjungi https://github.com/WICG/webpackage/issues/new untuk melaporkan 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.
- Kontribusi apa pun pada diskusi spesifikasi dan alat juga lebih dari selamat datang. Buka repositori spesifikasi untuk ikut serta.
Konfirmasi
Kami ingin berterima kasih kepada tim teknik Chrome yang luar biasa, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda, dan Jeffrey Yasskin yang bekerja keras berkontribusi pada kami, membangun fitur pada 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 gelisah untuk membuat kerangka kerja menjadi lebih baik.