Web sitelerini Bluetooth üzerinden tek bir dosya olarak paylaşın ve bunları kaynağınızın bağlamında çevrimdışı olarak çalıştırın
Bir web sitesinin tamamını tek bir dosyada toplamak ve paylaşılabilir hale getirmek, web için yeni kullanım alanlarına olanak tanır. Aşağıdakileri yapabileceğiniz bir dünya hayal edin:
- Ağla sınırlı kalmadan kendi içeriğinizi oluşturun ve her türlü şekilde dağıtın
- Bluetooth veya kablosuz bağlantı üzerinden bir web uygulamasını ya da web içeriğini arkadaşlarınızla paylaşma
- Sitenizi kendi USB'nizde taşıyabilir veya kendi yerel ağınızda barındırabilirsiniz.
Web Bundles API, tüm bunları yapmanıza olanak tanıyan son teknoloji bir tekliftir.
Tarayıcı uyumluluğu
Web Bundles API şu anda yalnızca deneysel bir işaretin arkasında Chromium tabanlı tarayıcılarda desteklenmektedir.
Web Bundles API'yi kullanıma sunuyoruz
Web paketi, bir veya daha fazla HTTP kaynağını tek bir dosyada kapsüllemek için kullanılan bir dosya biçimidir. Bir veya daha fazla HTML dosyası, JavaScript dosyası, resim veya stil sayfası içerebilir.
Daha resmi olarak Gruplandırılmış HTTP Takası olarak bilinen web paketleri, Web Paketleme teklifinin bir parçasıdır.
Web paketindeki HTTP kaynakları, istek URL'lerine göre dizine eklenir ve isteğe bağlı olarak kaynakların güvenilirliğini onaylayan imzalarla birlikte gelebilir. İmzalar, tarayıcıların her kaynağın nereden geldiğini anlayıp doğrulamasına olanak tanır ve her kaynağı gerçek kaynağından geliyormuş gibi ele alır. Bu, tek bir HTTP kaynağını imzalamaya yönelik bir özellik olan İmzalanmış HTTP Değişimleri'nin işlenmesine benzer.
Bu makalede, web paketinin ne olduğu ve nasıl kullanılacağı açıklanmaktadır.
Web Bundle'ları açıklama
Daha doğrusu, web paketi, HTTP kaynaklarını ikili biçimde paketleyen ve application/webbundle
MIME türüyle sunulan .wbn
uzantılı (örf ve adet uyarınca) bir CBOR dosyasıdır. Bu konuda daha fazla bilgiyi spesifikasyon taslağının Üst düzey yapı bölümünde bulabilirsiniz.
Web paketlerinin birden fazla benzersiz özelliği vardır:
- Birden fazla sayfayı kapsar ve bir web sitesinin tamamını tek bir dosyada toplamayı sağlar
- MHTML'den farklı olarak yürütülebilir JavaScript'i etkinleştirir
- İçerik pazarlığı yapmak için HTTP varyantlarını kullanır. Bu sayede, paket çevrimdışı kullanılsa bile
Accept-Language
üstbilgisinin uluslararasılaştırılması sağlanır. - Yayıncısı tarafından kriptografik olarak imzalandığında kaynağının bağlamında yüklenir
- Yerel olarak sunulduğunda neredeyse anında yüklenir
Bu özellikler birden fazla senaryoyu açar. Paylaşılması kolay ve internet bağlantısı olmadan kullanılabilen bağımsız bir web uygulaması oluşturma, yaygın olarak karşılaşılan senaryolardan biridir. Örneğin, arkadaşınızın yanında Tokyo'dan San Francisco'ya giden bir uçakta olduğunuzu varsayalım. Uçuş sırasında sunulan eğlenceyi beğenmemeniz Arkadaşınız PROXX adlı ilginç bir web oyunu oynuyor ve uçağa binmeden önce oyunu Web Paketi olarak indirdiğini söylüyor. Çevrimdışı olarak sorunsuz çalışır. Web Paketleri'nden önce hikaye burada sona ererdi ve arkadaşınızın cihazında sırayla oyun oynamanız veya zaman geçirmek için başka bir şey bulmanız gerekirdi. Ancak Web Paketleri ile artık şunları yapabilirsiniz:
- Arkadaşınızdan oyunun
.wbn
dosyasını paylaşmasını isteyin. Örneğin, dosya bir dosya paylaşım uygulaması kullanılarak kolayca eşler arası olarak paylaşılabilir. .wbn
dosyasını Web Paketleri'ni 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ını geçmeye çalışın.
Bu senaryoyu açıklayan bir videoyu burada bulabilirsiniz.
Gördüğünüz gibi, web paketi her kaynağı içerebilir. Bu sayede paket, çevrimdışı çalışır ve anında yüklenir.
Web Bundle'ları oluşturma
go/bundle
CLI, şu anda bir web sitesini paketlemenin en kolay yoludur. go/bundle
, Go'da oluşturulan Web Bundles spesifikasyonunun referans uygulamasıdır.
- Go'yu yükleyin.
go/bundle
'ı yükleyin.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
Kaynakları paketlemeye hazırlanmak için preact-todomvc deposunu klonlayın ve web uygulamasını derleyin.
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 paketidir.
Paketleme için başka seçenekler de vardır ve daha fazlası da eklenecektir. go/bundle
CLI, HAR dosyası veya özel bir kaynak URL'si listesi kullanarak web paketi oluşturmanıza olanak tanır. go/bundle
hakkında daha fazla bilgi edinmek için GitHub deposunu ziyaret edin. Paket oluşturmak için deneysel Node.js modülünü de deneyebilirsiniz,
wbn
. wbn
özelliğinin hâlâ geliştirme aşamasının başında olduğunu unutmayın.
Web paketleriyle deneme yapma
Web paketini denemek için:
- Chrome'un hangi sürümünü kullandığınızı görmek için
about://version
adresine gidin. 80 veya sonraki bir sürümü kullanıyorsanız sonraki adımı atlayın. - Chrome 80 veya sonraki bir sürümü kullanmıyorsanız Chrome Canary'ı indirin.
about://flags/#web-bundles
adlı kişiyi aç.Web Paketleri işaretini Etkin olarak ayarlayın.
Chrome'u yeniden başlatın.
Masaüstü kullanıyorsanız
todomvc.wbn
dosyasını Chrome'a sürükleyip bırakın veya Android kullanıyorsanız dosya yönetimi uygulamasında dosyaya dokunun.
Her şey sihirli bir şekilde çalışır.
Diğer örnek web paketlerini de deneyebilirsiniz:
- web.dev.wbn, 15 Ekim 2019 itibarıyla web.dev sitesinin tamamının anlık görüntüsüdür.
- proxx.wbn: PROXX, çevrimdışı çalışan bir Mayın Tarlası klonudur.
- squoosh.wbn: Squoosh, boyutlandırma ve biçim dönüştürme desteğiyle çeşitli resim sıkıştırma biçimlerini yan yana karşılaştırmanıza olanak tanıyan kullanışlı ve hızlı bir resim optimizasyon aracıdır.
Geri bildirim gönder
Chrome'daki Web Bundle API uygulaması deneyseldir ve eksiktir. Her şey çalışmaz ve işlem başarısız olabilir veya kilitlenebilir. Bu nedenle, deneysel bir işaretin arkasındadır. Ancak API, Chrome'da keşfedebilmeniz için hazırdır. Web geliştiricilerinden gelen geri bildirimler, yeni API'lerin tasarımı için çok önemlidir. Lütfen bu özelliği deneyin ve Web Paketleri üzerinde çalışanlara fikrinizi bildirin.
- Genel geri bildirimlerinizi webpackage-dev@chromium.org adresine gönderin.
- Spesifikasyonla ilgili geri bildiriminiz varsa yeni bir spesifikasyon sorunu bildirmek için https://github.com/WICG/webpackage/issues/new adresini ziyaret edin veya wpack@ietf.org adresine e-posta gönderin.
- Chrome'un davranışında herhangi bir sorunla karşılaşırsanız https://crbug.com/new adresini ziyaret ederek Chromium hatası bildirin.
- Spesifikasyon tartışmasına ve araç setine katkıda bulunmaktan da memnuniyet duyarız. Katılmak için spec repo'yu ziyaret edin.
Teşekkür
Spesifikasyona katkıda bulunan, Canary'da özelliği oluşturan ve bu makaleyi inceleyen muhteşem Chrome mühendislik ekibine (Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda ve Jeffrey Yasskin) teşekkürlerimizi sunmak isteriz. Standartlaştırma sürecinde Dan York, IETF tartışmasında yol gösterici oldu. Ayrıca Dave Cramer, yayıncıların gerçekten neye ihtiyacı olduğu konusunda mükemmel bir kaynak oldu. Ayrıca, preact-todomvc ve bu çerçeveyi daha iyi hale getirmek için gösterdiği çabadan dolayı Jason Miller'a teşekkür etmek isteriz.