Chrome 89'daki yenilikler

Pete LePage

Chrome 89'un kararlı sürümü kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyor ve çekim yapıyorum. Gelin, Chrome 89'daki geliştiricilere yönelik yeniliklere göz atalım.

WebHID, WebNFC ve Web Serial

WebHID, WebNFC ve Web Serial'ı çok heyecan verici buluyorum. Daha önce hiç mümkün olmayan, gerçek dünyadaki donanımlarla etkileşim kurma gibi yeni senaryolar sunar.

Bu sayede içerik üreticiler, eğlenceli ve sıra dışı donanımlara, video konferans uygulamalarına bağlanarak özel hoparlörlerdeki telefon düğmelerini kullanabilir. Veya diğer kullanım alanları.

Web Serial'ı ve yaklaşık 60 satırlık kodu kullanarak @AndreBan, Raspberry Pi Pico'daki MicroPython REPL ile etkileşime girebilen bir sayfa oluşturdu. Web Serial, Espruino'nun web tabanlı IDE'sinde de kullanılır.

Francois, CDS 2019'da Web NFC kullanarak hafıza tarzında eğlenceli bir oyun yazdı. Telefonu doğru karta, doğru sırada dokundurmanız gerekiyordu.

Daft Punk Drum Pad ile Stream Deck

En sevdiğim örneklerden biri olan @bramus, WebHID'yi kullanarak bir StreamDeck'e bağlandı ve Daft Punk davul pedi oluşturdu. Stream Deck'iniz yoksa YouTube'daki demo videosunu ve GitHub'daki kodu inceleyin.

Donanımınızla etkileşime giren siteniz veya çok sayıda siteyle etkileşime girebilen donanımınız olsun, kullanıcılar özel sürücüler ya da yazılımlar yüklemeleri gerekmediğinden kazanır.

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

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

Çevrimdışı destek, başından beri Progresif Web Uygulaması'nın yüklenebilirlik ölçütlerinin önemli bir parçası olmuştur. Kullanıcılar, diğer yüklü uygulamalarda olduğu gibi bu uygulamanın da güvenilir bir şekilde çalışmasını bekler. Hızlı olmalı ve kullanıcılar hiçbir zaman çevrimdışı dinozorunu görmemelidir.

Bu yılın ilerleyen dönemlerinde, birkaç sitenin çevrimdışı deneyim sunmadan yüklenebilirlik ölçütlerini karşılamasına olanak tanıyan bir boşluğu kapatmayı planlıyoruz. PWA'nızda zaten çevrimdışı deneyim varsa başka bir şey yapmanız gerekmez. Herhangi bir işlem yapmanız gerekmez ancak ödeme yöntemi eklemediyseniz şimdi eklemenin tam zamanı!

Chrome 89'dan itibaren, PWA'nız çevrimdışı olduğunda geçerli bir yanıt vermiyorsa 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'te başlayacak.

Geliştirici Araçları, konsolda uyarı mesajı gösteriyor.
Chrome Geliştirici Araçları Konsolu'ndaki uyarı mesajı.
Uygulama sekmesinde uyarı mesajını gösteren Geliştirici Araçları.
Uygulama sekmesi > Manifest > Yüklenebilirlik bölümündeki uyarı mesajı.

Ne tür bir çevrimdışı deneyim sunmak istediğinize karar verebilirsiniz. İdeal olarak, deneyiminizin mümkün olduğunca büyük bir kısmını sağlamanız gerekir. Ancak en azından çevrimdışı yedek sayfa kadar basit olabilir.

Değişiklik ve bu değişikliği yapma nedenimiz hakkında daha fazla bilgiyi Aşamalı web uygulamalarında çevrimdışı destek algılamayı 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ı sağlayabilecek bir dizi kitaplık içerir. Alternatif olarak, basit bir çevrimdışı yedek sayfa için Çevrimdışı yedek sayfa oluşturma başlıklı makalede ihtiyacınız olan tüm kodlar yer alır. Bu kodları doğrudan kopyalayıp sitenize yapıştırabilirsiniz.

Masaüstü için Web Share ve Web Share Target

Siteniz kullanıcıların dosya oluşturmasına, düzenlemesine veya dosyalarla etkileşime girmesine izin veriyorsa Web Share ve Web Share Target API'lerini kullanmanız gerekir. Bu API'ler bir süredir mobil cihazlarda kullanılabilmekteydi ancak artık ChromeOS ve Windows'ta da desteklenmektedir.

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

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 Share Target API'yi 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 Share API ile işletim sistemi paylaşım kullanıcı arayüzüyle entegrasyon ve Web Share Target API ile paylaşılan verileri alma başlıklı makaleleri inceleyin.

Başka pek çok bilgi

Elbette daha pek çok özellik var.

Chrome artık JavaScript modüllerinde üst düzey await'ye izin veriyor.

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

Kullanıcıların kafasının karışmasını önlemek 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ılabilir hale getirmek üzere güvenilir bir web etkinliği kullandıysanız Digital Goods API kaynak denemesine kaydolabilirsiniz.

Daha fazla bilgi

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

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.

Ben Pete LePage. Chrome 90 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için burada olacağım.

Kredi

Raspberry Pi ve Arduino'nun fotoğrafı Harrison Broadbent'in Unsplash'teki çalışmasıdır.