Nowości w Chrome 107

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

  • W ramach testów wersji źródłowej udostępniliśmy nowy sposób przesyłania danych do serwera backendu za pomocą deklaratywnego interfejsu PendingBeacon API. I to nie wszystko.

  • A to nie koniec.

Nazywam się Adriana Jara. Przyjrzyjmy się bliżej nowościom w Chrome 107 dla deweloperów.

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.

Właściwość DisplayMediaStreamOptions została dodana do selfBrowserSurface. Dzięki temu podpowiedzi aplikacja może poinformować przeglądarkę, że podczas wywoływania getDisplayMedia() powinna wykluczyć bieżącą kartę.

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

Pomaga to uniknąć przypadkowego uchwycenia siebie na filmie i efektu „Hall of Mirrors” podczas rozmów wideo.

Usługa DisplayMediaStreamOptions ma teraz też właściwość surfaceSwitching. Ta właściwość dodaje opcję umożliwiającą sterowanie programowo tym, czy Chrome ma 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łączanie się na nową kartę bez konieczności wracania do karty wideokonferencji ani wybierania z długiej listy kart. To zachowanie jest wyświetlane warunkowo na wypadek, gdyby aplikacja internetowa nie obsługiwała tej funkcji.

// 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 funkcja getDisplayMedia(), przeglądarka oferuje użytkownikowi wybór powierzchni wyświetlania: kart, okien lub monitorów. Korzystając z ograniczenia displaySurface, aplikacja internetowa może teraz podawać wskazówkę dla przeglądarki, jeśli preferuje, że jeden z typów powierzchni ma być lepiej widoczny.

Może to na przykład zapobiegać przypadkowemu udostępnianiu zasobów, ponieważ domyślnie można udostępnić tylko jedną kartę. Zrzuty ekranu przedstawiające poprzednie i nowe opcje wyboru mediów.

Określ zasoby blokujące renderowanie

Niezawodne informacje o wydajności strony są kluczowe dla deweloperów, którzy chcą zapewnić użytkownikom szybkie działanie. Do tej pory deweloperzy korzystali z kompleksowych heurystyk, aby określić, czy dany zasób blokuje renderowanie.

Interfejs Performance API zawiera teraz właściwość renderBlockingStatus, która przekazuje bezpośredni sygnał z przeglądarki, który identyfikuje zasoby uniemożliwiające wyświetlenie strony, dopóki nie zostaną pobrane.

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ć podstawowe wskaźniki internetowe i zapewnić lepsze wrażenia użytkownika. Aby dowiedzieć się więcej o interfejsie Performance API, poszukaj w dokumentacji MDN zasobów blokujących renderowanie i je zoptymalizuj.

Testowanie origin interfejsu PendingBeacon API

Deklaratoryczny interfejs API PendingBeacon umożliwia przeglądarce kontrolowanie czasu wysyłania beaconów.

Beacon to pakiet danych wysyłany na serwer backendu bez oczekiwania na konkretną odpowiedź.

Aplikacje często chcą wysyłać te beacony pod koniec wizyty użytkownika, ale nie ma dobrego czasu na wykonanie tego wezwania. Ten interfejs API przekazuje wysyłanie wiadomości do samej przeglądarki, dzięki czemu może obsługiwać obrazy typu beacon w systemie page unload lub w systemie page hide bez konieczności wdrażania przez programistę wywołań wysyłania we właściwym czasie.

Zarejestruj się na okres próbny wersji oryginalnej, wypróbuj interfejs API i prześlij opinię, abyśmy mogli ulepszyć przypadki użycia.

I inne funkcje

Oczywiście dostępnych jest też znacznie więcej.

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

Więcej informacji

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

Subskrybuj

Zasubskrybuj kanał Chrome Developers w YouTube, aby być na bieżąco z informacjami o nowym filmie. Dzięki temu będziesz otrzymywać e-maila z powiadomieniem.

Nazywam się Adriana Jara i jak tylko pojawi się nowa wersja Chrome 108, opowiem Ci, co nowego w Chrome.