Nowości w Chrome 85

Pete LePage

Chrome 85 zaczyna być wdrażany w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage i pracuję oraz nagrywam filmy z domu. Zobaczmy, co nowego w Chrome 85 dla deweloperów.

Widoczność treści

Proces renderowania w przeglądarce

Przekształcanie kodu HTML w coś, co użytkownik może zobaczyć, wymaga od przeglądarki wykonania kilku czynności, zanim będzie można wyświetlić pierwszy piksel. Robi to na całej stronie, nawet w przypadku treści niewidocznych w widocznym obszarze.

Zastosowanie atrybutu content-visibility: auto do elementu informuje przeglądarkę, że może pominąć proces renderowania tego elementu, dopóki nie przewinie się on do widoku, co zapewni szybsze początkowe renderowanie.


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

Aby uzyskać jak najlepszy efekt, zastosuj content-visibility w sekcji nadrzędnej z bardziej złożonymi algorytmami układu, takimi jak flexbox i grid, lub w sekcji zawierającej sekcje 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.

Aby dowiedzieć się, jak użyć widoczności treści do poprawy wydajności renderowania, zapoznaj się z tą funkcją.

@property i zmiennych CSS

Zmienne CSS, które technicznie nazywamy właściwościami niestandardowymi, są niesamowite. Za pomocą interfejsu Houdini CSS Properties and Values API możesz zdefiniować typ i domyślną wartość zastępczą dla właściwości niestandardowych. Omówiłem je wcześniej w artykule Nowości w Chrome 78, w którym opisaliśmy dodanie obsługi definiowania ich w JavaScript.

Od wersji 85 Chrome możesz też definiować i ustawiać właściwości CSS bezpośrednio w pliku CSS. Uwielbiam właściwości CSS, ponieważ nadają one właściwościom znaczenie semantyczne, wartości zastępcze, a nawet umożliwiają testowanie CSS.

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

Una napisała świetny post @property: giving superpowers to CSS variables, który pokazuje, jak można ich używać.

Pobieranie zainstalowanych powiązanych aplikacji

Interfejs API getInstalledRelatedApps() umożliwia Tobie sprawdzenie, czy Twoja aplikacja jest zainstalowana, a następnie dostosowywanie wrażeń użytkownika.

Możesz na przykład wyświetlić użytkownikowi na stronie docelowej inne treści, jeśli aplikacja jest już zainstalowana. Scentralizuj funkcje, które się pokrywają, w 1 aplikacji, aby uniknąć zamieszania. Jeśli natywna aplikacja jest już zainstalowana, nie promuj instalacji PWA.

Gdy ta funkcja została po raz pierwszy udostępniona w Chrome 80, działała tylko w przypadku aplikacji na Androida. Teraz na Androidzie może też sprawdzić, czy masz zainstalowaną PWA. W systemie Windows może sprawdzić, czy aplikacja UWP na Windowsa 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() powie Ci, jak to zrobić. Odwiedź stronę web.dev, aby dowiedzieć się, jak to działa, oraz jak podpisać aplikacje, aby udowodnić, że są Twoje.

Skróty do ikon aplikacji

Skrót do ikony aplikacji w Windows

W Chrome 84 dodaliśmy obsługę skrótów ikon aplikacji. Niechcący powiedziałem, że są dostępne wszędzie, ale są dostępne tylko na Androidzie. W Chrome 85 są one dostępne na Androidzie i Windowsie oraz w Chrome i 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" }
    ]
  }
]

Aby uzyskać więcej informacji, przeczytaj artykuł Skróty ikon aplikacji na stronie web.dev. Przepraszam za zamieszanie.

Origin Trial: żądania strumieniowe z fetch()

Od wersji 85 Chrome przesyłanie strumieniowe w procesie przesyłania jest dostępne jako wersja próbna.fetch Umożliwia to rozpoczęcie pobierania przed przygotowaniem treści żądania. Wcześniej można było rozpocząć wysyłanie żądania dopiero po przygotowaniu całego tekstu. Teraz można rozpocząć wysyłanie treści nawet wtedy, gdy są one jeszcze generowane.

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

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

Możesz go na przykład użyć do rozgrzania serwera lub przesyłania dźwięku lub obrazu w czasie, gdy są one rejestrowane przez mikrofon lub kamerę.

Jake szczegółowo omawia przesyłanie żądań strumieniowo za pomocą interfejsu fetch API na stronie web.dev, a także omawia go w najnowszym filmie o HTTP203 – przesyłanie żądań strumieniowo za pomocą fetch.

I nie tylko

Oczywiście jest ich znacznie więcej.

Promise.any zwraca obietnicę, która jest spełniona przez pierwszą daną obietnicę, aby została 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 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 obsługuje dekodowanie formatu AVIF, czyli formatu obrazu kodowanego za pomocą AV1 i standardowego w Alliance for Open Media. AVIF zapewnia znaczne korzyści w zakresie kompresji w porównaniu z JPEG i WebP. Ostatnie badanie Netflixa wykazało 50% oszczędności w porównaniu ze standardowym JPEG i ponad 60% oszczędności w przypadku treści 4:4:4.

Rozpoczęliśmy usuwanie AppCache.

Więcej informacji

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

Subskrybuj

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

Mam na imię Pete LePage i wreszcie obciąłem włosy.

Gdy tylko wprowadzimy Chrome 86, od razu dam Ci znać, co nowego w tej wersji.