Nowości w Chrome 107

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • W interfejsie Screen Capture API pojawiły się nowe właściwości, które ulepszają udostępnianie ekranu.
  • Teraz możesz dokładnie określić, czy zasób na stronie blokuje renderowanie.

  • W ramach testowania origin dostępny jest nowy sposób wysyłania danych do serwera backendu za pomocą deklaratywnego interfejsu PendingBeacon API. A to nie wszystko.

  • A to nie wszystko.

Nazywam się Adriana Jara. Przejdźmy do nowości dla deweloperów w Chrome 107.

Nowe właściwości w interfejsie Screen Capture API

W tej wersji interfejs Screen Capture API dodaje nowe właściwości, które ulepszają udostępnianie ekranu.

DisplayMediaStreamOptions dodał właściwość selfBrowserSurface. Dzięki tej wskazówce aplikacja może poinformować przeglądarkę, że podczas wywoływania getDisplayMedia() bieżąca karta powinna zostać wykluczona.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

Pomaga to zapobiegać przypadkowemu nagrywaniu siebie i uniknąć efektu „gabinetu luster”, który można zaobserwować podczas rozmów wideo.

DisplayMediaStreamOptions ma teraz również właściwość surfaceSwitching. Ta właściwość dodaje opcję programowego kontrolowania, czy Chrome wyświetla przycisk przełączania kart podczas udostępniania ekranu. Te opcje zostaną przekazane do getDisplayMedia(). Przycisk Share this tab instead umożliwia użytkownikom przełączenie się na nową kartę bez konieczności powrotu do karty rozmowy wideo lub wybierania z długiej listy kart. To działanie jest jednak dostępne warunkowo, na wypadek gdyby aplikacja internetowa go nie obsługiwała.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

MediaTrackConstraintSet dodaje też właściwość displaySurface. Gdy wywoływana jest metoda getDisplayMedia(), przeglądarka oferuje użytkownikowi wybór powierzchni wyświetlania: karty, okna lub monitory. Dzięki ograniczeniu displaySurface aplikacja internetowa może teraz podpowiadać przeglądarce, czy preferuje, aby jeden z typów powierzchni był wyświetlany w bardziej widoczny sposób.

Może to na przykład pomóc zapobiec przypadkowemu udostępnieniu zbyt wielu informacji, ponieważ domyślnie można udostępniać tylko jedną kartę.Zrzuty ekranu przedstawiające stare i nowe prośby o wybór mediów.

Identyfikowanie zasobów blokujących renderowanie

Niezawodne statystyki dotyczące wydajności strony mają kluczowe znaczenie dla deweloperów, którzy chcą tworzyć szybkie i wygodne dla użytkowników rozwiązania. Do tej pory deweloperzy musieli polegać na złożonych heurystykach, aby określić, czy zasób blokuje renderowanie.

Teraz interfejs Performance API zawiera właściwość renderBlockingStatus, która dostarcza bezpośredni sygnał z przeglądarki identyfikujący zasoby, które uniemożliwiają wyświetlanie strony, dopóki nie zostaną pobrane.

Ten fragment kodu pokazuje, jak uzyskać listę wszystkich zasobów i użyć nowej właściwości renderBlockingStatus, aby wyświetlić listę wszystkich zasobów, które blokują renderowanie.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

Optymalizacja sposobu wczytywania zasobów pomaga poprawić Core Web Vitals i zapewnić użytkownikom lepsze wrażenia. Zapoznaj się z dokumentacją MDN, aby dowiedzieć się więcej o interfejsie Performance API, wyszukaj zasoby blokujące renderowanie i zoptymalizuj je.

Testowanie origin interfejsu PendingBeacon API

Deklaratywny interfejs PendingBeacon API umożliwia przeglądarce kontrolowanie momentu wysyłania sygnałów.

Sygnał nawigacyjny to pakiet danych wysyłany do serwera backendu, który nie oczekuje konkretnej odpowiedzi.

Aplikacje często chcą wysyłać te sygnały pod koniec wizyty użytkownika, ale nie ma dobrego momentu na wywołanie „wyślij”. Ten interfejs API przekazuje wysyłanie do samej przeglądarki, dzięki czemu może obsługiwać sygnały typu beacon w przypadku zdarzeń page unload lub page hide bez konieczności implementowania przez dewelopera wywołań wysyłania w odpowiednich momentach.

Zarejestruj się, aby skorzystać z wersji próbnej origin, wypróbuj interfejs API i prześlij nam opinię, abyśmy mogli ulepszyć przypadki użycia.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

  • Nagłówek HTTP expect-ct został wycofany.
  • Atrybut rel jest teraz obsługiwany w elementach <form>.
  • Ostatnio wspominałem o interpolacji grid-template, tym razem powinna być uwzględniona.

Więcej informacji

Obejmuje on tylko niektóre najważniejsze informacje. Kliknij linki poniżej, aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 107.

Zasubskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers na YouTube. Będziesz otrzymywać e-maile z powiadomieniami o nowych filmach.

Nazywam się Adriana Jara i gdy tylko Chrome 108 zostanie wydany, opowiem Wam o nowościach w tej wersji.