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 ułatwiają 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.

  • I to nie wszystko .

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 zawiera nowe właściwości, które ułatwiają 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);

Ponadto MediaTrackConstraintSet dodaje 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. Za pomocą ograniczenia displaySurface aplikacja internetowa może teraz zasugerować przeglądarce, czy preferuje jeden z typów powierzchni, który ma być wyświetlany w bardziej widocznym miejscu.

Może to na przykład zapobiegać przypadkowemu udostępnianiu zasobów, ponieważ domyślnie można udostępnić tylko jedną kartę. Zrzuty ekranu starego i nowego promptu selektora multimediów.

Identyfikowanie zasobów blokujących 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 zasobów blokujących renderowanie i zoptymalizuj je. Więcej informacji znajdziesz w dokumentacji MDN.

Testowanie origin interfejsu PendingBeacon API

Deklaratywny interfejs PendingBeacon API umożliwia przeglądarce kontrolowanie, kiedy beacony są wysyłane.

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

Aplikacje często chcą wysyłać te sygnały na końcu wizyty użytkownika, ale nie ma odpowiedniego momentu na wywołanie metody „send”. Ten interfejs API deleguje wysyłanie do przeglądarki, dzięki czemu może obsługiwać beacony na page unload lub na page hide bez konieczności implementowania wywołań send 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 jest ich 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

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

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

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