Baru di Chrome 73

Pete LePage

Di Chrome 73, kami telah menambahkan dukungan untuk:

Dan masih ada banyak lagi.

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk developer di Chrome 73.

Log Perubahan

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

Progressive Web App dapat digunakan di mana saja

Progressive Web App memberikan pengalaman seperti aplikasi yang dapat diinstal, yang dibuat dan dikirimkan langsung melalui web. Di Chrome 73, kami telah menambahkan dukungan untuk macOS, yang menghadirkan dukungan untuk Progressive Web App ke semua platform desktop - Mac, Windows, ChromeOS, dan Linux, serta perangkat seluler, yang menyederhanakan pengembangan aplikasi web.

Progressive Web App itu cepat dan andal; selalu dimuat dan bekerja dengan kecepatan yang sama, apa pun koneksi jaringannya. Iklan ini memberikan pengalaman yang kaya dan menarik melalui fitur web modern yang memanfaatkan sepenuhnya kemampuan perangkat.

Pengguna dapat menginstal PWA dari menu konteks Chrome, atau Anda dapat secara langsung mempromosikan pengalaman penginstalan menggunakan peristiwa beforeinstallprompt. Setelah diinstal, PWA terintegrasi dengan OS untuk berperilaku seperti aplikasi native: pengguna menemukan dan meluncurkannya dari tempat yang sama dengan aplikasi lain, berjalan di jendelanya sendiri, muncul di pengalih tugas, ikonnya dapat menampilkan badge notifikasi, dan sebagainya.

Kami ingin menutup kesenjangan kemampuan antara web dan native untuk memberikan fondasi yang kuat bagi aplikasi modern yang ditayangkan di web. Kami sedang berupaya menambahkan kemampuan platform web baru yang memberi Anda akses ke hal-hal seperti sistem file, penguncian layar saat aktif, dan menambahkan badge standby ke kolom URL untuk memberi tahu pengguna bahwa PWA Anda dapat diinstal, penginstalan kebijakan untuk perusahaan, dan banyak lagi.

Jika Anda sudah membuat PWA seluler, PWA desktop tidak berbeda. Bahkan, jika Anda sudah pernah menggunakan desain responsif, sebaiknya Anda sudah melakukannya. Codebase tunggal Anda akan berfungsi di seluruh desktop dan seluler. Jika Anda baru mulai menggunakan PWA, Anda akan terkejut melihat betapa mudahnya membuatnya!

  1. Menambahkan manifes
  2. Membuat kumpulan ikon
  3. Menambahkan pekerja layanan boilerplate

Kemudian, ulangi dari sana.

Signed HTTP Exchanges

Signed HTTP Exchanges (SXG), bagian dari teknologi baru yang disebut Paket Web, kini tersedia di Chrome 73. Signed HTTP Exchange memungkinkan pembuatan konten "portabel" yang dapat dikirimkan oleh pihak lain, dan ini adalah aspek utamanya, yang mempertahankan integritas dan atribusi situs aslinya.

Signed HTTP Exchange: Inti

Tindakan ini akan memisahkan origin konten dari server yang mengirimkannya, tetapi karena telah ditandatangani, konten seperti dikirimkan dari server Anda. Saat memuat Signed HTTP Exchange ini, browser dapat menampilkan URL Anda dengan aman di kolom URL karena tanda tangan di pertukaran menunjukkan bahwa konten awalnya berasal dari origin Anda.

Pertukaran HTTP bertanda tangan memungkinkan pengiriman konten yang lebih cepat bagi pengguna, sehingga Anda dapat memperoleh manfaat CDN tanpa harus menyerahkan kontrol atas kunci pribadi sertifikat Anda. Tim AMP berencana menggunakan pertukaran HTTP yang ditandatangani di halaman hasil penelusuran Google untuk meningkatkan URL AMP dan mempercepat klik pada hasil penelusuran.

Lihat postingan Signed HTTP Exchanges Kinuko untuk mengetahui detail tentang cara memulainya.

Style sheet yang dapat dikonstruksi

Stylesheet yang dapat dibangun, yang baru di Chrome 73, memberi kita cara baru untuk membuat dan mendistribusikan gaya yang dapat digunakan kembali, yang sangat penting saat menggunakan Shadow DOM.

Membuat stylesheet menggunakan JavaScript dapat dilakukan kapan saja. Buat elemen <style> menggunakan document.createElement('style'). Kemudian, akses properti sheetnya untuk mendapatkan referensi ke instance CSSStyleSheet yang mendasarinya, dan tetapkan gayanya.

Diagram yang menunjukkan persiapan dan penerapan CSS

Menggunakan metode ini cenderung menyebabkan ukuran sheet gaya yang menggelembung. Lebih buruk lagi, hal ini menyebabkan kejadian cepat konten yang tidak bergaya. Stylesheet yang dapat dibuat memungkinkan untuk menentukan dan menyiapkan gaya CSS bersama, lalu menerapkan gaya tersebut ke beberapa Shadow Root atau Document dengan mudah dan tanpa duplikasi.

Update untuk CSSStyleSheet bersama diterapkan ke semua root tempat diadopsi, dan pengadopsian stylesheet dapat dilakukan dengan cepat dan sinkron setelah sheet dimuat.

Cara memulainya cukup mudah, buat instance CSSStyleSheet baru, lalu gunakan replace atau replaceSync untuk memperbarui aturan stylesheet.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Lihat postingan Constructable Stylesheets: gaya yang dapat digunakan kembali dari Jason Miller untuk mengetahui detail dan contoh kode selengkapnya.

Dan banyak lagi!

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

  • matchAll(), adalah metode pencocokan ekspresi reguler baru pada prototipe string, dan menampilkan array yang berisi kecocokan lengkap.
  • Elemen <link> sekarang mendukung properti imagesrcset dan imagesizes agar sesuai dengan atribut srcset dan sizes dari HTMLImageElement.
  • Penerapan radius pemburaman bayangan Blink, kini cocok dengan Firefox dan Safari.
  • Mode gelap untuk UI Chrome kini didukung di Mac, dan dukungan Windows sedang dalam proses. Selain itu, ada pekerjaan pada kueri media CSS: prefers-color-scheme, yang dapat digunakan untuk mendeteksi apakah pengguna telah meminta sistem untuk menggunakan tema warna terang atau gelap. Bug pelacakan untuk hal ini adalah Tambahkan dukungan untuk fitur media CSS prefers-color-scheme Untuk Chrome, dan Firefox.

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 74 dirilis, saya akan memberi tahu Anda apa yang baru di Chrome!