Chrome 89'daki yenilikler

Pete LePage

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

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi gelin biraz da Chrome 89'daki geliştiricilere yönelik yenilikleri görelim!

WebHID, WebNFC ve Web Serial

WebHID, WebNFC ve Web Serial konusunda gerçekten çok heyecanlıyım. Bu uygulamalar, gerçek dünyadaki donanımlarla etkileşimde bulunarak kullanıcılara daha önce hiç mümkün olmayan yeni senaryolar açar.

Üreticilerin, özel hoparlörlerdeki özel telefon düğmelerini kullanmak için eğlenceli ve sıra dışı donanımlara ve video konferans uygulamalarına bağlanmasına olanak tanır. Ya da çeşitli başka kullanım alanları vardır.

@AndreBan, Web Serial'ı ve yaklaşık 60 kod satırını kullanarak Raspberry Pico'da MicroPython REPL ile etkileşim kurabilen bir sayfa oluşturdu. Web Serial, Espruino tarafından web tabanlı IDE'sinde de kullanılıyor.

Francois, CDS 2019'da Web NFC'yi kullanarak anı tarzı eğlenceli bir oyun yazdı. Telefonu doğru karta doğru sırayla dokundurmanız gerekiyordu.

Daft Punk Bateri ile StreamDeck

En sevdiğim @bramus ise bir StreamDeck'e bağlanmak için WebHID'yi kullanarak Daft Punk davul pedi geliştirdi. StreamDeck'iniz yoksa YouTube'daki demo videosuna göz atın ve GitHub'daki kodu inceleyin.

Donanımınızla etkileşime geçen siteniz veya çok sayıda siteyle etkileşime girebilen donanımınız olabilir. Kullanıcılar, özel sürücü veya yazılım yüklemeye gerek olmadığından kazançlarını elde ederler.

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

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

Çevrimdışı destek, başından beri yüklenebilirlik için Progresif Web Uygulaması kriterlerinin önemli bir parçası olmuştur. Yüklü diğer uygulamalarda olduğu gibi, kullanıcılar bu uygulamanın da güvenilir şekilde çalışmasını bekler. Hızlı olmalı ve çevrimdışı dinozoru asla görmemelidir!

Bu yılın ilerleyen dönemlerinde, çevrimdışı deneyim olmadan az sayıda sitenin yüklenebilirlik ölçütlerini geçmesini sağlayan bir açığı kapatmayı planlıyoruz. PWA'nızın halihazırda çevrimdışı deneyimi varsa hazırsınız demektir. Herhangi bir işlem yapmanız gerekmez. Ancak gerekli değilse eklemenin zamanı geldi.

Chrome 89'dan itibaren, PWA'nız çevrimdışıyken geçerli bir yanıt sağlamıyorsa DevTools'daki Sorunlar sekmesinin altında bir uyarı görürsünüz ve Lighthouse bir sorun olduğunu belirtir. Ayrıca, yaptırım bu yılın ilerleyen dönemlerinde Chrome 93'te başlayacak.

Geliştirici Araçları, Console'da uyarı mesajı gösteriyor.
Chrome Geliştirici Araçları Konsolu'nda uyarı mesajı.
Geliştirici Araçları, Uygulama sekmesinde uyarı mesajı gösteriyor.
Uygulama sekmesi > Manifest > Yüklenebilirlik'te uyarı mesajı.

Ne tür bir çevrimdışı deneyim sunmak istediğinize karar verebilirsiniz. İdeal olan, olabildiğince fazla deneyim sağlamanızdır. Ancak en azından çevrimdışı yedek sayfa kadar basit olabilir.

Progresif Web Uygulaması çevrimdışı destek algılamasını iyileştirme bölümünde bu değişiklik ve bunu neden yaptığımız hakkında daha fazla ayrıntı bulabilirsiniz.

Nereden başlayacağınızı bilmiyorsanız Çalışma kutusunu inceleyin. PWA'nız için üretime hazır hizmet çalışanlarını destekleyebilecek bir dizi kitaplık bulunur. Alternatif olarak, basit bir çevrimdışı yedek sayfa için ihtiyacınız olan tüm kodu Çevrimdışı yedek sayfa oluşturma makalesinde bulabilirsiniz. Kodu 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 dosyayla etkileşimde bulunmasına izin veriyorsa Web Paylaşımı ve Web Paylaşımı Hedef API'lerini kullanıyor olmanız gerekir. Bu API'ler bir süredir mobil cihazlarda kullanılabiliyordu ancak artık ChromeOS ve Windows'da destekleniyor.

Web Paylaşımı, kullanıcıların cihazlarındaki diğer yüklü uygulamalara dosya veya veri göndermelerine (örneğin, Google Fotoğraflar'dan Twitter'a fotoğraf paylaşma) olanak tanır.

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 amacıyla bir hedef olarak kaydolmak için 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'yi kullanarak OS paylaşım kullanıcı arayüzüyle entegre etme ve Web Paylaşımı Hedef API'siyle paylaşılan verileri alma seçeneklerini işaretleyin.

Daha birçok avantaj

Elbette dahası da var.

Chrome artık JavaScript modüllerinde üst düzey await özelliğine izin veriyor.

PWA'lar (Progresif Web Uygulaması) için yeni çok amaçlı adres çubuğu yükleme simgesi

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


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

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 89'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri almak isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

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

Kredi

Raspberry Pis ve Arduino'nun fotoğrafı, Unsplash'te Harrrison Broadbent tarafından çekilmiştir