Chrome 68'deki yenilikler

Pete LePage

Daha birçok özellik de var.

Adım Pete LePage. Chrome 68'de geliştiriciler için neler yeni olduğuna göz atalım.

Değişikliklerin tam listesini görmek ister misiniz? Chromium kaynak deposu değişiklik listesine göz atın.

Ana ekrana ekleme değişiklikleri

Siteniz ana ekrana ekleme ölçütlerini karşılıyorsa Chrome artık ana ekrana ekle banner'ını göstermez. Bunun yerine, kullanıcıya ne zaman ve nasıl istem göstereceğinizi siz kontrol edersiniz.

Kullanıcıya istem göstermek için beforeinstallprompt etkinliğini dinleyin, ardından etkinliği kaydedin ve uygulamanıza, yüklenebileceğini belirten bir düğme veya başka bir kullanıcı arayüzü öğesi ekleyin.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

Kullanıcı yükle düğmesini tıkladığında, kayıtlı beforeinstallprompt etkinliğinde prompt() çağrılır. Ardından Chrome, ana ekrana ekle iletişim kutusunu gösterir.


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

Chrome, sitenizi güncellemenize zaman tanımak için kullanıcılar ana ekrana ekleme ölçütlerini karşılayan bir siteyi ilk kez ziyaret ettiğinde mini bir bilgi çubuğu gösterir. Kapatıldıktan sonra mini bilgi çubuğu bir süre boyunca tekrar gösterilmez.

Ana Ekran Davranışına Eklenecek Değişiklikler başlıklı makalede, kullanabileceğiniz kod örnekleri ve daha fazlası dahil olmak üzere tüm ayrıntılar yer almaktadır.

Page Lifecycle API

Kullanıcının açık çok sayıda sekmesi varsa bellek, CPU, pil ve ağ gibi kritik kaynaklara fazla abone olunabilir. Bu da kötü bir kullanıcı deneyimine neden olur.

Siteniz arka planda çalışıyorsa sistem, kaynakları korumak için siteyi askıya alabilir. Yeni Sayfa Yaşam Döngüsü API'si sayesinde artık bu etkinlikleri dinleyebilir ve yanıtlayabilirsiniz.

Örneğin, bir kullanıcının sekmesi bir süredir arka plandaysa tarayıcı, kaynakları korumak için söz konusu sayfadaki komut dosyası yürütmeyi askıya almayı seçebilir. Bunu yapmadan önce freeze etkinliğini tetikler. Böylece, açık IndexedDB veya ağ bağlantılarını kapatabilir ya da kaydedilmemiş görüntüleme durumlarını kaydedebilirsiniz. Ardından, kullanıcı sekmeye yeniden odaklandığında resume etkinliği tetiklenir. Bu durumda, kaldırılan her şeyi yeniden başlatabilirsiniz.

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

Kod örnekleri, ipuçları ve daha fazlası dahil olmak üzere çok daha fazla ayrıntı için Phil'in Sayfa Yaşam Döngüsü API'si konulu yayınına göz atın. Spesifikasyonu ve açıklayıcı dokümanı GitHub'da bulabilirsiniz.

Payment Handler API

Payment Request API, ödemeleri kabul etmenin açık ve standartlara dayalı bir yoludur. Ödeme işleyici API, web tabanlı ödeme uygulamalarının doğrudan ödeme isteği deneyiminde ödemeleri kolaylaştırmasına olanak tanıyarak ödeme isteğinin erişimini genişletir.

Satıcı olarak mevcut bir web tabanlı ödeme uygulamasını eklemek, supportedMethods mülküne giriş eklemek kadar kolaydır.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

Belirtilen ödeme yöntemini işleyebilecek bir hizmet çalışanı yüklüyse bu hizmet çalışanı, Ödeme İsteği kullanıcı arayüzünde gösterilir ve kullanıcı bu hizmet çalışanıyla ödeme yapabilir.

Eiji'nin, satıcı siteleri ve ödeme işleyiciler için bu özelliğin nasıl uygulanacağını gösteren harika bir makalesi var.

Diğer özellikler

Bunlar, Chrome 68'de geliştiriciler için yapılan değişikliklerden yalnızca birkaçıdır. Elbette daha birçok değişiklik vardır.

DevTools'daki yenilikler

Chrome 68'de DevTools'ta neler yeni olduğunu öğrenmek için Chrome Geliştirici Araçları'ndaki yenilikler başlıklı makaleyi inceleyin.

Abone ol

Ardından, YouTube kanalımızdaki abone ol düğmesini tıklayın. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 69 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.