Nowości w Chrome 85

Pete LePage

Chrome 85 zaczyna być teraz udostępniany w wersji stabilnej.

Oto, co należy wiedzieć na ten temat:

Jestem Pete LePage, pracuję i nagrywam w domu. Zobaczmy, co nowego w Chrome 85 dla deweloperów.

Widoczność treści

Proces renderowania w przeglądarkach

Aby przekształcić kod HTML w coś, co użytkownik może zobaczyć, przeglądarka musi wykonać szereg czynności, zanim będzie mogła wyświetlić pierwszy piksel. Dotyczy to całej strony, nawet treści, które nie są widoczne w widocznym obszarze.

Zastosowanie atrybutu content-visibility: auto do elementu informuje przeglądarkę, że może pominąć renderowanie tego elementu, dopóki nie pojawi się on w obszarze widoku, co przyspiesza pierwsze renderowanie.


.my-class {
  content-visibility: auto;
}

Aby w pełni wykorzystać możliwości content-visibility, zastosuj ją do sekcji nadrzędnych z bardziej złożonymi algorytmami układu, takimi jak flexbox i grid, lub do sekcji, które zawierają elementy podrzędne z własnymi układami.

Dzięki podzieleniu treści na mniejsze części i dodaniu content-visibility: auto; czas renderowania tej strony skrócił się z 232 ms do zaledwie 30 ms.

Sprawdź widoczność treści, aby dowiedzieć się, jak możesz jej używać do poprawy wydajności renderowania.

@property i zmienne CSS

Zmienne CSS, czyli właściwości niestandardowe, są świetne. Za pomocą interfejsu Houdini CSS Properties and Values API możesz zdefiniować typ i domyślną wartość rezerwową dla swoich właściwości niestandardowych. Pisałem już o nich w artykule Nowości w Chrome 78, gdy dodaliśmy obsługę definiowania ich w JavaScript.

Od wersji 85 Chrome możesz też definiować i ustawiać właściwości CSS bezpośrednio w kodzie CSS. Właściwości CSS mają dla mnie tę zaletę, że nadają właściwości znaczenie semantyczne, wartości rezerwowe, a nawet umożliwiają testowanie CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una opublikowała świetny post @property: nadawanie supermocy zmiennym CSS z wyjaśnieniem, jak ich używać.

Pobieranie zainstalowanych powiązanych aplikacji

Interfejs getInstalledRelatedApps() API umożliwia Ci sprawdzenie, czy Twoja aplikacja jest zainstalowana, a następnie dostosowanie interfejsu do potrzeb użytkownika.

Na przykład, jeśli aplikacja jest już zainstalowana, wyświetlaj użytkownikowi inne treści na stronie docelowej. Skup funkcje, które się pokrywają, w jednej aplikacji, aby uniknąć zamieszania. Jeśli aplikacja natywna jest już zainstalowana, nie promuj instalacji progresywnej aplikacji internetowej.

Gdy ta funkcja została wprowadzona w Chrome 80, działała tylko w przypadku aplikacji na Androida. Teraz na Androidzie może też sprawdzać, czy Twoja progresywna aplikacja internetowa jest zainstalowana. W systemie Windows może sprawdzić, czy aplikacja UWP w systemie Windows jest zainstalowana.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Przeczytaj mój artykuł:Czy aplikacja jest zainstalowana? getInstalledRelatedApps() na web.dev, aby dowiedzieć się, jak to działa i jak podpisywać aplikacje, aby udowodnić, że są Twoje.

Skróty do ikon aplikacji

Skrót do ikony aplikacji w systemie Windows

W Chrome 84 dodaliśmy obsługę skrótów do ikon aplikacji. Przez przypadek powiedziałem, że są dostępne wszędzie, ale były dostępne tylko na Androidzie. Obecnie w Chrome 85 są one dostępne na Androidzie i Windowsie, zarówno w Chrome, jak i w Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Więcej informacji znajdziesz w artykule Skróty do ikon aplikacji na stronie web.dev. Przepraszam za zamieszanie.

Testowanie interfejsu API: żądania przesyłania strumieniowego z użyciem fetch()

Od Chrome 85 fetch przesyłanie strumieniowe jest dostępne w ramach testu pochodzenia. Umożliwia rozpoczęcie pobierania przed przygotowaniem treści żądania. Wcześniej można było rozpocząć przesyłanie żądania dopiero po przygotowaniu całego tekstu. Teraz możesz zacząć wysyłać treści, nawet jeśli nadal je generujesz.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Możesz na przykład użyć go do rozgrzania serwera lub przesyłania strumieniowego dźwięku lub obrazu z mikrofonu lub kamery.

Jake szczegółowo omawia to zagadnienie w artykule Streaming requests with the fetch API na web.dev. Porusza je też w najnowszym filmie HTTP203 - Streaming requests with fetch.

i nie tylko.

Oczywiście jest ich znacznie więcej.

Promise.any zwraca obietnicę, która jest spełniana przez pierwszą podaną obietnicę, która zostanie spełniona lub odrzucona.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Zastępowanie wszystkich wystąpień w ciągu znaków jest łatwiejsze dzięki funkcji .replaceAll(). Nie musisz już używać wyrażeń regularnych.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 dodaje obsługę dekodowania formatu AVIF, formatu obrazu zakodowanego za pomocą AV1 i znormalizowanego przez Alliance for Open Media. Format AVIF zapewnia znacznie lepszą kompresję niż JPEG i WebP. Z ostatniego badania przeprowadzonego przez Netflix wynika, że w porównaniu ze standardowym formatem JPEG oszczędność wynosi 50%, a w przypadku treści 4:4:4 – ponad 60%.

Rozpoczęto usuwanie AppCache.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Więcej informacji o zmianach w Chrome 85 znajdziesz w linkach poniżej.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj nasz kanał Chrome Developers na YouTube. Będziesz wtedy otrzymywać e-maile z powiadomieniami o nowych filmach.

Mam na imię Pete LePage i wreszcie udało mi się obciąć włosy.

Gdy tylko Chrome 86 zostanie udostępniony, od razu Cię o tym poinformuję.