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 kaynağınızın bağlamında çevrimdışı çalıştırın

Yusuke Utsunomiya

Twitter Ana Sayfa

Kenji Baheux

Tüm web sitesini tek bir dosya olarak paketlemek ve paylaşılabilir hale getirmek, web için yeni kullanım alanlarının önünü açar. Şunları yapabileceğiniz bir dünya hayal edin:

Kendi içeriğinizi oluşturun ve ağla sınırlı kalmadan her türlü şekilde dağıtın
Bir web uygulamasını veya web içeriğini Bluetooth ya da Kablosuz Doğrudan Bağlantı üzerinden arkadaşlarınızla paylaşın
Sitenizi kendi USB'nizde taşıyabilir, hatta kendi yerel ağınızda barındırabilirsiniz.

Web Bundle API, tüm bunları yapabilmenizi sağlayan deneysel bir tekliftir.

Tarayıcı uyumluluğu

Web Bundle API'si şu anda yalnızca Chromium tabanlı tarayıcılarda deneysel bir işaretin arkasında desteklenmektedir.

Web Bundle API'si ile tanışın

Web Paketi, bir veya daha fazla HTTP kaynağını tek bir dosyaya kapsüllemeye yarayan dosya biçimidir. Bir veya daha fazla HTML dosyası, JavaScript dosyası, resim veya stil sayfası içerebilir.

Daha resmi olarak Gruplanmış HTTP Exchange'leri olarak bilinen Web Paketleri, Web Paketleme teklifinin bir parçasıdır.

Web Bundle'ın web kaynaklarından oluşan bir koleksiyon olduğunu gösteren figür. — Web Paketleri'nin işleyiş şekli

Web Paketi'ndeki HTTP kaynakları, istek URL'lerine göre dizine eklenir ve isteğe bağlı olarak kaynaklara kefil olan imzalar içerebilir. İmzalar, tarayıcıların her bir kaynağın nereden geldiğini anlayıp doğrulamasını sağlar ve her birini gerçek kaynağından geliyormuş gibi ele alır. Bu, tek bir HTTP kaynağını imzalamaya yönelik bir özellik olan İmzalanmış HTTP Takasları'nın işlenme şekline benzer.

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

Web Paketlerini Açıklama

Daha net bir ifadeyle web paketi, HTTP kaynaklarını ikili program biçiminde paketleyen ve application/webbundle MIME türüyle sunulan .wbn uzantısına sahip bir CBOR dosyasıdır. Spesifikasyon taslağının Üst düzey yapı bölümünde bu konu hakkında daha fazla bilgi edinebilirsiniz.

Web Paketleri'nin birden çok benzersiz özelliği vardır:

Birden çok sayfayı kapsayarak eksiksiz bir web sitesinin tek bir dosyada gruplanmasını sağlar
MHTML'den farklı olarak yürütülebilir JavaScript'i etkinleştirir
İçerik pazarlığı için HTTP Varyantları'nı kullanır. Bu, paket çevrimdışı kullanılsa bile Accept-Language başlığıyla uluslararasılaştırmaya olanak tanır
Yayıncısı tarafından kriptografik olarak imzalandığında kaynak bağlamında yüklenir
Yerel olarak sunulduğunda neredeyse anında yüklenir

Bu özellikler birden fazla senaryoya yol açar. Yaygın senaryolardan biri, internet bağlantısı olmadan kolayca paylaşılabilen ve kullanılabilen bağımsız bir web uygulaması oluşturmaktır. Örneğin, arkadaşınızla Tokyo'dan San Francisco'ya bir uçakta olduğunuzu varsayalım. Uçaktaki eğlenceleri sevmediniz. Arkadaşınız PROXX adlı ilginç bir web oyununu oynamaktadır ve uçağa binmeden önce oyunu Web Paketi olarak indirdiğini söylüyor. İnternet bağlantısı olmadan sorunsuz bir şekilde çalışır. Web Paketleri'nden önce hikaye burada biterdi ve oyunu arkadaşınızın cihazında sırayla oynamanız veya vakit 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 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 rekorunu geçmeye çalışın.

Bu senaryoyu açıklayan bir videoyu burada bulabilirsiniz.

