Nowości w Chrome 97

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Szczęśliwego Nowego Roku! Mam na imię Pete LePage. Zobaczmy, co nowego dla programistó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ę. WebTransport to nowy interfejs API zapewniający przesyłanie wiadomości klient-serwer z krótkim czasem oczekiwania oraz dwukierunkowe.

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 niezawodnie za pomocą interfejsów API strumieni danych i niezawodnie za pomocą interfejsów API danychgramów. Jest ona obsługiwana w instancjach roboczych. 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 możemy użyć atrybutu nomodule do wykrywania obsługi modułów JavaScript w przeglądarce. 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

To wspaniałe, gdy JavaScript jest prostszy. 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 wprowadzimy Chrome 100, czyli wersję o 3 cyfrach. Należy sprawdzić każdy kod, który sprawdza numery wersji lub analizuje ciąg znaków 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óżnioną nową opcją #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.

Standardyzujemy nazwy podpowiedzi dla klientów, poprzedzając je ciągiem 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 dodawać do nich linki. Te ukryte elementy będą automatycznie się rozwijać po wyszukaniu na stronie lub w przypadku użycia elementu ScrollToTextFragment oraz nawigacji po fragmentach elementów.

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.