Baru di Chrome 76

Pete LePage

Di Chrome 76, kami telah menambahkan dukungan untuk:

Saya Pete LePage, mari kita bahas dan lihat apa yang baru untuk developer di Chrome 76.

Tombol Instal Omnibox PWA

Di Chrome 76, kami mempermudah pengguna menginstal Progressive Web App di desktop, dengan menambahkan tombol instal ke kolom URL, terkadang disebut omnibox.

Jika situs Anda memenuhi kriteria kemampuan penginstalan Progressive Web App, Chrome akan menampilkan tombol instal di omnibox yang menunjukkan kepada pengguna bahwa PWA Anda dapat diinstal. Jika pengguna mengklik tombol instal, tombol ini pada dasarnya sama dengan memanggil prompt() pada peristiwa beforeinstallprompt. Tindakan ini akan menampilkan dialog penginstalan, sehingga memudahkan pengguna untuk menginstal PWA Anda.

Lihat Penginstalan Kolom Alamat untuk Progressive Web App di Desktop guna mengetahui detail selengkapnya.


Kontrol yang lebih besar terhadap infobar mini PWA

Contoh infobar mini Tambahkan ke Layar utama untuk AirHorner

Di perangkat seluler, Chrome akan menampilkan infobar mini saat pengguna pertama kali mengunjungi situs Anda jika situs tersebut memenuhi kriteria kemampuan penginstalan Progressive Web App. Kami telah menerima masukan bahwa Anda ingin dapat mencegah infobar mini muncul dan sebagai gantinya menyediakan promosi penginstalan sendiri.

Mulai Chrome 76, memanggil preventDefault() pada peristiwa beforeinstallprompt akan menghentikan kemunculan infobar mini.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Pastikan Anda mengupdate UI - untuk memberi tahu pengguna bahwa PWA Anda dapat diinstal. Lihat Pola untuk Mempromosikan Penginstalan PWA guna mengetahui praktik terbaik yang direkomendasikan dalam mempromosikan penginstalan Progressive Web App Anda.

Update yang lebih cepat untuk WebAPK

Saat Progressive Web App diinstal di Android, Chrome akan otomatis meminta dan menginstal APK Web. Setelah diinstal, Chrome secara berkala akan memeriksa apakah manifes aplikasi web telah berubah, mungkin Anda telah mengupdate ikon, warna, atau mengubah nama aplikasi, untuk melihat apakah WebAPK baru diperlukan.

Mulai Chrome 76, Chrome akan memeriksa manifes lebih sering; memeriksa setiap hari, bukan setiap tiga hari. Jika salah satu properti utama telah berubah, Chrome akan meminta dan menginstal WebAPK baru, sehingga memastikan judul, ikon, dan properti lainnya sudah yang terbaru.

Lihat Lebih Sering Mengupdate WebAPK untuk mengetahui detail selengkapnya.

Mode gelap

Banyak sistem operasi kini mendukung mode gelap, atau tema gelap.

Kueri media prefers-color-scheme memungkinkan Anda menyesuaikan tampilan dan nuansa situs agar sesuai dengan mode pilihan pengguna.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom memiliki artikel bagus Halo kegelapan, teman lama saya di web.dev dengan semua hal yang perlu Anda ketahui, plus tips untuk merancang style sheet guna mendukung mode terang dan gelap.

Dan banyak lagi!

Ini hanyalah beberapa perubahan di Chrome 76 untuk developer, tentu saja, masih banyak lagi.

Promise.allSettled()

Secara pribadi, saya sangat menyukai Promise.allSettled(). Fungsi ini mirip dengan Promise.all(), tetapi fungsi ini menunggu hingga semua promise diselesaikan sebelum ditampilkan.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

Membaca blob lebih mudah

Blob lebih mudah dibaca dengan tiga metode baru: text(), arrayBuffer(), dan stream(); artinya kita tidak perlu lagi membuat wrapper di sekitar pembaca file.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Dukungan image di API papan klip asinkron

Selain itu, kami telah menambahkan dukungan untuk gambar ke Asynchronous Clipboard API, sehingga memudahkan Anda untuk menyalin dan menempelkan gambar secara terprogram.

Bacaan lebih lanjut

Panduan ini hanya mencakup beberapa sorotan utama, periksa link di bawah untuk melihat perubahan tambahan di Chrome 76.

Subscribe

Ingin terus mendapatkan video terbaru kami, lalu berlangganan channel YouTube Developer Chrome kami, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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