Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web Paketlerini kullanmaya başlayın

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

Yusuke Utsunomiya

Kenji Baheux

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 paketinin bir web kaynağı koleksiyonu olduğunu gösteren bir resim. — Web paketlerinin işleyiş şekli

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

about://flags'te web paketlerini etkinleştirme
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.

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

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.