Nowości w Chrome 96

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Na koniec nagrywam w studiu. Przyjrzyjmy się nowościom dla programistów Chrome w wersji 96.

Plik manifestu id dla PWA

Gdy użytkownik instaluje aplikację PWA, przeglądarka musi ją jednoznacznie zidentyfikować. Do niedawna specyfikacja pliku manifestu aplikacji internetowej nie określała, jak rozpoznać PWA, co pozostawiało przeglądarki do wyboru i prowadziła do różnych implementacji. W niektórych przeglądarkach używana jest ścieżka start_url, a w innych ścieżka do pliku manifestu.

Dlatego zmiana w jednym z tych pól nie wpływa negatywnie na proces instalacji. Teraz udostępniliśmy nową opcjonalną właściwość id, która umożliwia jawne definiowanie identyfikatora aplikacji PWA.

Dodanie właściwości id do pliku manifestu usuwa zależność od start_url lub lokalizacji tego pliku i umożliwia aktualizowanie tych pól.

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

Obsługa usługi id będzie dostępna w przeglądarkach opartych na Chromium na komputerach (od Chrome 96). Obsługa urządzeń mobilnych, które obecnie używają adresu URL pliku manifestu jako unikalnego identyfikatora, powinna pojawić się w pierwszej połowie 2022 r.

Narzędzia deweloperskie pokazujące obliczony identyfikator aplikacji

Jeśli masz już produkcyjną aplikację PWA i chcesz dodać do pliku manifestu id, musisz użyć identyfikatora przypisanego przez przeglądarkę. id znajdziesz w panelu Plik manifestu w panelu Aplikacja w Narzędziach deweloperskich.

W nowej aplikacji PWA możesz ustawić id na dowolną wartość w postaci ciągu znaków. Pamiętaj jednak, że nie będzie można tego zmienić, więc wybieraj rozsądnie.

{
  ...
  id: "SquooshApp",
  start_url: "/?homescreen=1",
  ...
}

Więcej informacji znajdziesz w artykule o unikalnym identyfikowaniu aplikacji PWA za pomocą właściwości identyfikatora aplikacji internetowej.

Moduły obsługi protokołów adresów URL na potrzeby aplikacji PWA

Aplikacje internetowe mogą używać navigator.registerProtocolHandler() do rejestracji jako modułu obsługi protokołu. Gmail może na przykład zarejestrować protokół mailto. Gdy użytkownik kliknie link z prefiksem mailto:, otworzy się Gmail, co ułatwi mu wysłanie e-maila.

Począwszy od Chrome 96, aplikacja PWA może być zarejestrowana jako moduł obsługi protokołów w ramach instalacji. Aby to zrobić w PWA, dodaj właściwość protocol_handlers do pliku manifestu aplikacji internetowej, określ protocol, które chcesz obsługiwać, i url, który ma być otwierany po kliknięciu.

  ...
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Istnieją tu pewne ograniczenia, nie można po prostu rejestrować żadnego protokołu. Aby uzyskać szczegółowe informacje i dowiedzieć się, jak za pomocą składni web+ tworzyć własne protokoły, zapoznaj się z informacjami o rejestracji modułów obsługi protokołów URL na potrzeby aplikacji PWA.

Wskazówki dotyczące priorytetu (wersja próbna origin)

Gdy przeglądarka analizuje stronę internetową i zaczyna wyszukiwać oraz pobierać zasoby, takie jak obrazy, skrypty czy CSS, przypisuje im priorytet pobierania, aby zoptymalizować wczytywanie strony. Przeglądarki dość dobrze radzą sobie z przypisywaniem priorytetów, ale nie zawsze będą optymalne.

Wskazówki dotyczące priorytetu to funkcja eksperymentalna, dostępna od wersji Chrome 96 w ramach wersji próbnej, która może pomóc w optymalizacji podstawowych wskaźników internetowych. Atrybut importance pozwala określić priorytety typów zasobów, takich jak CSS, czcionki, skrypty, obrazy czy elementy iframe.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

Oto na przykład strona Lotów Google. Ten obraz tła to największe wyrenderowanie treści (LCP).

Zrzut ekranu z Lotami Google z dużym obrazem tła

Zobaczmy, czy jest zapełniona podpowiedziami i bez nich. Gdy priorytet obrazu tła jest ustawiony na high, wskaźnik LCP spada z 2,6 sekundy do 1,9 sekundy.

Przeczytaj artykuł o optymalizowaniu wczytywania zasobów za pomocą interfejsu Fetch Priority API, aby dowiedzieć się więcej i dowiedzieć się, jak zarejestrować się w celu testowania origin, a także kilka świetnych przykładów tego, jak ta funkcja może zwiększyć wydajność renderowania.

Emuluj Chrome 100 w ciągu znaków UA

Na początku przyszłego roku wprowadzimy Chrome 100 – 3-cyfrowy numer wersji. Należy sprawdzać każdy kod, który sprawdza numery wersji lub analizuje ciąg UA, aby mieć pewność, że obsługuje 3 cyfry.

W Chrome 96 wprowadziliśmy nową flagę #force-major-version-to-100, która zmieni numer bieżącej wersji na 100, dzięki czemu wszystko będzie działać zgodnie z oczekiwaniami.

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

Szczegółowe informacje znajdziesz w artykule Wymuszanie wersji głównej Chrome 100 w ciągu znaków klienta użytkownika.

Chrome Dev Summit

Chrome Dev Summit to już całość. Wszystkie filmy i treści są dostępne online. Zajrzyj na stronę Chrome Dev Summit, a jeśli przegapisz prezentację lub transmisję na żywo, zajrzyj do playlisty CDS na kanale Chrome Developers w YouTube.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • Pamięć podręczna stanu strony internetowej (bfcache) jest teraz dostępna w wersji stabilnej i połącza Chrome z przeglądarkami Firefox i Safari.

Więcej informacji

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

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 97, będę informować Cię o nowościach w Chrome.