Nowości w Chrome 96

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage i w tym filmie, który nagrywamy w studio, opowiem o nowościach dla deweloperów w Chrome 96.

Plik manifestu id dla aplikacji PWA

Gdy użytkownik instaluje 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 usługach. 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 manifestu id, 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 zarejestrować protokół mailto. Gdy użytkownik kliknie link z prefiksem mailto:, otworzy się Gmail, co ułatwi mu wysłanie e-maila.

Od wersji 96 przeglądarki 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 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 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 wskazówkami priorytetowymi i bez nich. Gdy priorytet obrazu tła jest ustawiony na high, czas LCP spada z 2,6 sekundy do 1,9 sekundy.

Aby uzyskać więcej informacji, dowiedzieć się, jak zarejestrować się w ramach testu wersji próbnej i poznać świetne przykłady tego, jak ta funkcja może pomóc w zwiększeniu wydajności renderowania, zapoznaj się z artykułem 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 Chrome 96 dostępna jest nowa flaga #force-major-version-to-100, która zmieni bieżący numer wersji na 100, aby można było sprawdzić, czy wszystko działa zgodnie z oczekiwaniami.

Strona flag 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 z Chrome Dev Summit na kanale YouTube dla programistów Chrome.

I wiele więcej!

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 przeglądarkami Firefox i Safari.

Więcej informacji

Dotyczy to tylko niektórych kluczowych informacji. Aby poznać inne zmiany w Chrome 96, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla deweloperó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.