Baru di Chrome 76

Pete LePage

Di Chrome 76, kami telah menambahkan dukungan untuk:

Saya Pete LePage. Mari kita lihat hal 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, yang terkadang disebut omnibox.

Jika situs Anda memenuhi kriteria 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, pada dasarnya sama dengan memanggil prompt() pada peristiwa beforeinstallprompt; tombol ini menampilkan dialog penginstalan, sehingga memudahkan pengguna menginstal PWA Anda.

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


Kontrol yang lebih besar atas infobar mini PWA

Contoh infobar mini Tambahkan ke Layar utama untuk AirHorner

Di perangkat seluler, Chrome menampilkan infobar mini saat pengguna pertama kali mengunjungi situs Anda jika memenuhi kriteria penginstalan Aplikasi Web Progresif. Kami menerima masukan bahwa Anda ingin mencegah munculnya infobar mini, dan memberikan promosi penginstalan Anda 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 untuk memperbarui UI - untuk memberi tahu pengguna bahwa PWA Anda dapat diinstal. Lihat Pola untuk Mempromosikan Penginstalan PWA untuk mengetahui praktik terbaik yang kami rekomendasikan untuk mempromosikan penginstalan Progressive Web Apps Anda.

Update yang lebih cepat ke WebAPK

Saat Progressive Web App diinstal di Android, Chrome akan otomatis meminta dan menginstal APK Web. Setelah diinstal, Chrome secara berkala memeriksa apakah manifes aplikasi web telah berubah, mungkin Anda telah memperbarui 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 Memperbarui WebAPK Lebih Sering 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 Hello darkness, my old friend di web.dev dengan semua hal yang perlu Anda ketahui, serta tips untuk merancang lembar gaya untuk mendukung mode terang dan gelap.

Dan banyak lagi!

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

Promise.allSettled()

Secara pribadi, saya sangat antusias dengan Promise.allSettled(). Fungsi ini mirip dengan Promise.all(), tetapi menunggu sampai 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 gambar di API papan klip asinkron

Selain itu, kami telah menambahkan dukungan untuk gambar ke Asynchronous Clipboard API, sehingga memudahkan pembuatan salinan dan penempelan gambar secara terprogram.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 76.

Langganan

Ingin terus mendapatkan info terbaru tentang video kami, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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