Baru di Chrome 68

Pete LePage

Dan masih banyak lagi fitur lainnya.

Saya Pete LePage. Mari kita lihat apa saja yang baru untuk developer di Chrome 68.

Ingin melihat daftar lengkap perubahan? Lihat daftar perubahan repositori sumber Chromium.

Perubahan pada Tambahkan ke Layar Utama

Jika situs Anda memenuhi kriteria tambahkan ke layar utama, Chrome tidak akan lagi menampilkan banner tambahkan ke layar utama. Sebagai gantinya, Anda dapat mengontrol kapan dan bagaimana meminta pengguna.

Untuk meminta pengguna, proses peristiwa beforeinstallprompt, lalu, simpan peristiwa dan tambahkan tombol atau elemen UI lainnya ke aplikasi Anda untuk menunjukkan bahwa aplikasi dapat diinstal.

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;
});

Saat pengguna mengklik tombol instal, panggil prompt() pada peristiwa beforeinstallprompt yang disimpan, Chrome akan menampilkan dialog tambahkan ke layar utama.


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);
});

Untuk memberi Anda waktu memperbarui situs, Chrome akan menampilkan infobar mini saat pertama kali pengguna mengunjungi situs yang memenuhi kriteria tambahkan ke layar utama. Setelah ditutup, infobar mini tidak akan ditampilkan lagi untuk sementara waktu.

Perubahan untuk Menambahkan ke Perilaku Layar Utama memiliki detail lengkap, termasuk contoh kode yang dapat Anda gunakan dan lainnya.

API Siklus Proses Halaman

Jika pengguna memiliki banyak tab yang berjalan, resource penting seperti memori, CPU, baterai, dan jaringan dapat kelebihan permintaan, sehingga menyebabkan pengalaman pengguna yang buruk.

Jika situs Anda berjalan di latar belakang, sistem dapat menangguhkan situs tersebut untuk menghemat resource. Dengan Page Lifecycle API baru, Anda kini dapat memproses dan merespons peristiwa ini.

Misalnya, jika pengguna memiliki tab di latar belakang selama beberapa saat, browser dapat memilih untuk menangguhkan eksekusi skrip di halaman tersebut untuk menghemat resource. Sebelum melakukannya, peristiwa ini akan memicu peristiwa freeze, yang memungkinkan Anda menutup koneksi jaringan atau IndexedDB yang terbuka atau menyimpan status tampilan yang belum disimpan. Kemudian, saat pengguna memfokuskan kembali tab, peristiwa resume akan diaktifkan, tempat Anda dapat melakukan inisialisasi ulang apa pun yang dihapus.

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);

Lihat postingan Page Lifecycle API Phil untuk mengetahui detail selengkapnya, termasuk contoh kode, tips, dan lainnya. Anda dapat menemukan spesifikasi dan dokumen penjelasan di GitHub.

Payment Handler API

Payment Request API adalah cara terbuka berbasis standar untuk menerima pembayaran. Payment Handler API memperluas jangkauan Permintaan Pembayaran dengan memungkinkan aplikasi pembayaran berbasis web memfasilitasi pembayaran langsung dalam pengalaman Permintaan Pembayaran.

Sebagai penjual, menambahkan aplikasi pembayaran berbasis web yang ada semudah menambahkan entri ke properti supportedMethods.

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

Jika pekerja layanan yang dapat menangani metode pembayaran yang ditentukan diinstal, pekerja layanan tersebut akan muncul di UI Permintaan Pembayaran dan pengguna dapat membayar dengan metode tersebut.

Eiji memiliki postingan bagus yang menunjukkan cara menerapkannya untuk situs penjual, dan untuk pengendali pembayaran.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 68 untuk developer, tentu saja, ada banyak lagi.

Baru di DevTools

Pastikan untuk membaca Yang baru di Chrome DevTools, untuk mempelajari yang baru di DevTools di Chrome 68.

Langganan

Kemudian, klik tombol subscribe di channel YouTube kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Pete LePage, dan segera setelah Chrome 69 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome.