Baru di Chrome 68

Pete LePage

Dan masih ada banyak lagi.

Saya Pete LePage. Mari selami dan lihat hal-hal baru untuk developer di Chrome 68.

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

Perubahan Tambahkan ke Layar Utama

Jika situs Anda memenuhi kriteria tambahkan ke layar utama, Chrome tidak akan lagi menampilkan banner tambahkan ke layar utama. Sebaliknya, Anda memegang kendali atas waktu dan cara 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 tersimpan, Chrome lalu 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 guna 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 pada Perilaku Tambahkan ke Layar Utama memiliki detail lengkap, termasuk contoh kode yang dapat Anda gunakan dan lainnya.

API Siklus Proses Halaman

Jika pengguna menjalankan sejumlah besar tab, resource penting seperti memori, CPU, baterai, dan jaringan dapat digunakan oleh terlalu banyak tab, sehingga menyebabkan pengalaman pengguna yang buruk.

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

Misalnya, jika pengguna memiliki tab di latar belakang selama beberapa waktu, browser dapat memilih untuk menangguhkan eksekusi skrip di halaman tersebut guna menghemat resource. Sebelum melakukannya, peristiwa freeze akan diaktifkan, sehingga Anda dapat menutup IndexedDB atau koneksi jaringan yang terbuka atau menyimpan status tampilan yang belum disimpan. Kemudian, saat pengguna memfokuskan ulang tab, peristiwa resume akan diaktifkan, sehingga Anda dapat menginisialisasi ulang apa pun yang telah 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 banyak detail selengkapnya, termasuk contoh kode, tips, dan lainnya. Anda dapat menemukan spec dan dokumen penjelasan di GitHub.

API Pengendali Pembayaran

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

Sebagai penjual, menambahkan aplikasi pembayaran berbasis web yang sudah ada sama mudahnya dengan 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 tertentu telah diinstal, pekerja layanan 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, masih banyak lagi.

Baru di DevTools

Pastikan untuk melihat Baru di Chrome DevTools, untuk mempelajari fitur baru untuk DevTools di Chrome 68.

Subscribe

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

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