Baru di Chrome 84

Pete LePage

Chrome 84 mulai diluncurkan ke versi stabil sekarang.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja dan merekam dari rumah, mari kita lihat apa yang baru untuk developer di Chrome 84.

Pintasan ikon aplikasi

Pintasan ikon aplikasi untuk PWA Twitter

Pintasan ikon aplikasi memudahkan pengguna untuk memulai tugas umum dalam aplikasi Anda dengan cepat. Misalnya, menulis tweet baru, mengirim pesan, atau melihat notifikasi mereka. Fitur ini didukung di Chrome untuk Android.

Pintasan ini dipanggil dengan menekan lama ikon aplikasi di Android. Menambahkan pintasan ke PWA Anda sangat mudah, buat properti shortcuts baru di manifes aplikasi web, deskripsikan pintasan, dan tambahkan ikon Anda.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Lihat Menyelesaikan banyak hal dengan cepat menggunakan pintasan aplikasi untuk mengetahui detail selengkapnya.

Web animations API

Chrome 84 menambahkan sejumlah fitur yang sebelumnya tidak didukung ke Web Animations API.

  • animation.ready dan animation.finished telah di-promisify.
  • Browser kini dapat membersihkan dan menghapus animasi lama, sehingga menghemat memori dan meningkatkan performa.
  • Selain itu, Anda kini dapat menggabungkan animasi menggunakan mode komposit - dengan opsi add dan accumulate.

Saya tidak dapat menjelaskan semua peningkatan atau memberikan contoh yang baik di sini, jadi lihat peningkatan Web Animations API di Chromium 84 untuk mengetahui detail lengkapnya.

API pengindeksan konten

Jika konten Anda tersedia tanpa koneksi jaringan. Namun, pengguna tidak mengetahuinya? Apakah produk ini benar-benar tersedia? Ada masalah penemuan.

Dengan Content Indexing API, yang baru saja lulus dari uji coba asli, Anda dapat menambahkan URL dan metadata untuk konten yang tersedia secara offline. Dengan metadata tersebut, konten kemudian ditampilkan kepada pengguna, sehingga meningkatkan visibilitas.

Untuk menambahkan konten ke indeks, panggil index.add() pada pendaftaran pekerja layanan, dan berikan metadata yang diperlukan tentang konten.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Ingin melihat apa yang sudah ada di indeks Anda? Panggil index.getAll() pada pendaftaran pekerja layanan.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Lihat Mengindeks halaman yang kompatibel dengan offline menggunakan Content Indexing API untuk mengetahui detail selengkapnya.

Wake lock API

Penerapan kunci layar saat aktif di situs Betty Crocker.

Saya suka memasak, tetapi saya merasa sangat frustrasi saat mengikuti resep, dan screen saver aktif. Dengan API penguncian layar saat aktif, yang juga lulus dari uji coba asalnya di Chrome 84, situs dapat meminta penguncian layar saat aktif untuk mencegah layar meredup dan terkunci.

Faktanya, situs Betty Crocker menggunakannya saat ini, dan memublikasikan studi kasus di web.dev yang menunjukkan peningkatan indikator niat pembelian sebesar 300%.

Untuk mendapatkan kunci layar saat aktif, panggil navigator.wakeLock.request(), yang akan menampilkan objek WakeLockSentinel, yang digunakan untuk "melepaskan" kunci layar saat aktif.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Tentu saja, ada sedikit hal lain selain itu, jadi lihat Tetap aktif dengan Screen Wake Lock API, tetapi setidaknya layar saya tidak akan lagi tertutup tepung.

Uji coba origin

Ada dua uji coba origin baru yang ingin saya sampaikan. Jika Anda baru menggunakan uji coba origin, lihat Memulai uji coba origin Chrome.

Deteksi tidak ada aktivitas

Idle Detection API memberi tahu Anda saat pengguna tidak ada aktivitas, yang menunjukkan bahwa mereka mungkin tidak berada di depan komputer. Hal ini sangat cocok untuk hal-hal seperti aplikasi chat atau situs jejaring sosial, untuk memberi tahu pengguna apakah kontak mereka tersedia atau tidak.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Lihat Mendeteksi pengguna yang tidak aktif dengan Idle Detection API untuk mempelajari API lebih lanjut, dan cara Anda dapat mulai bereksperimen dengan API ini sekarang.

SIMD WebAssembly

Selain itu, Web Assembly SIMD memulai uji coba origin. API ini memperkenalkan operasi yang dipetakan ke petunjuk SIMD yang umum tersedia di hardware. Operasi SIMD digunakan untuk meningkatkan performa, terutama dalam aplikasi multimedia.

Untuk mempelajari WebAssembly SIMD lebih lanjut, lihat artikel Aplikasi paralel yang cepat dengan WebAssembly SIMD.

Dan lainnya

Chrome 84 adalah versi besar, tetapi ada beberapa update penting lainnya yang ingin saya sampaikan.

Bacaan lebih lanjut

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

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 saya masih perlu potong rambut, tetapi begitu Chrome 85 dirilis, saya akan segera memberi tahu Anda -- apa yang baru di Chrome.