Gördüğünüz gibi, Web Bundle her kaynağı içerebilir. Böylece çevrimdışı olarak çalışır ve anında yüklenir.

Web Paketleri oluşturma

go/bundle KSA şu anda bir web sitesini gruplandırmanın en kolay yoludur. go/bundle, Go'da yerleşik olarak bulunan Web Bundle spesifikasyonunun referans uygulamasıdır.

Go'yu yükleyin.

go/bundle uygulamasını yükleyin.

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

preact-todomvc deposunu klonlayın ve kaynakları paket haline getirmeye hazırlanmak için web uygulamasını oluşturun.
```
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 Paketi.

Gruplama için başka seçenekler de mevcut ve yakında daha fazlası da eklenecek. go/bundle CLI, HAR dosyası veya özel kaynak URL'leri listesi kullanarak bir Web Paketi derlemenize olanak tanır. go/bundle hakkında daha fazla bilgi edinmek için GitHub kod deposunu ziyaret edin. Paket oluşturmak için deneysel Node.js modülünü de deneyebilirsiniz, wbn. wbn, geliştirmenin hâlâ ilk aşamalarındadır.

Web Paketleri ile denemeler yapma

Bir Web Paketi'ni denemek için:

Hangi Chrome sürümünü kullandığınızı öğrenmek için about://version adresine gidin. 80 veya sonraki bir sürümü çalıştırıyorsanız bir sonraki adımı atlayın.
Chrome 80 veya sonraki bir sürümü kullanmıyorsanız Chrome Canary'yi indirin.
about://flags/#web-bundles adlı kişiyi aç.
Web Bundle işaretini Etkin olarak ayarlayın.

about://flags ürününde Web Paketlerini etkinleştirme
Chrome'u yeniden başlatın.
Masaüstündeyseniz todomvc.wbn dosyasını Chrome'a sürükleyip bırakın veya Android kullanıyorsanız bir dosya yönetimi uygulamasında bu dosyaya dokunun.

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

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

Diğer örnek web paketlerini de deneyebilirsiniz:

web.dev.wbn, tüm web.dev sitesinin 15 Ekim 2019 itibarıyla anlık görüntüsüdür.
proxx.wbn: PROXX, çevrimdışı çalışan bir Mayın Tarlası klonudur.
squoosh.wbn Squoosh, dönüşümleri yeniden boyutlandırma ve biçimlendirme desteğiyle, çeşitli resim sıkıştırma biçimlerinin yan yana karşılaştırmasını yapmanızı sağlayan 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ışmıyor, başarısız olabilir veya kilitlenebilir. Bu nedenle, deneme amaçlı bir bayrağın arkasında bulunuyor. Ancak API, Chrome'da keşfetmeniz için yeterlidir. Yeni API'lerin tasarımında web geliştiricilerinden gelen geri bildirimler çok önemlidir. Bu nedenle, lütfen deneyin ve Web Bundle üzerinde çalışan kişilere düşüncelerinizi iletin.

webpackage-dev@chromium.org adresine genel geri bildirim gönderin.
Spesifikasyonla ilgili geri bildirimde bulunmak isterseniz yeni bir spesifikasyon sorunu bildirmek için https://github.com/WICG/webpackage/issues/new adresini ziyaret edin veya wpack@ietf.org'a e-posta gönderin.
Chrome'un davranışında herhangi bir sorun bulursanız Chromium hatası bildirmek için https://crbug.com/new adresini ziyaret edin.
Spesifikasyon tartışması ve araçlarına yapılacak katkılar da memnuniyetle karşılanacaktır. Katılmak için spesifikasyon deposunu ziyaret edin.

Onaylar

Teknik özelliklere katkıda bulunan, Canary'de özelliği geliştiren ve bu makaleyi inceleyen Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda ve Jeffrey Yasskin'e teşekkürlerimizi sunmak istiyoruz. Standartlaştırma sürecinde Dan York IETF tartışmasında yol gösterici olmuştur. Ayrıca Dave Cramer, yayıncıların gerçekte neye ihtiyaç duyduklarıyla ilgili harika bir kaynak olmuştur. Preact-todomvc'nin muhteşem katkısı ve çerçeveyi daha iyi hale getirmek için gösterdiğiniz hızsız çaba için Jason Miller'a da teşekkür etmek istiyoruz.