Nowości w Chrome 84

Pete LePage

Zaczynamy wdrażać Chrome 84 w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

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 PWA na Twitterze

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 i animation.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 i accumulate.

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

Implementacja blokady uśpienia na stronie Betty Crocker.

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ę.

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.

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.