Nowości w Chrome 107

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

• Istnieje nowy sposób wysyłania danych na serwer backendu za pomocą deklaratywnego interfejsu PendingBeacon API w ramach testowania origin. To jeszcze nie wszystko.

• A do tego wiele więcej.

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla programistó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 poprawiające udostępnianie ekranu.

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

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

Pomaga to zapobiegać przypadkowemu robieniu zdjęć samodzielnie i unikać efektu „Hall of Mirrors” znanego z rozmów wideo.

DisplayMediaStreamOptionsma teraz także właściwość surfaceSwitching. Ta właściwość dodaje opcję automatycznego kontrolowania, czy Chrome ma wyświetlać przycisk przełączania kart podczas udostępniania ekranu. Te opcje zostaną przekazane do getDisplayMedia(). Przycisk Share this tab instead pozwala użytkownikom przełączać się na nową kartę bez cofania się do karty rozmów wideo czy wybierania z długiej listy kart. To działanie jest widoczne warunkowo, na wypadek gdyby aplikacja internetowa nie działał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. Po wywołaniu getDisplayMedia() przeglądarka oferuje użytkownikowi wybór platform wyświetlania: kart, okien lub monitorów. Korzystając z ograniczenia displaySurface, aplikacja internetowa może teraz sugerować przeglądarce, jeśli wolą, by jeden z typów platform był lepiej widoczny.

Pomaga na przykład zapobiegać przypadkowemu udostępnianiu danych, ponieważ udostępnianie jednej karty może być domyślnym ustawieniem.

Identyfikowanie zasobów blokujących renderowanie

Wiarygodne statystyki wydajności strony są dla programistów bardzo ważne, aby mogli szybko zadbać o wygodę użytkowników. Do tej pory deweloperzy polegali na złożonych metodach heurystycznych, aby ustalić, czy zasób działa w sposób blokujący renderowanie.

Teraz interfejs Performance API zawiera właściwość renderBlockStatus, która wskazuje bezpośrednio przeglądarce zasoby, które uniemożliwiają wyświetlanie się Twojej strony, dopóki nie zostaną pobrane.

Fragment kodu pokazujący, jak uzyskać listę wszystkich zasobów i użyć nowej właściwości renderBlockStatus.

// 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 korzystać z podstawowych wskaźników internetowych i zwiększa wygodę użytkowników. Aby dowiedzieć się więcej o interfejsie Performance API, zapoznaj się z dokumentacją MDN, poszukaj związanych z nimi zasobów związanych z blokowaniem renderowania i odpowiednio je optymalizuj.

Testowanie origin interfejsu PendingBeacon API

Deklaatywny PendingBeacon API pozwala przeglądarce kontrolować, kiedy mają być wysyłane sygnały typu beacon.

Beacon to pakiet danych wysyłanych do serwera backendu bez oczekiwania na określoną odpowiedź.

Aplikacje często chcą wysyłać takie obrazy na koniec wizyty użytkownika, ale nie ma oczekiwanego czasu na takie polecenie. Ten interfejs API deleguje wysyłanie wiadomości do przeglądarki, dzięki czemu może obsługiwać sygnały typu beacon w systemie page unload lub page hide, bez konieczności implementowania wywołań wysyłanych w odpowiednich momentach.

Zarejestruj się w programie testowania origin, wypróbuj interfejs API i prześlij opinię, aby pomóc w ulepszaniu konkretnych przypadków użycia.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

• Nagłówek http expect-ct został wycofany.
• Atrybut rel jest teraz obsługiwany w elementach <form>.
• Jak ostatnio wspominaliśmy o interpolacji grid-template, tym razem powinna ona być uwzględniona.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 107.

• Nowości w Narzędziach deweloperskich w Chrome (107)
• Wycofanie i usunięcie Chrome 107
• Aktualizacje ChromeStatus.com w Chrome 107
• Lista zmian repozytorium źródłowego Chromium
• Kalendarz wydań Chrome

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Adriana Jara i jak tylko pojawi się Chrome 108, będę tu, by informować Cię o nowościach w Chrome.