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 ekle ölçütünü 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öndermek 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 Ekrana Ekleme Davranışı İçin Değişiklikler, kullanabileceğiniz kod örnekleri ve daha fazlası dahil olmak üzere tüm ayrıntıları içerir.

Page Lifecycle API

Bir kullanıcı çok sayıda sekme çalışırken bellek, CPU, pil ve ağ gibi önemli kaynaklar aşırı miktarda abone olabilir ve bu da kötü bir kullanıcı deneyimine yol açar.

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. Bu sayede, açık IndexedDB veya ağ bağlantılarını kapatabilir ya da kaydedilmemiş görüntü durumunu 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.

Ödeme İşleyici API'si

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üklenirse bu, Ödeme İsteği kullanıcı arayüzünde gösterilir ve kullanıcı bu yöntemle ödeme yapabilir.

Eiji, bu özelliği satıcı siteleri ve ödeme işleyiciler için nasıl uygulayabileceğinizi gösteren harika bir makale yazdı.

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 Geliştirici Araçları'ndaki yenilikler hakkında bilgi edinmek için Chrome Geliştirici Araçları'ndaki yenilikler bölümüne göz atmayı unutmayın.

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.