Nowości w Chrome 97

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Szczęśliwego Nowego Roku! Mam na imię Pete LePage. Przyjrzyjmy się bliżej nowościom dla deweloperów w Chrome 97.

Web Transport

Jeśli do wysyłania wiadomości między serwerem a stroną używasz interfejsu Web Sockets lub interfejsu WebRTC Data Channel API, mamy dla Ciebie nową opcję. WebTransportto nowy interfejs API zapewniający dwukierunkową komunikację klient-serwer o krótkim czasie oczekiwania.

Ma on mniejsze opóźnienie niż WebSockets i w odróżnieniu od interfejsu RTC Data Channel API, który jest przeznaczony do przesyłania wiadomości typu peer-to-peer, interfejs Web Transport API został zaprojektowany specjalnie do przesyłania wiadomości typu klient-serwer.

Obsługuje wysyłanie danych w sposób niezawodny za pomocą interfejsów API strumieni danych oraz niezawodny za pomocą interfejsów API datagramów. Jest obsługiwana w procesach web worker. Ponieważ udostępnia interfejs zgodny ze standardem Streams, obsługuje optymalizacje związane z ciśnieniem wstecznym.

Aby z niego korzystać, potrzebujesz serwera obsługującego HTTP/3, co jest ogólnie łatwiejsze niż konfigurowanie i utrzymywanie serwera WebRTC. Otwórz nową instancję WebTransport, poczekaj, aż się połączy, a potem zacznij wysyłać dane.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

Aby dowiedzieć się więcej, przeczytaj artykuł Eksperymentowanie z WebTransport na stronie web.dev.

Wykrywanie funkcji typu skryptu

Obecnie do wykrywania obsługi modułów JavaScript w przeglądarce możemy używać atrybutu nomodule. W drodze jest jednak kilka nowych propozycji funkcji, takich jak importowanie map, reguły spekulacji i wstępne wczytywanie pakietów. Musimy wiedzieć, co dana przeglądarka obsługuje.

Wpisz HTMLScriptElement.supports(). Możesz go użyć, aby określić, których typów skryptów możesz używać, i przesłać przeglądarce najlepszą opcję.

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

Nowe prototypy tablic

Uwielbiam, gdy JavaScript staje się prostszy. Interfejsy Array i TypedArray obsługują teraz metody statyczne findLast() i findLastIndex().

Te funkcje są w podstawie takie same jak find() i findIndex(), ale szukają od końca tablicy zamiast od początku.

Aby na przykład znaleźć ostatnią liczbę w tablicy, która jest większa niż 10, wywołaj funkcję testową findLast(), która sprawdza, czy wartość jest większa niż 10.

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

Emulowanie Chrome 100 w ciągu UA

Za kilka miesięcy Chrome osiągnie wersję 100, czyli trzy cyfry. Należy sprawdzić każdy kod, który sprawdza numery wersji lub analizuje ciąg tekstowy UA, aby upewnić się, że obsługuje 3 cyfry.

Flaga o nazwie #force-major-version-to-100 zmieni bieżący numer wersji na 100, dzięki czemu możesz się upewnić, że wszystko działa zgodnie z oczekiwaniami.

Strona flag w Chrome z wyróżnieniem nowej opcji #force-major-version-to-100

I inne funkcje

Oczywiście jest ich znacznie więcej.

Nowe wiersze w formularzach są teraz normalizowane w taki sam sposób jak w Gecko i WebKit, co poprawia współdziałanie między przeglądarkami.

Ujednolicamy nazwy podpowiedzi dla klientów, dodając do nich prefiks sec-ch. Na przykład dpr zmieni się na sec-ch-dpr. Będziemy nadal obsługiwać obecne wersje tych podpowiedzi, ale należy się przygotować na ich wycofanie i usunięcie.

Zamknięte elementy <details> można teraz wyszukiwać i z nimi łączyć. Te ukryte elementy zostaną automatycznie rozwinięte, gdy użyjesz funkcji Znajdź na stronie, ScrollToTextFragmenti nawigacji po elementach.

Więcej informacji

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

Subskrybuj

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

Nazywam się Pete LePage i jak tylko pojawi się Chrome 98, opowiem Ci, co nowego w tej wersji.