Nowości w Chrome 97

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Szczęśliwego Nowego Roku! Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla deweloperów w Chrome 97.

Transport internetowy

Jeśli do przesyłania komunikatów 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 oferujący małe opóźnienia, dwukierunkową komunikację klient-serwer.

Ma mniejsze opóźnienie niż WebSockets. W przeciwieństwie do interfejsu RTC Data Channel API, który służy do komunikacji peer-to-peer, interfejs Web Transport API został zaprojektowany specjalnie do komunikacji klient-serwer.

Obsługuje ona wysyłanie danych w sposób niezawodny za pomocą interfejsów API strumieniowania, a także w niezawodny sposób przy użyciu interfejsów API datagramów. Jest obsługiwane w kampaniach internetowych. A ponieważ zawiera interfejs zgodny ze strumieniami, obsługuje optymalizacje związane z obciążeniem wstecznym.

Do korzystania z niego potrzebny jest serwer, który obsługuje protokół HTTP/3, co jest ogólnie łatwiejsze niż skonfigurowanie i obsługa serwera WebRTC. Otwórz nową instancję WebTransport, poczekaj na połączenie i 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);

Więcej informacji znajdziesz w artykule Eksperymentowanie z WebTransport na stronie web.dev.

Wykrywanie cech typu skryptu

Obecnie możemy używać atrybutu nomodule, aby wykrywać obsługę modułów JavaScript w przeglądarce. W trakcie opracowywania jest jednak kilka nowych propozycji funkcji, takich jak mapy importu, reguły spekulacyjne i wstępne wczytywanie pakietów. Musimy wiedzieć, co przeglądarka obsługuje.

Wpisz HTMLScriptElement.supports(). Możesz go użyć, aby określić, jakiego typu skryptów możesz używać, i wybrać najlepszą opcję dla przeglądarki.

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

Prototypy nowych tablic

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

Te funkcje są w praktyce takie same jak funkcje find() i findIndex(), ale służą do wyszukiwania od końca tablicy, a nie od początku.

Aby np. znaleźć ostatnią liczbę w tablicy, która ma więcej niż dziesięć, wywołaj findLast() za pomocą funkcji testowej, która sprawdza, czy wartość jest większa niż dziesięć.

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

Emuluj Chrome 100 w ciągu znaków UA

Za kilka miesięcy wprowadzamy Chrome 100, 3-cyfrowy numer wersji. Każdy kod, który sprawdza numery wersji lub analizuje ciąg UA, należy sprawdzać pod kątem obsługi 3 cyfr.

Dostępna jest flaga o nazwie #force-major-version-to-100, która zmieni numer bieżącej wersji na 100, dzięki czemu możesz mieć pewność, że wszystko działa zgodnie z oczekiwaniami.

Strona flag Chrome z wyróżnioną nową opcją #force-major-version-to-100

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Nowe wiersze w wpisach formularzy są teraz normalizowane w taki sam sposób jak w narzędziach Gecko i WebKit, co zwiększa interoperacyjność między przeglądarkami.

Standaryzujemy nazwy wskazówek dla klientów, dodając do nich prefiks sec-ch. np. dpr zmieni się na sec-ch-dpr. Będziemy nadal obsługiwać obecne wersje tych wskazówek, ale należy zaplanować ich wycofanie i usunięcie.

Zamknięte elementy <details> można teraz wyszukiwać i można do nich tworzyć linki. Te ukryte elementy będą automatycznie się rozwijać, gdy zostanie użyte znalezienie na stronie, parametr ScrollToTextFragment lub nawigacja po fragmencie.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 97.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Pete LePage i jak tylko pojawi się Chrome 98, będę informować Cię o nowościach w Chrome.