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
Yusuke Utsunomiya
X Ana sayfa
Kenji Baheux
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 Bundle API şu anda yalnızca deneysel bir işaretin arkasındaki Chromium tabanlı tarayıcılarda desteklenmektedir.

Web Bundles API'yi tanıtıyoruz

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 ya da stil sayfası içerebilir.

Web paketleri, daha resmi olarak paketlenmiş HTTP takasları olarak bilinir ve Web Paketleme teklifinin bir parçasıdır.

Web Paketi'nin bir web kaynakları koleksiyonu olduğunu gösteren bir figür.
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 İmzalı 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 konu hakkında 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ı 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
  • İçerik pazarlığı yapmak için HTTP Varyantlarını kullanır. Bu, paket çevrimdışı kullanılsa bile Accept-Language üstbilgisiyle uluslararasılaştırmaya olanak tanı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ğlence içeriklerini 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ışıyken 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:

  1. 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.
  2. .wbn dosyasını Web Paketleri'ni 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ı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.

  1. Go'yu yükleyin.

  2. go/bundle'ı yükleyin.

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

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

  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 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 ilk safhalarında olduğunu unutmayın.

Web paketleriyle deneme yapma

Web paketini denemek için:

  1. 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.
  2. Chrome 80 veya sonraki bir sürümü kullanmıyorsanız Chrome Canary'yi indirin.
  3. about://flags/#web-bundles adlı kişiyi aç.

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

    about://flags sayfasının ekran görüntüsü
    about://flags'te web paketlerini etkinleştirme

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

  6. 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, dönüşümleri yeniden boyutlandırma ve biçimlendirme desteğiyle çeşitli resim sıkıştırma biçimlerini yan yana karşılaştırmanızı sağlayan kullanışlı ve hızlı bir resim optimizasyonu 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 incelemeniz için hazı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.

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.