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.
Aby użyć tych skrótów, naciśnij i przytrzymaj ikonę 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.
- Obietki
animation.ready
ianimation.finished
zostały zadeklarowane jako obiecane. - 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 opisać 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. Następnie na podstawie tych metadanych treści są wyświetlane użytkownikowi, 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 obsługiwanych 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 wersji próbnej w Chrome 84, strony mogą żądać blokady uśpienia ekranu, aby zapobiec przyciemnieniu i zablokowaniu ekranu.
Witryna Betty Crocker już teraz korzysta z tych funkcji i opublikowała na stronie web.dev studium przypadku, 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 funkcją blokady ekranu w interfejsie API. Dzięki niej mój ekran nie będzie już zabrudzony 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 portali społecznościowych, aby informować użytkowników o dostępności ich kontaktów.
// 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 źródłowego Chromium
Subskrybuj
Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj nasz kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko 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.