Chrome 68'deki yenilikler

Ve çok daha fazlası da var!

Adım Pete LePage. Şimdi Chrome 68'deki geliştiricilere yönelik yenilikleri görelim!

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

Ana ekrana ekle değişiklikleri

Siteniz ana ekrana ekle ölçütlerini karşılıyorsa Chrome artık ana ekrana ekle banner'ını göstermez. Bunun yerine, kullanıcıyı ne zaman ve nasıl yönlendireceğiniz konusunda kontrol sizde olur.

Kullanıcıya istem göndermek için beforeinstallprompt etkinliğini dinleyin, ardından etkinliği kaydedin ve uygulamanıza yüklenebileceğini belirtmek için 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ı, kaydedilen beforeinstallprompt etkinliğinde prompt() seçeneğini tıklayarak yükle düğmesini tıkladığında 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);
});

Sitenizi güncellemeniz için size zaman tanımak amacıyla Chrome, kullanıcı ana ekrana ekle kriterlerini karşılayan bir siteyi ilk kez ziyaret ettiğinde küçük bir bilgi çubuğu gösterir. Kapatıldıktan sonra mini bilgi çubuğu bir süre daha gösterilmez.

Ana Ekran Davranışına Ekleme Davranışındaki Değişiklikler, kullanabileceğiniz kod örnekleri ve daha fazlası dahil olmak üzere tüm ayrıntıları içerir.

Sayfa Yaşam Döngüsü API'sı

Bir kullanıcının çok sayıda sekme çalıştığında bellek, CPU, pil ve ağ gibi kritik kaynaklara aşırı abone olunabilir ve bu da kötü bir kullanıcı deneyimine yol açabilir.

Siteniz arka planda çalışıyorsa sistem, kaynakları korumak için sitenizi askıya alabilir. Yeni Page Lifecycle API ile artık bu etkinlikleri dinleyebilir ve yanıtlayabilirsiniz.

Örneğin, bir kullanıcının bir süredir sekme arka planda kaldıysa tarayıcı, kaynakları korumak için söz konusu sayfada komut dosyası yürütmeyi askıya almayı seçebilir. Bunu yapmadan önce freeze etkinliğini tetikleyerek Open IndexedDB'yi veya ağ bağlantılarını kapatmanıza ya da kaydedilmemiş görünüm durumlarını kaydetmenize olanak tanır. Daha sonra, kullanıcı sekmeye yeniden odaklandığında resume etkinliği tetiklenir ve burada, 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 çok daha fazlası dahil olmak üzere pek çok daha ayrıntılı bilgi için Phil'in Page Lifecycle API yayınına göz atın. spec ve açıklayıcı dokümanını GitHub'da bulabilirsiniz.

Ödeme İşleyici API'sı

Payment Request API, ödeme kabul etmenin açık ve standartlara dayalı bir yoludur. Payment Handler API, web tabanlı ödeme uygulamalarının doğrudan Ödeme İsteği deneyimindeki ödemeleri kolaylaştırmasını sağlayarak Ödeme İsteği'nin erişimini genişletir.

Bir 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şleyebilen bir hizmet çalışanı yüklüyse ödeme isteği kullanıcı arayüzünde görünür ve kullanıcı bunu kullanarak ödeme yapabilir.

Eiji'nin, satıcı siteleri ve ödeme işleyiciler için bu yöntemi nasıl uygulayacağını gösteren mükemmel bir yayını var.

Diğer ölçütler

Bunlar, Chrome 68'de geliştiriciler için yapılan değişikliklerden sadece birkaçı. Elbette bunlar dışında çok daha fazlası da var.

Geliştirici Araçları'ndaki yenilikler

Chrome 68'deki Geliştirici Araçları yeniliklerini öğrenmek için Chrome Geliştirici Araçları'ndaki yenilikler sayfasına 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.

Ben Pete LePage. Chrome 69 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.