Web sitelerini Bluetooth üzerinden tek bir dosya olarak paylaşın ve kaynağınızın bağlamında çevrimdışı çalıştırın
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.
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:
- 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. .wbn
dosyasını Web Bundle'ı destekleyen bir tarayıcıda açın.- 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.
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.
- Go'yu yükleyin.
go/bundle
uygulamasını yükleyin.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
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
.wbn
dosyası oluşturmak içingen-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:
- 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. - Chrome 80 kullanmıyorsanız Chrome Canary'yi indirin veya daha sonra.
about://flags/#web-bundles
adlı kişiyi aç.Web Bundle işaretini Etkin olarak ayarlayın.
Chrome'u yeniden başlatın.
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.
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.
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: webpackage-dev@chromium.org adresini ziyaret edin.
- Spesifikasyonlarla ilgili geri bildirimde bulunmak isterseniz https://github.com/WICG/webpackage/issues/new veya wpack@ietf.org 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.