Nowości w Chrome 84

Pete LePage

Chrome 84 jest już wdrażany jako stabilna wersja.

Oto, co musisz wiedzieć na ten temat:

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 do ikon aplikacji w wersji PWA Twittera

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

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

Zastosowanie blokady wybudzania na stronie Betty Crocker.

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.

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.

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.