Mulai Menggunakan Web Bundle

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

Yusuke Utsunomiya

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 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.

Cara kerja Paket Web

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:

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

Catatan: Saat ini Chrome 80 hanya mendukung paket yang tidak ditandatangani (yaitu, Paket Web tanpa tanda tangan origin). Memaketkan PROXX tanpa tanda tangan tidak berfungsi karena masalah lintas origin pekerja web. Chrome sedang berupaya memperbaiki hal ini. Di beberapa Untuk sementara, lihat Mengatasi Masalah Umum dalam Laporan yang Tidak Bertanda Tangan Paket untuk mempelajari cara menghindari masalah lintas origin.

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.

1. Instal Go.

2. Instal go/bundle.

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

3. 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
   

4. 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:

1. Buka about://version untuk melihat versi Chrome yang Anda jalankan. Jika Anda menjalankan versi 80 atau 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.

   

   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 file tersebut di file jika Anda menggunakan Android.

Semuanya bekerja secara ajaib.

Implementasi Preact dari TodoMVC yang berfungsi secara offline sebagai paket web

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.

Catatan: Saat ini Anda hanya dapat menavigasi ke Paket Web yang disimpan di file lokal, tetapi itu hanya merupakan pembatasan sementara.

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 [e-mail].
• Jika Anda memiliki masukan tentang spesifikasi, kunjungi https://github.com/WICG/webpackage/issues/new untuk melaporkan 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.
• 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.