Zaczynamy wdrażać Chrome 84 w wersji stabilnej.
Oto, co musisz wiedzieć na ten temat:
- Użytkownicy mogą uruchamiać typowe zadania w Twojej aplikacji za pomocą skrótów ikon aplikacji.
- Interfejs Web Animations API zapewnia obsługę wielu funkcji, które wcześniej nie były obsługiwane.
- Blokada uśpienia może zapobiegać przyciemnieniu i zablokowaniu ekranu.
- Interfejs Content Crawl API pomaga wyróżniać treści dostępne offline.
- Dostępne są nowe wersje próbne origin na potrzeby wykrywania bezczynności i Web Assembly SIMD.
- Wprowadzamy zmiany w zasadach dotyczących tych samych plików cookie w witrynie.
- I wiele więcej.
Jestem Pete LePage. Pracuję i nagrywam z domu. Sprawdźmy, co nowego dla programistów w Chrome 84.
Skróty w postaci ikon aplikacji
Skróty w postaci ikon aplikacji ułatwiają użytkownikom szybkie rozpoczęcie w aplikacji typowych zadań, takich jak napisanie nowego tweeta, wysłanie wiadomości czy wyświetlenie powiadomień. Są obsługiwane w Chrome na Androida.
Te skróty są wywoływane przez i przytrzymanie ikony aplikacji na urządzeniu z Androidem. Dodanie skrótu do PWA jest proste. 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 wykonywanie zadań dzięki skrótom aplikacji.
Interfejs API animacji internetowych
Chrome 84 dodaje do interfejsu WebAnimations API wiele funkcji, które wcześniej były nieobsługiwane.
animation.ready
ianimation.finished
zostały obiecane.- Przeglądarka może teraz wyczyścić i usunąć stare animacje, oszczędzając pamięć i poprawiając wydajność.
- Animacje można teraz łączyć za pomocą trybów złożonych – za pomocą opcji
add
iaccumulate
.
Po prostu nie mogę zastosować się do wszystkich ulepszeń i przedstawić tu dobre przykłady, więc szczegółowe informacje znajdziesz w artykule o ulepszeniach interfejsu Web Animations API w Chromium 84.
Interfejs Content Index API
Jeśli treści są dostępne bez połączenia z siecią: Ale użytkownik o tym nie wie? Czy ta usługa naprawdę jest dostępna? Wystąpił problem z wykrywaniem.
Dzięki interfejsowi Content Crawl API, który właśnie zakończył się w pierwotnej wersji próbnej, możesz dodawać adresy URL i metadane do treści, które są dostępne offline. Dzięki tym metadanym treść jest wyświetlana użytkownikowi, co zwiększa wykrywalność.
Aby dodać treść do indeksu, wywołaj zdarzenie index.add()
w ramach rejestracji skryptu service worker 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 znajduje się już w indeksie? Wywołaj index.getAll()
podczas rejestracji skryptu service worker.
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.
}
Szczegółowe informacje znajdziesz w artykule na temat indeksowania stron dostępnych w trybie offline za pomocą interfejsu Content Crawl API.
Interfejs API blokady uśpienia
Uwielbiam gotować, ale stosowanie przepisu jest dla mnie frustrujące, a wygaszacz ekranu włącza się automatycznie. Interfejs API blokady wybudzenia, który również wyszedł z wersji próbnej w Chrome 84, może umożliwiać witrynom żądanie blokady uśpienia, aby ekran nie został przyciemniony ani zablokowany.
Właścicielka witryny Betty Crocker korzysta z niej dzisiaj i opublikowała na stronie web.dev studium przypadku, w którym odnotowano wzrost wskaźników zamiaru zakupu o 300%.
Aby ustawić blokadę uśpienia, wywołaj navigator.wakeLock.request()
, zwróci obiekt WakeLockSentinel
, który jest używany do „zwolnienia” blokady uśpienia.
// Request the wake lock
const wl = await navigator.wakeLock.request('screen');
// Release the wake lock
wl.release();
Niewątpliwie jednak jest w tym trochę więcej, więc sprawdź interfejs Screen Wake Lock API, ale przynajmniej ekran mojego ekranu nie będzie już pokrywany mąką.
Testowanie origin
chcę zwrócić uwagę na 2 nowe testy origin. Jeśli dopiero zaczynasz korzystać z testów origin, przeczytaj artykuł Pierwsze kroki z testami origin Chrome.
Wykrywanie bezczynności
Interfejs Idle Detection API powiadamia Cię, gdy użytkownik jest nieaktywny, wskazując, że może on być z dala od komputera. Świetnie sprawdza się to w aplikacjach do czatowania i witrynach społecznościowych, gdy chcesz informować użytkowników o dostępności 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,
});
Więcej informacji o tym interfejsie API i o tym, jak zacząć z nim eksperymentować, znajdziesz w artykule Wykrywanie nieaktywnych użytkowników przy użyciu interfejsu Idle Detection API.
Web Asembly SIMD
Z kolei SIMD Web Assembly rozpoczyna okres próbny. Wprowadza działania, które mapują się na powszechnie dostępne instrukcje SIMD w sprzęcie. Operacje SIMD są używane do zwiększania wydajności, zwłaszcza w aplikacjach multimedialnych.
Więcej informacji o WebAssembly SIMD znajdziesz w artykule o szybkich, równoległych aplikacjach z funkcją WebAssembly SIMD.
oraz inne informacje.
Chrome 84 to duża wersja, ale jest kilka innych ważnych aktualizacji, na które chcę zwrócić uwagę.
- Wznawiamy stopniowe wdrażanie zmian w plikach cookie SameSite.
- Witryny, które proszą o przyznanie uprawnień lub wyświetlają powiadomienia wprowadzające w błąd, zostaną automatycznie zarejestrowane w naszym interfejsie powiadomień na temat zapytań.
- Dostępne jest nowe testy origin dla QuicTransport.
Więcej informacji
To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 84.
- Nowości w Narzędziach deweloperskich w Chrome (84)
- Wycofanie i usunięcie Chrome 84
- Aktualizacje ChromeStatus.com w Chrome 84
- Nowości w języku JavaScript w Chrome 84
- Lista zmian repozytorium źródłowego Chromium
Subskrybuj
Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał w YouTube dla deweloperów Chrome, aby otrzymywać e-maile z powiadomieniami o każdej publikacji nowego filmu.
Mam na imię Pete LePage i wciąż potrzebuję fryzury, ale jak tylko Chrome 85 będzie dostępny, powiem Ci, co nowego w Chrome.