Web Paketlerini kullanmaya başlayın

Web sitelerini Bluetooth üzerinden tek bir dosya olarak paylaşın ve kaynağınızın bağlamında çevrimdışı çalıştırın

Yusuke Utsunomiya

Kenji Baheux

Uyarı: Web paketlerine gitmenin deneysel uygulaması şuydu: Şubat 2023'te Chrome'dan kaldırılmıştır.

Tüm bir web sitesini tek bir dosya olarak paketleme ve paylaşılabilir hale getirme web için yeni kullanım alanları sunar. Aşağıdakileri yapabileceğiniz bir dünya hayal edin:

• Kendi içeriğinizi oluşturun ve ağla sınırlı
• Bluetooth veya Kablosuz Doğrudan Bağlantı üzerinden arkadaşlarınızla bir web uygulaması veya web içeriği paylaşma
• Sitenizi kendi USB'nizde taşıyın veya kendi yerel ağınızda barındırın

Web Bundle API, tüm bunları gerçekleştirmenizi sağlayan, gelişmiş bir tekliftir.

Tarayıcı uyumluluğu

Web Bundle API şu anda yalnızca deneysel bir işaret.

Web Bundle API ile tanışın

Web Bundle, bir veya daha fazla HTTP kaynağını ekleyebilirsiniz. Bir veya daha fazla HTML dosyası, JavaScript dosyası, veya stil sayfaları olabilir.

Gruplandırılmış HTTP Exchange'leri olarak bilinen web paketleri Web Paketi'nin bir parçasıdır. teklif verirsiniz.

Web paketlerinin işleyiş şekli

Bir Web Bundle'daki HTTP kaynakları, istek URL'leri tarafından dizine eklenir ve isteğe bağlı olarak kaynakları ortaya koyan imzalar taşır. İmzalar, tarayıcıların şunları yapmasına olanak tanır: her bir kaynağın nereden geldiğini anlayıp doğrulayın ve her birini çok önemlidir. Bu, İmzalanmış HTTP Takasları'na benzer. tek bir HTTP kaynağını imzalama özelliği ele alınır.

Bu makale, Web Bundle'ın ne olduğu ve nasıl kullanılacağı konusunda size yol gösterir.

Web Paketlerini Açıklama

Hassas bir şekilde belirtmek gerekirse Web Bundle, .wbn uzantısına sahip (geleneksel olarak) bir CBOR dosyasıdır. HTTP kaynaklarını ikili biçimde paketler ve application/webbundle MIME ile sunulur türü. Bu konu hakkında daha fazla bilgiye Üst düzey yapı bölümünden ulaşabilirsiniz. bölümüne ekleyin.

Web paketlerinin birden çok benzersiz özelliği vardır:

• Birden fazla sayfayı içerir ve tüm web sitesinin tek bir dosyada gruplandırılmasına olanak tanır.
• MHTML'den farklı olarak yürütülebilir JavaScript'i etkinleştirir
• Şunları yapmak için HTTP Varyantlarını kullanır: Accept-Language ile uluslararasılaştırmaya olanak tanıyan içerik pazarlığı paket çevrimdışı kullanılsa bile başlık
• Yayıncısı tarafından kriptografik olarak imzalandığında kaynağı bağlamında yüklenir
• Yerel olarak sunulduğunda neredeyse anında yüklenir

Bu özellikler birden fazla senaryoya uygundur. En yaygın senaryolardan biri, olmadan kolayca paylaşılabilen ve kullanabileceğiniz bağımsız bir web uygulaması internet bağlantısı. Örneğin, Tokyo'dan San Francisco'ya giden bir uçaktasınız ve arkadaşınızdır. Uçaktaki eğlence içeriklerinden hoşlanmıyorsunuz. Arkadaşınız ilginç bir oyun oynuyor PROXX adlı bir web oyunu oynuyor ve oyunu web sitesi olarak indirdiğini söylüyor Uçağa binmeden önce paketi. Çevrimdışı olarak sorunsuz çalışır. Web'den Önce hikaye burada biter ve her biri için sırayla arkadaşınızın cihazında oyunu oynayabilir veya gerekir. Ancak Web Paketleri ile artık şunları yapabilirsiniz:

1. Arkadaşınızdan oyunun .wbn dosyasını paylaşmasını isteyin. Örneğin, bir dosya paylaşım uygulaması kullanılarak eşler arası kolayca paylaşılabilir.
2. .wbn dosyasını Web Bundle'ı destekleyen bir tarayıcıda açın.
3. Oyunu kendi cihazınızda oynamaya başlayın ve arkadaşınızın en yüksek puanı almaya çalışın puanı.

Bu senaryoyu açıklayan bir videoyu burada bulabilirsiniz.

Gördüğünüz gibi Web Bundle her kaynağı içerebildiğinden çevrimdışı olarak da çalışır ve anında yüklenir.

