Chrome 84 jest już wdrażany jako stabilna wersja.
Oto, co musisz wiedzieć na ten temat:
- Użytkownicy mogą wykonywać typowe czynności w aplikacji za pomocą skrótów ikon aplikacji.
- Interfejs Web Animations API obsługuje wiele funkcji, które wcześniej nie były obsługiwane.
- Blokada uśpienia może zapobiegać przyciemnianiu lub blokowaniu ekranu.
- Interfejs Content Indexing API pomaga wyświetlać treści dostępne offline.
- Dostępne są nowe testy pochodzenia dotyczące wykrywania bezczynności i SIMD Web Assembly.
- Zmiany w zasadach dotyczących plików cookie SameSite zaczynają być ponownie wdrażane.
- i inne.
Nazywam się Pete LePage i pracuję oraz nagrywam filmy z domu. Zobaczmy, co nowego w Chrome 84 dla deweloperów.
Skróty do ikon aplikacji

Skróty ikon aplikacji ułatwiają użytkownikom szybkie rozpoczynanie typowych zadań w aplikacji, np. tworzenie nowego tweeta, wysyłanie wiadomości czy sprawdzanie powiadomień. Są one obsługiwane w Chrome na Androida.
Te skróty są wywoływane przez naciśnięcie i przytrzymanie ikony aplikacji na Androidzie. Dodanie skrótu do aplikacji PWA jest proste. W tym celu utwórz nową usługę shortcuts
w pliku manifestu aplikacji internetowej, opisz skrót i dodaj ikony.
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list you saved for later",
"url": "/play-later",
"icons": [
{ "src": "//play-later.png", "sizes": "192x192" }
]
},
]
Więcej informacji znajdziesz w artykule Szybkie załatwianie spraw za pomocą skrótów aplikacji.
Web Animations API
Chrome 84 dodaje do interfejsu API Web Animations wiele wcześniej nieobsługiwanych funkcji.
- Obietnice
animation.ready
ianimation.finished
zostały spełnione. - Przeglądarka może teraz czyścić i usuwać stare animacje, oszczędzając pamięć i poprawiając wydajność.
- Możesz też łączyć animacje za pomocą trybów złożonych, korzystając z opcji
add
iaccumulate
.
Nie można w tym miejscu wyczerpująco przedstawić wszystkich ulepszeń ani podać dobrych przykładów, dlatego pełne informacje znajdziesz w ulepszonej wersji interfejsu Web Animations API w Chromium 84.
Content Indexing API
czy treści są dostępne bez połączenia z internetem. Ale użytkownik o tym nie wie? Czy jest ona naprawdę dostępna? Wystąpił problem z wykrywaniem.
Dzięki Content Indexing API, które właśnie przeszło z pierwotnego okresu próbnego, możesz dodawać adresy URL i metadane dotyczące treści dostępnych offline. Na podstawie tych metadanych treści są wyświetlane użytkownikom, co zwiększa ich widoczność.
Aby dodać treści do indeksu, wywołaj funkcję index.add()
w rejestracji service workera i podaj wymagane metadane dotyczące treści.
const registration = await navigator.serviceWorker.ready;
await registration.index.add({
id: 'article-123',
url: '/articles/123',
launchUrl: '/articles/123',
title: 'Article title',
description: 'Amazing article about things!',
icons: [{
src: '/img/article-123.png',
sizes: '64x64',
type: 'image/png',
}],
});
Chcesz sprawdzić, co jest już w indeksie? Zadzwoń pod numer index.getAll()
, aby zarejestrować pracownika.
const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
// entry.id, entry.launchUrl, etc. are all exposed.
}
Więcej informacji znajdziesz w artykule Indeksowanie stron dostępnych offline za pomocą Content Indexing API.
Wake lock API

Lubię gotować, ale bardzo denerwuje mnie, gdy podczas gotowania wg przepisu włącza się wygaszacz ekranu. Dzięki interfejsowi Wake Lock API, który również przechodzi z testów origin w Chrome 84, witryny mogą żądać blokady uśpienia ekranu, aby zapobiec jego przyciemnieniu i zablokowaniu.
W tej chwili witryna Betty Crocker korzysta z tych funkcji i opublikowała studium przypadku na stronie web.dev, w którym wykazano 300-procentowy wzrost wskaźników zamiaru zakupu.
Aby uzyskać blokadę aktywacji, wywołaj funkcję navigator.wakeLock.request()
. Zwraca ona obiekt WakeLockSentinel
, który służy do „zwolnienia” blokady aktywacji.
// Request the wake lock
const wl = await navigator.wakeLock.request('screen');
// Release the wake lock
wl.release();
Oczywiście jest to nieco bardziej skomplikowane, dlatego zapoznaj się z interfejsem API blokady ekranu. Dzięki niemu mój ekran nie będzie już zakrywany mąką.
Wersje próbne origin
Chcę zwrócić uwagę na 2 nowe testy pochodzenia. Jeśli dopiero zaczynasz korzystać z testów origin, przeczytaj artykuł Pierwsze kroki z testowaniem origin w Chrome.
wykrywanie bezczynności,
Interfejs API wykrywania bezczynności powiadamia, gdy użytkownik jest nieaktywny, co oznacza, że prawdopodobnie oddalił się od komputera. Jest to przydatne w przypadku aplikacji do czatu lub sieci społecznościowych, aby użytkownicy wiedzieli, czy ich kontakty są dostępne.
// Create the idle detector
const idleDetector = new IdleDetector();
// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
const uState = idleDetector.userState;
const sState = idleDetector.screenState;
console.log(`Idle change: ${uState}, ${sState}.`);
});
// Start the idle detector.
await idleDetector.start({
threshold: 60000,
signal,
});
Aby dowiedzieć się więcej o tym interfejsie API i sposobach jego wykorzystania, przeczytaj artykuł Wykrywanie nieaktywnych użytkowników za pomocą interfejsu Idle Detection API.
Web Assembly SIMD
Web Assembly SIMD rozpoczyna testowanie źródła. Wprowadza ona operacje, które mapują się na powszechnie dostępne instrukcje SIMD w sprzęcie. Operacje SIMD służą do zwiększania wydajności, zwłaszcza w przypadku aplikacji multimedialnych.
Więcej informacji o SIMD w WebAssembly znajdziesz w artykule Szybkie, równoległe aplikacje z SIMD w WebAssembly.
I nie tylko
Chrome 84 to duża aktualizacja, ale chcę zwrócić uwagę na kilka innych ważnych zmian.
- Wracamy do stopniowego wdrażania zmian w przypadku plików cookie SameSite.
- Strony z prośbami o niedozwolone uprawnienia lub z niedozwolonymi powiadomieniami zostaną automatycznie objęte interfejsem dyskretnych powiadomień.
- Dostępna jest nowa wersja próbna QuicTransport.
Więcej informacji
Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 84, kliknij linki poniżej.
- Nowości w Narzędziach deweloperskich w Chrome (84)
- Zasady wycofane i usunięte w Chrome 84
- Aktualizacje ChromeStatus.com dotyczące Chrome 84
- Nowości w JavaScript w Chrome 84
- Lista zmian w repozytorium kodu Chromium
Subskrybuj
Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.
Nazywam się Pete LePage i nadal muszę się ogolić, ale gdy tylko Chrome 85 zostanie wydany, od razu opowiem Ci, co nowego w tej wersji.