Chrome 89'daki yenilikler

Pete LePage

Chrome 89, kararlı sürüm olarak kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. Chrome 89'da geliştiriciler için neler yeni olduğuna göz atalım.

WebHID, WebNFC ve Web Seri

WebHID, WebNFC ve Web Seri hakkında çok heyecanlıyım. Gerçek dünyadaki donanımlarla etkileşime geçerek kullanıcılara daha önce hiç mümkün olmayan yeni senaryolar sunarlar.

Bu API'ler, üreticilerin eğlenceli ve ilginç donanımlara, video konferans uygulamalarına bağlanarak özel hoparlörlerdeki özel telefon düğmelerini kullanmasına olanak tanır. Ya da diğer pek çok kullanım alanı.

@AndreBan, Web Serili ve yaklaşık 60 satır kod kullanarak Raspberry Pi Pico'daki MicroPython REPL ile etkileşime geçebilecek bir sayfa oluşturdu. Web Seri, Espruino tarafından web tabanlı IDE'sinde de kullanılır.

Francois, CDS 2019'da Web NFC'yi kullanarak eğlenceli bir hafıza oyunu yazdı. Telefonu doğru kartlara doğru sırayla dokunmanız gerekiyordu.

Daft Punk Davul Pad'i ile StreamDeck

En sevdiğim örnek ise @bramus'un WebHID'i kullanarak StreamDeck'e bağlanıp Daft Punk davul pad'i oluşturmasıydı. StreamDeck'iniz yoksa YouTube'daki demo videosuna ve GitHub'daki koda göz atın.

Donanımınızla etkileşime geçen siteniz veya birçok siteyle etkileşime geçebilen donanımınız olsun, özel sürücü veya yazılım yüklemeleri gerekmediği için kullanıcılar kazançlı çıkar.

Bağlanabileceğiniz bazı cihazlar hakkında daha fazla bilgiyi web.dev/devices adresinde bulabilir veya WebHID, WebNFC ve Web Seri ile ilgili başlangıç kılavuzlarına göz atabilirsiniz.

PWA yüklenebilirlik ölçütlerinde yapılan değişiklikler

Çevrimdışı destek, başlangıçtan beri yüklenilebilirlik için Progresif Web Uygulaması ölçütlerinin önemli bir parçası olmuştur. Yüklenen diğer uygulamalarda olduğu gibi, kullanıcılar bu uygulamanın da güvenilir şekilde çalışmasını bekler. Hızlı olmalı ve kullanıcılar hiçbir zaman çevrimdışı dinozorla karşılaşmamalıdır.

Bu yılın ilerleyen dönemlerinde, birkaç sitenin çevrimdışı deneyim olmadan yükleme ölçütlerini geçmesine olanak tanıyan bir boşluğu kapatmayı planlıyoruz. PWA'nızda zaten çevrimdışı bir deneyim varsa hazırsınız demektir. Herhangi bir işlem yapmanız gerekmez ancak henüz eklemediyseniz ekleme zamanı geldi.

Chrome 89'dan itibaren, PWA'nız çevrimdışıyken geçerli bir yanıt sağlamazsa Geliştirici Araçları'ndaki Sorunlar sekmesinde bir uyarı görürsünüz ve Lighthouse bir sorun olduğunu belirtir. Yaptırım, bu yılın ilerleyen dönemlerinde Chrome 93 sürümünde başlayacak.

Console'da uyarı mesajı gösteren DevTools.
Chrome Geliştirici Araçları Konsolu'ndaki uyarı mesajı.
Uygulama sekmesinde uyarı mesajı gösteren DevTools.
Uygulama sekmesi > Manifest > Yüklenebilirlik bölümünde uyarı mesajı.

Ne tür bir çevrimdışı deneyim sunmak istediğinize karar verebilirsiniz. İdeal olan, deneyiminizi mümkün olduğunca ayrıntılı bir şekilde paylaşmanızdır. Ancak en azından çevrimdışı yedek sayfa kadar basit olabilir.

Değişiklik ve bu değişikliği neden yaptığımız hakkında daha fazla bilgiyi İlerlemeci Web Uygulaması çevrimdışı destek algılamasını iyileştirme başlıklı makalede bulabilirsiniz.

Nereden başlayacağınızdan emin değilseniz Workbox'a göz atın. PWA'nız için üretime hazır bir hizmet çalışanını destekleyebilecek bir kitaplık grubuna sahiptir. Basit bir çevrimdışı yedek sayfa için Çevrimdışı yedek sayfa oluşturma makalesinde ihtiyacınız olan tüm kodlar yer alır. Bu kodları kopyalayıp doğrudan sitenize yapıştırabilirsiniz.

Masaüstü için Web Paylaşımı ve Web Paylaşımı Hedefi

Siteniz kullanıcıların dosya oluşturmasına, düzenlemesine veya dosyalarla etkileşim kurmasına izin veriyorsa Web Paylaşımı ve Web Paylaşımı Hedefi API'lerini kullanmalısınız. Bu API'ler bir süredir mobil cihazlarda kullanılabiliyordu ancak artık ChromeOS ve Windows'ta da destekleniyor.

Web paylaşımı, kullanıcıların cihazlarında yüklü diğer uygulamalara dosya veya veri göndermelerini sağlar. Örneğin, Google Fotoğraflar'daki bir fotoğrafı Twitter'da paylaşabilirsiniz.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Diğer uygulamaların sizinle dosya veya veri paylaşabilmesi için hedef olarak kaydolmak istiyorsanız Web Paylaşımı Hedefi API'sini kullanmanız gerekir.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Başlangıç kılavuzları için Web Paylaşımı API'si ile OS paylaşım kullanıcı arayüzü entegrasyonu ve Web Paylaşımı Hedef API'si ile paylaşılan verileri alma başlıklı makaleleri inceleyin.

Başka pek çok bilgi

Elbette daha birçok özellik var.

Chrome artık JavaScript modülleri içinde üst düzey await'e izin veriyor.

PWA'lar için yeni çok amaçlı adres çubuğu yükleme simgesi

Kullanıcıların kafa karışıklığını azaltmak için, yüklenebilir PWA'lar için çok amaçlı adres çubuğunda gösterilen simgeyi güncelledik.


Ayrıca, PWA'nızı ChromeOS için Play Store'da kullanıma sunmak üzere Güvenilir Web Etkinliği kullandıysanız Digital Goods API kaynak denemesine kaydolabilirsiniz.

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 89'daki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

Abone ol

Videolarımızdan haberdar olmak için Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 90 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.

Kredi

Raspberry Pi ve Arduino fotoğrafı Unsplash'taki Harrison Broadbent tarafından çekilmiştir.