Baru di Chrome 84

Pete LePage

Chrome 84 mulai diluncurkan ke stabil sekarang.

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage, bekerja dan mengambil gambar dari rumah. mari selami dan lihat apa yang baru untuk developer di Chrome 84.

Pintasan ikon aplikasi

Pintasan ikon aplikasi untuk PWA Twitter

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

Pintasan ini dipanggil dengan menekan lama ikon aplikasi di Android. Menambahkan pintasan ke PWA 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 berbagai hal dengan cepat dengan pintasan aplikasi untuk detail selengkapnya.

API animasi web

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

  • animation.ready dan animation.finished telah dijanjikan.
  • Browser kini dapat membersihkan dan menghapus animasi lama, sehingga menghemat memori dan meningkatkan performa.
  • Kini Anda dapat menggabungkan animasi menggunakan mode gabungan - dengan opsi add dan accumulate.

Saya tidak dapat menilai semua peningkatan atau menawarkan contoh yang bagus di sini, jadi lihat peningkatan Web Animations API di Chromium 84 untuk mengetahui detail selengkapnya.

API pengindeksan konten

Apakah konten Anda tersedia tanpa koneksi jaringan. Tetapi pengguna tidak mengetahuinya? Apakah 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 menggunakan 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 dapat offline dengan Content Indexing API untuk mengetahui detail selengkapnya.

API penguncian layar saat aktif

Penerapan penguncian layar saat aktif di situs Betty Crocker.

Saya suka memasak, tapi saya merasa sangat frustrasi saat mengikuti resep, dan {i>screen saver<i} muncul! Dengan API penguncian layar saat aktif, yang juga lulus dari uji coba originnya di Chrome 84, situs dapat meminta penguncian layar saat aktif untuk mencegah layar redup dan terkunci.

Bahkan, situs Betty Crocker menggunakannya sekarang, dan memublikasikan studi kasus di web.dev yang menunjukkan peningkatan indikator niat membeli sebesar 300%.

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


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

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

Tentu saja, masih ada banyak hal lainnya, jadi lihat Tetap terjaga dengan Screen Wake Lock API, tetapi setidaknya layar saya tidak akan lagi dipenuhi tepung.

Uji coba origin

Ada dua uji coba origin baru yang ingin saya sebutkan. Jika Anda baru mengenal 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 ia mungkin sedang tidak berada di komputer. Ini sangat bagus untuk hal-hal seperti aplikasi chat, atau situs jaringan 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 lebih lanjut API, dan cara mulai bereksperimen dengan API tersebut sekarang.

SIMD Perakitan Web

Dan Web Assembly SIMD akan memulai uji coba origin. Alat 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 Aplikasi paralel yang cepat dengan WebAssembly SIMD.

Dan lainnya

Chrome 84 adalah versi besar, tetapi ada beberapa update penting lain yang ingin saya tunjukkan.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 84.

Langganan

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

Saya Pete LePage, dan saya masih perlu potong rambut, tetapi segera setelah Chrome 85 dirilis, saya akan langsung memberi tahu Anda -- apa yang baru di Chrome!