Oto, co musisz wiedzieć na ten temat:
- Właściwość
id
w pliku manifestu umożliwia określenie unikalnego identyfikatora PWA. - Właściwość
protocol_handlers
umożliwia automatyczne rejestrowanie PWA jako modułu obsługi protokołu podczas instalacji. - Testowanie origin wskazówek dotyczących priorytetów pozwala określić priorytet pobierania zasobów.
- Możesz wymusić ustawienie wersji Chrome na 100, aby sprawdzić, jak Twój kod zareaguje na trzycyfrowy numer wersji.
- Filmy z Chrome Dev Summit są dostępne online.
- A do tego wiele więcej.
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.
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).
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.
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.
- Nowości w Narzędziach deweloperskich w Chrome (96)
- Wycofanie i usunięcie Chrome 96
- Aktualizacje ChromeStatus.com w Chrome 96
- Co nowego w JavaScript w Chrome 96
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
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.