Nowości w Chrome 124

Pete LePage

Oto najważniejsze funkcje Chrome 124:

Chcesz zobaczyć pełne podsumowanie? Zobacz Informacje o wersji Chrome 124

Używanie deklaratywnego shadow DOM w JavaScript

Dostępne są 2 nowe interfejsy API, które umożliwiają używanie deklaratywnego shadow DOM JavaScriptu.

setHTMLUnsafe() jest podobny do innerHTML i pozwala ustawić wewnętrzny kod HTML element podanego ciągu. Przydaje się to, gdy masz HTML, który zawiera deklaratywny shadow DOM.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

Jeśli używasz tylko zapisu innerHTML, przeglądarka nie przeanalizuje go poprawnie, a dodatkowy będzie błąd bez shadow DOM. W modelu setHTMLUnsafe() tworzony jest jednak model shadow DOM, element jest analizowany zgodnie z oczekiwaniami.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

Drugi interfejs API to parseHTMLUnsafe() i działa podobnie do DOMParser.parseFromString()

Oba te interfejsy API są niebezpieczne, co oznacza, że nie używają żadnych danych wejściowych sanityzacja. Dlatego musisz zadbać o to, by karmienie maluchów było bezpieczne. W nadchodzącej wersji planujemy wprowadzić wersję, która umożliwia dezynfekcję danych wejściowych.

Oba te interfejsy API są już obsługiwane w najnowszej wersji Firefox i Safari!

Interfejs WebSocket Stream API

WebSocket to świetny sposób przesyłania danych między z przeglądarką i serwerem, bez odpytywania. Idealne dla np. komunikator, w którym chcesz jak najszybciej zareagować wchodzą w interakcję.

Co jednak, jeśli dane przyjdą szybciej, niż sobie radzisz?

Nazywamy to ciśnieniem pleców i może powodować poważne bóle głowy. Interfejs WebSocket API nie ma dobrego sposobu na podciśnienie.

Interfejs WebSocket Stream API zapewnia generowanej przez nas mocy strumieni i gniazdek sieciowych, co oznacza, że ciśnienie wsteczne może można zastosować bez dodatkowych kosztów.

Zacznij od utworzenia nowego WebSocketStream i przekaż mu adres URL parametru Serwer WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

Następnie czekasz na otwarcie połączenia, co przekłada się w: ReadableStream i WritableStream. Wywołując funkcję ReadableStream.getReader(), otrzymujesz ReadableStreamDefaultReader z których możesz read() pobierać dane aż do zakończenia transmisji.

Aby zapisać dane, wywołaj metodę WritableStream.getWriter(), która daje Ci WritableStreamDefaultWriter, do których można potem write() przesyłać dane.

Zobacz ulepszenia procesów przenoszenia

Cieszę się z funkcji Widok przejść. Pojawiły się 2 nowe: w Chrome 124, zaprojektowanej z myślą o ułatwianiu przejścia między widokami.

Zdarzenie pageswap jest wywoływane w obiekcie okna dokumentu, gdy nawigacja spowoduje zastąpienie dokumentu nowym dokumentem.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

Blokowanie renderowania dokumentu, czyli blokowanie renderowania dokumentu, do momentu przeanalizowania kluczowych treści, zapewniając spójne pierwsze wyrenderowanie we wszystkich przeglądarkach.

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

  • disallowReturnToOpener informuje przeglądarkę, że nie powinna wyświetlać przycisku w obrazie w obrazie. okno, w którym użytkownik może wrócić na kartę otwierającą.

  • Kontenery przewijania dostępne dla klawiatury poprawia dostępność przez umożliwienie zaznaczania kontenerów przewijania za pomocą sekwencyjnego nawigacji po zaznaczeniu.

  • Instalacja uniwersalna pozwala użytkownikom instalować dowolne strony, nawet takie, które nie spełniają aktualne kryteria PWA.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Sprawdź te linki: dodatkowych zmian w Chrome 124.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage i wraz z opublikowaniem Chrome 125 opowie o nowościach w Chrome.