Baru di Chrome 93

Pete LePage

Berikut ini hal yang perlu Anda ketahui:

  • Sekarang Anda dapat memuat lembar gaya CSS dengan pernyataan import, seperti modul JavaScript.
  • PWA yang diinstal dapat mendaftar sebagai pengendali URL, sehingga memungkinkan pengguna langsung membuka PWA Anda.
  • Multi-Screen Window Placement API telah diperbarui berdasarkan masukan Anda, dan memulai uji coba origin kedua.
  • PWA Summit akan diadakan pada 6-7 Oktober.
  • Dan masih banyak lagi.

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

Skrip Modul CSS

Sekarang Anda dapat memuat lembar gaya CSS dengan pernyataan import, seperti modul JavaScript. Sheet gaya kemudian dapat diterapkan ke dokumen atau root bayangan dengan cara yang sama seperti stylesheet yang dapat dibuat.

Fitur Skrip Modul CSS baru sangat cocok untuk elemen kustom. Dan tidak seperti cara lain untuk menerapkan CSS dari JavaScript, Anda tidak perlu membuat elemen, atau mengacaukan string JavaScript teks CSS.

Untuk menggunakannya, impor lembar gaya dengan assert {type: 'css'}, lalu terapkan ke document atau shadowRoot dengan memanggil adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Namun, berhati-hatilah, jika Anda tidak menyertakan assert, file akan diperlakukan sebagai JavaScript, dan tidak akan berfungsi.

Lihat Menggunakan Skrip Modul CSS untuk mengimpor stylesheet di web.dev untuk mengetahui detail selengkapnya.

Multi-Screen Window Placement API

Untuk beberapa aplikasi, membuka jendela baru dan menempatkannya di tempat tertentu atau tampilan tertentu adalah fitur yang penting. Misalnya, saat menggunakan Slide untuk presentasi, saya ingin slide muncul dalam layar penuh di layar utama, dan catatan pembicara saya muncul di layar lain.

Multi-Screen Window Placement API memungkinkan untuk menghitung layar yang terhubung ke komputer pengguna, dan menempatkan jendela di layar tertentu. Ini adalah uji coba origin kedua, dan kami telah melakukan sejumlah perubahan berdasarkan masukan Anda.

Anda dapat dengan cepat memeriksa apakah ada lebih dari satu layar yang terhubung ke perangkat:

const isExtended = window.screen.isExtended;
// returns true/false

Namun, fungsi utamanya ada di window.getScreens(), yang memberikan semua detail tentang layar yang terpasang.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Misalnya, Anda dapat menentukan layar utama, lalu menggunakan requestFullscreen() untuk menampilkan elemen di layar tersebut.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Dan menyediakan cara untuk memproses perubahan, misalnya jika layar baru dicolokkan, atau dilepas.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Baca artikel Tom Mengelola beberapa tampilan dengan Multi-Screen Window Placement API di web.dev untuk pembahasan lebih mendalam.

Siklus rilis yang lebih singkat

Pada bulan Maret, kami mengumumkan rencana untuk mempersingkat siklus rilis dan mengirimkan versi baru Chrome setiap empat minggu.

Waktunya telah tiba, dan kami akan meluncurkan Chrome 94 pada 21 September. Anda dapat menemukan tanggal rilis yang direncanakan untuk setiap versi di Kalender Chrome.

Fitur PWA baru

Jika Anda membangun Progressive Web App, ada dua uji coba origin baru yang perlu dicoba.

Pengendali URL untuk PWA

Jika Anda telah menginstal PWA, dan mengklik link ke PWA tersebut, Anda mungkin ingin link tersebut dibuka di PWA, bukan tab browser.

Dengan menentukan url_handlers dalam manifes aplikasi web, dan menambahkan file web-app-origin-association ke direktori .well-known/, Anda dapat memberi tahu browser bahwa jika pengguna mengklik link ke PWA Anda, link tersebut akan terbuka dalam PWA yang diinstal.

Contoh url_handlers dalam file manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Contoh file web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Dan dengan sedikit verifikasi tambahan, Anda bahkan dapat meminta PWA menangani link dari origin lain yang Anda miliki.

Semua detail tentang uji coba origin ada di PWA sebagai Pengendali URL di web.dev.

Overlay kontrol jendela

Overlay kontrol jendela memperluas area klien untuk mencakup seluruh jendela, termasuk kolom judul, dan tombol kontrol jendela, seperti tombol tutup, maksimalkan, dan minimalkan.

Anda dapat menggunakan fitur ini untuk membuat PWA yang diinstal terlihat lebih mirip dengan aplikasi terinstal lainnya.

Untuk mengetahui informasi selengkapnya tentang uji coba origin, lihat Menyesuaikan overlay kontrol jendela di panel judul PWA Anda.

PWA Summit

PWA Summit akan hadir pada bulan Oktober. Ini adalah konferensi online gratis yang berfokus untuk membantu semua orang meraih kesuksesan dengan Progressive Web App. PWA Summit adalah kolaborasi antara orang-orang dari beberapa perusahaan berbeda yang terlibat dalam pembuatan teknologi PWA: Google, Intel, Microsoft, dan Samsung.

Ada banyak diskusi dan konten yang menarik. Anda dapat mempelajari lebih lanjut dan mendaftar di PWASummit.org.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Flexbox dan item flexbox telah menambahkan dukungan untuk kata kunci perataan: start, end, self-start, self-end, left, dan right.
  • API papan klip asinkron kini mendukung file SVG.
  • Selain itu, atribut media akan diterapkan saat menyetel meta theme-color, sehingga Anda dapat menentukan warna tema yang berbeda untuk mode terang dan gelap.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Bacaan lebih lanjut

Ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 93.

Langganan

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

Saya Pete LePage, dan begitu Chrome 94 dirilis, saya akan segera memberi tahu Anda apa saja yang baru di Chrome.