Baru di Chrome 79

Pete LePage

Chrome 79 sekarang sudah diluncurkan!

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

Ikon yang Dapat Disamarkan

Jika Anda menjalankan Android O atau yang lebih baru, dan telah menginstal Progressive Web App, Anda mungkin melihat lingkaran putih yang mengganggu di sekitar ikon.

Untungnya, Chrome 79 kini mendukung ikon yang dapat disamarkan untuk Aplikasi Web Progressive yang diinstal.Anda harus mendesain ikon agar sesuai dengan zona aman - yang pada dasarnya adalah lingkaran dengan diameter 80% kanvas.

Kemudian, dalam manifes aplikasi web, Anda harus menambahkan properti purpose baru ke ikon, dan menetapkan nilainya ke maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes memiliki postingan yang bagus tentang Trik CSS - Maskable Icons: Android Adaptive Icons for Your PWA dengan semua detailnya, dan memiliki alat hebat yang dapat Anda gunakan untuk menguji ikon guna memastikan kesesuaiannya.

Web XR

Kini Anda dapat menciptakan pengalaman yang imersif untuk smartphone dan layar yang dipasang di kepala dengan WebXR Device API.

WebXR memungkinkan seluruh spektrum pengalaman imersif. Mulai dari menggunakan augmented reality untuk melihat tampilan sofa baru di rumah sebelum Anda membelinya, hingga game virtual reality dan film 360 derajat, dan lainnya.

Untuk mulai menggunakan API baru ini, baca Virtual Reality Comes to the Web.

Uji coba origin baru

Uji coba origin memberi kami kesempatan untuk memvalidasi fitur dan API eksperimental, serta memungkinkan Anda memberikan masukan tentang kegunaan dan efektivitasnya dalam deployment yang lebih luas.

Fitur eksperimental biasanya hanya tersedia di belakang tanda, tetapi saat kami menawarkan Uji Coba Origin untuk suatu fitur, Anda dapat mendaftar ke uji coba origin tersebut untuk mengaktifkan fitur tersebut bagi semua pengguna di origin Anda.

Dengan memilih uji coba origin, Anda dapat membuat demo dan prototipe yang dapat dicoba oleh pengguna pengujian beta selama uji coba tanpa mengharuskan mereka mengaktifkan flag khusus di Chrome.

Ada info selengkapnya tentang uji coba origin di Panduan Uji Coba Origin untuk Developer Web. Anda dapat melihat daftar uji coba origin yang aktif, dan mendaftar ke uji coba tersebut di halaman Uji Coba Origin Chrome.

Wake Lock

Salah satu hal yang paling saya benci tentang Google Slide adalah jika Anda membiarkan presentasi terbuka di satu slide terlalu lama, screensaver akan aktif. Sebelum dapat melanjutkan, Anda harus membuka kunci komputer. Duh.

Namun, dengan Wake Lock API baru, halaman dapat meminta kunci, dan mencegah layar meredup atau screensaver aktif. Fitur ini sangat cocok untuk Slide, tetapi juga berguna untuk hal-hal seperti situs resep - tempat Anda mungkin ingin membiarkan layar tetap menyala saat mengikuti petunjuk.

Untuk meminta kunci layar aktif, Anda harus memanggil navigator.wakeLock.request(), dan menyimpan objek WakeLockSentinel yang ditampilkannya.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Kunci dipertahankan hingga pengguna keluar dari halaman, atau Anda memanggil release pada objek WakeLockSentinel yang disimpan sebelumnya.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Detail selengkapnya ada di web.dev/wakelock.

rendersubtree atribut

Terkadang Anda tidak ingin bagian DOM dirender dengan segera. Misalnya, scroll dengan konten dalam jumlah besar, atau UI tab yang hanya menampilkan sebagian konten pada waktu tertentu.

Atribut rendersubtree baru memberi tahu browser bahwa browser dapat melewati rendering subtree tersebut. Hal ini memungkinkan browser menghabiskan lebih banyak waktu untuk memproses bagian halaman lainnya, sehingga meningkatkan performa.

Jika rendersubtree disetel ke invisible, konten elemen tidak digambar atau diuji hit, sehingga memungkinkan pengoptimalan rendering.

Mengubah rendersubtree menjadi activatable, akan membuat konten terlihat dengan menghapus atribut invisible, dan merender konten.

Chrome Dev Summit 2019

Jika Anda melewatkan Chrome Dev Summit, semua presentasi dapat dilihat di saluran YouTube kami.

Jake juga memiliki rangkaian tweet yang bagus dengan semua hal menarik yang terjadi di antara diskusi, termasuk anggota terbaru tim kami, Surjiko.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 78.

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 80 dirilis, saya akan langsung memberi tahu Anda -- yang baru di Chrome.