Not: Chrome 80 şu anda yalnızca imzalanmamış paketleri (yani kaynak imzaları) sağlamanız gerekir. PROXX paketi imza olmadan paket haline getirilemiyor bu soruna meyilli olabilir. Chrome bu sorunu düzeltmek için çalışıyor. İçinde Bu nedenle, İmzasız'da Yaygın Sorunları Giderme başlıklı Paketler inceleyin.

Web Paketleri Oluşturma

go/bundle CLI şu anda web sitesini gruplandırmanın en kolay yoludur. go/bundle, web paketlerinin referans uygulamasıdır Go'da yerleşik olarak sunulan spesifikasyonları inceleyin.

1. Go'yu yükleyin.

2. go/bundle uygulamasını yükleyin.

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

3. preact-todomvc deposunu klonlama ve derleme kaynakları paket haline getirmeye hazırlanmak için web uygulamasını indirin.

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

4. .wbn dosyası oluşturmak için gen-bundle komutunu kullanın.

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

Tebrikler! TodoMVC artık bir Web Bundle oldu.

Paketleme için başka seçenekler de mevcuttur ve yakında daha birçok seçenek sunulacak. go/bundle KSA HAR dosyası veya özel bir kaynak listesi kullanarak Web Paketi oluşturmanızı sağlar URL'ler. Daha fazla bilgi edinmek için GitHub deposu'nu ziyaret edin go/bundle hakkında. Gruplandırma için deneysel Node.js modülünü deneyebilirsiniz. wbn. Not: wbn, henüz geliştirme aşamasındadır. bahsedeceğim.

Web Bundle'larla denemeler

Bir Web Bundle'ı denemek için:

1. Hangi Chrome sürümünü kullandığınızı görmek için about://version adresine gidin. Sürümü kullanıyorsanız 80 veya sonraki bir sürüm kullanıyorsanız sonraki adımı atlayın.
2. Chrome 80 kullanmıyorsanız Chrome Canary'yi indirin veya daha sonra.
3. about://flags/#web-bundles adlı kişiyi aç.

4. Web Bundle işaretini Etkin olarak ayarlayın.

   

   about://flags Grubunda Web Paketleri Etkinleştiriliyor

5. Chrome'u yeniden başlatın.

6. Masaüstündeyseniz todomvc.wbn dosyasını Chrome'a sürükleyip bırakın veya bir dosyada dokunun yönetim uygulamasından da yararlanabilirsiniz.

Her şey sihirli bir şekilde çalışıyor.

TodoMVC'nin web paketi olarak çevrimdışı çalışan Preact uygulaması

Diğer örnek web paketlerini de deneyebilirsiniz:

• web.dev.wbn, bir web.dev sitesinin 15 Ekim 2019 itibarıyla tamamının anlık görüntüsü.
• proxx.wbn: PROXX, çevrimdışı çalışan bir Mayın Tarlası klonudur.
• squoosh.wbn: Squoosh, kullanımı kolay ve hızlı bir görsel optimizasyon aracıdır çeşitli resim sıkıştırma biçimlerini yan yana karşılaştırmanıza olanak tanır. yeniden boyutlandırma ve biçimlendirme.

ziyaret edin.

Not: Şu anda yalnızca yerel bir dosyada depolanan bir Web Bundle'a gidebilirsiniz ancak bu geçici bir kısıtlamadır.

Geri bildirim gönder

Chrome'daki Web Bundle API uygulaması deneyseldir ve eksiktir. Her şey düzgün çalışmaz ve uygulamalar başarısız olabilir veya kilitlenebilir. Bu nedenle ardında yatıyor. Ancak API, Chrome'da incelemeniz için hazır. Web geliştiricilerinin geri bildirimi, web sitelerinin tasarımı Bu nedenle lütfen deneyin ve Web Bundle üzerinde çalışan kişilere düşüncelerinizi söyleyin.

• Genel geri bildiriminizi şu adrese gönderin: [e-mail] adresini ziyaret edin.
• Spesifikasyonlarla ilgili geri bildirimde bulunmak isterseniz https://github.com/WICG/webpackage/issues/new veya [e-mail] adresine e-posta gönderin.
• Chrome'un davranışında herhangi bir sorun bulursanız şu sayfayı ziyaret edin: Chromium hatası bildirmek için https://crbug.com/new adresini ziyaret edin.
• Spesifikasyon tartışmalarına ve araçlarına yapılacak her türlü katkı, hoş geldiniz. Dahil olmak için spesifikasyon deposunu ziyaret edin.

Teşekkür

Harika Chrome mühendislik ekibini tebrik ederiz. Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda ve Jeffrey Yasskin, bu makaleye göz atacağız. Etkinlik sırasında Dan York'un bu süreçte sağladığı katkı, IETF tartışması ve ayrıca Dave Cramer, yayıncıların gerçekten ihtiyaç duydukları şeylerle ilgili harika bir kaynaktır. Ayrıca, harika bir preact-todomvc ve başarıları için Jason Miller'a da sağlamak için sürekli çaba sarf etmeniz gerekecek.