Nowości w Chrome 85

Pete LePage

Zaczynamy wprowadzać Chrome 85 w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i nagrywam z domu. Sprawdźmy, co nowego dla deweloperów w Chrome 85.

Widoczność treści

Proces renderowania w przeglądarkach

Przekształcenie kodu HTML w to, co zobaczy użytkownik, wymaga wykonania przez przeglądarkę kilku czynności, zanim będzie w stanie wyrenderować pierwszy piksel. Dotyczy to całej strony, nawet jeśli treści nie są widoczne w widocznym obszarze.

Zastosowanie atrybutu content-visibility: auto do elementu informuje przeglądarkę, że może ona pominąć renderowanie tego elementu, dopóki nie przewinie się w widoczny obszar, co przyspieszy renderowanie wstępne.


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

Aby jak najlepiej wykorzystać możliwości funkcji content-visibility, zastosuj ją do sekcji nadrzędnych z bardziej złożonymi algorytmami układu, np. flexbox i grid, lub w sekcjach podrzędnych z własnymi układami składowymi.

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

Zapoznaj się z widocznością treści, aby dowiedzieć się, jak możesz wykorzystać tę funkcję do poprawy wydajności renderowania.

@property i zmienne CSS

Zmienne CSS, czyli techniczne właściwości niestandardowe, są niesamowite. Za pomocą interfejsu Houdini CSS Właściwości and Value API możesz zdefiniować typ i domyślną wartość zastępczą dla właściwości niestandardowych. Poprzednio omówiliśmy je w sekcji Nowości w Chrome 78, gdy dodaliśmy obsługę definiowania ich w języku JavaScript.

Od Chrome 85 możesz też definiować i ustawiać właściwości CSS bezpośrednio w pliku CSS. we właściwościach CSS podoba mi się to, że nadają im znaczenie semantyczne i wartości zastępcze, a nawet umożliwiają testowanie CSS.

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

Ula ma świetnego posta @property: supermoce zmiennych CSS, które pokazują, jak można ich użyć.

Pobieranie zainstalowanych powiązanych aplikacji

Interfejs getInstalledRelatedApps() API pozwala Ciebie sprawdzić, czy Twoja aplikacja jest zainstalowana, a następnie dostosować sposób jej działania.

Jeśli Twoja aplikacja jest już zainstalowana na urządzeniu, możesz na przykład wyświetlać użytkownikom inne treści na stronie docelowej. Scentralizuj pokrywające się funkcje w jednej aplikacji, aby uniknąć niejasności. Jeśli aplikacja natywna jest już zainstalowana, nie zachęcaj do jej instalacji.

W chwili wprowadzenia na rynek w Chrome 80 działała tylko w aplikacjach na Androida. Teraz na Androidzie może też sprawdzić, czy aplikacja PWA jest zainstalowana. Z kolei w systemie Windows może sprawdzić, czy jest zainstalowana Twoja aplikacja UWP dla systemu Windows.

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

Przeczytaj mój artykuł Czy Twoja aplikacja jest zainstalowana? getInstalledRelatedApps() powie Ci to! na web.dev, aby zobaczyć, jak to działa i jak podpisać aplikacje, aby udowodnić, że należą do Ciebie.

Skróty w postaci ikon aplikacji

Skrót do aplikacji w systemie Windows

W Chrome 84 dodaliśmy obsługę skrótów w ikonach aplikacji. Przypadkowo powiedziałem, że są dostępne wszędzie, a tylko na Androidzie. Obecnie w Chrome 85 są dostępne na urządzeniach z Androidem i Windows, a także 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" }
    ]
  }
]

Szczegółowe informacje znajdziesz w artykule Skróty do aplikacji na web.dev. Przepraszam za zamieszanie.

Wersja próbna źródła: żądania strumieniowego przesyłania danych za pomocą usługi fetch()

Od wersji Chrome 85 strumieniowanie danych przesyłanych w fetch jest dostępne w ramach wersji próbnej origin. Umożliwia rozpoczęcie pobierania, zanim treść żądania będzie gotowa. Wcześniej można było wysłać prośbę dopiero wtedy, gdy jej treść była już gotowa. Teraz możesz jednak zacząć wysyłać treści nawet w trakcie ich generowania.

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

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

Można go wykorzystać na przykład do rozgrzewki serwera albo strumieniowego przesyłania dźwięku lub obrazu z mikrofonu lub kamery.

Jake szczegółowo zapoznaje się z artykułem na temat strumieniowego przesyłania żądań za pomocą interfejsu API pobierania na stronie web.dev, a także w najnowszym filmie HTTP203 – Streaming żądań z pobieraniem.

I nie tylko

Oczywiście dostępnych jest też wiele innych opcji.

Promise.any zwraca obietnicę, która zostaje spełniona przez pierwszą podaną obietnicę do spełnienia lub odrzucenia.

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

Zastępowanie wszystkich instancji w ciągu znaków jest łatwiejsze dzięki funkcji .replaceAll(). Koniec z wyrażeniami regularnymi.

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 AVIF, czyli formatu obrazu zakodowanego w AV1 i ustandaryzowanego przez organizację Alliance for Open Media. Format AVIF jest znacznie większy niż JPEG i WebP, a niedawne badanie Netflix wykazało 50% oszczędności w porównaniu ze standardowymi plikami JPEG oraz ponad 60% oszczędności w przypadku treści w formacie 4:4:4.

I rozpoczęło się usuwanie pamięci podręcznej aplikacji.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych momentów. Aby dowiedzieć się więcej o nowych zmianach w Chrome 85, kliknij poniższe linki.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage i w końcu obcięłam włosy.

Gdy tylko pojawi się Chrome 86, opowiem Ci o nowościach w Chrome.