Nowości w Chrome 96

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage i wreszcie nagrywam w studio. Zobaczmy, co nowego dla deweloperów w Chrome 96.

Plik manifestu id dla aplikacji PWA

Gdy użytkownik zainstaluje PWA, przeglądarka musi mieć możliwość jego jednoznacznego zidentyfikowania. Jednak do niedawna specyfikacja pliku manifestu aplikacji internetowej nie określała, jak zidentyfikować PWA, pozostawiając tę decyzję przeglądarkom, co prowadziło do różnych implementacji. W niektórych przeglądarkach jest używana wartość start_url, a w innych – ścieżka do pliku manifestu.

Oznacza to, że nie można zmienić żadnego z tych pól bez zakłócenia procesu instalacji. Teraz dostępna jest nowa opcjonalna usługa id, która umożliwia jawne zdefiniowanie identyfikatora używanego w PWA.

Dodanie do pliku manifestu właściwości id powoduje usunięcie zależności od wartości start_url lub lokalizacji pliku manifestu i umożliwia aktualizację tych pól.

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

W przeglądarkach Chromium na komputery od wersji 96 obsługa właściwości id jest dostępna w wersjach id. Obsługa urządzeń mobilnych, która obecnie używa adresu URL pliku manifestu jako unikalnego identyfikatora, powinna zostać udostępniona w pierwszej połowie 2022 r.

Narzędzia programistyczne wyświetlające obliczony identyfikator aplikacji

Jeśli masz już wdrożony PWA i chcesz dodać do pliku id do swojego pliku manifestu, musisz użyć identyfikatora przypisanego przez przeglądarkę. id znajdziesz w panelu Manifest w panelu Aplikacja w Narzędziach dla programistów.

W przypadku zupełnie nowej aplikacji PWA możesz ustawić wartość id na dowolny łańcuch znaków, ale pamiętaj, że nie będzie można jej zmienić w przyszłości, więc wybierz ją rozważnie.

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

Aby dowiedzieć się więcej, zapoznaj się z artykułem Unikalne identyfikowanie PWA za pomocą właściwości identyfikatora pliku manifestu aplikacji internetowej.

Moduły obsługi protokołu URL na potrzeby aplikacji PWA

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

Od wersji 96 Chrome PWA może zarejestrować się jako moduł obsługi protokołów w ramach instalacji. Aby to zrobić w przypadku PWA, dodaj do pliku manifestu aplikacji internetowej właściwość protocol_handlers, określ protocol, którą chcesz obsłużyć, oraz url, która powinna się otworzyć po kliknięciu.

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

Istnieją pewne ograniczenia, ponieważ nie możesz zarejestrować dowolnego protokołu. Więcej informacji na ten temat oraz o tym, jak za pomocą składni web+ utworzyć własne protokoły, znajdziesz w artykule Rejstracja modułu obsługi protokołu URL na potrzeby PWA.

Wskazówki dotyczące priorytetów (testowanie origin)

Gdy przeglądarka analizuje stronę internetową i zaczyna wykrywać oraz pobierać zasoby, takie jak obrazy, skrypty lub arkusze CSS, przypisuje im priorytet pobierania, aby zoptymalizować wczytywanie strony. Przeglądarki dość dobrze przypisują priorytety, ale nie zawsze jest to optymalne.

Wskazówki priorytetowe to funkcja eksperymentalna, która jest dostępna w ramach wersji próbnej origin od wersji Chrome 96. Może ona pomóc w optymalizacji podstawowych wskaźników internetowych. Atrybut importance umożliwia określenie priorytetu dla typów zasobów, takich jak CSS, czcionki, skrypty, obrazy i ramki osadzone.

<!-- 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 Loty Google. Ten obraz tła to największe wyrenderowanie treści (LCP).

Zrzut ekranu z Lotów Google z dużym obrazem tła

Zobaczmy, jak to działa z podpowiedzeniami o priorytetach i bez nich. Gdy priorytet obrazu tła jest ustawiony na high, czas LCP spada z 2,6 sekundy do 1,9 sekundy.

Aby dowiedzieć się więcej o tym, jak korzystać z interfejsu Fetch Priority API do optymalizacji wczytywania zasobów, jak zarejestrować się w programie testowym pochodzenia i jakie przykłady wykorzystania tego interfejsu mogą pomóc w zwiększeniu wydajności renderowania, zapoznaj się z artykułem Optimizing resource loading with the Fetch Priority API (Optymalizowanie wczytywania zasobów za pomocą interfejsu Fetch Priority API).

Emulowanie Chrome 100 w ciągu UA

Na początku przyszłego roku wprowadzimy 100 wersję Chrome, która będzie miała trzy-cyfrowy numer. 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.

Od wersji 96 w Chrome dostępny jest nowy parametr #force-major-version-to-100, który zmieni bieżącą wersję na 100, aby można było sprawdzić, czy wszystko działa zgodnie z oczekiwaniami.

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

Więcej informacji znajdziesz w artykule Wymuszanie wersji głównej Chrome 100 w ciągu znaków User-Agent.

Chrome Dev Summit

Właśnie zakończyła się konferencja Chrome Dev Summit. Wszystkie filmy i treści są dostępne online. Odwiedź witrynę Chrome Dev Summit. Jeśli nie udało Ci się obejrzeć prezentacji lub transmisji na żywo, odsłuchaj playlisty CDS na kanale YouTube dla programistów Chrome.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Pamięć podręczna „wstecz” i „do przodu” (bfcache) jest teraz dostępna w wersji stabilnej i doprowadza Chrome do zgodności z Firefoxem i Safari.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać inne zmiany w Chrome 96, 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ę nowa wersja Chrome 97, opowiem Ci, co nowego w tej przeglądarce.