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. Pracuję i strzelam z domu. Przyjrzyjmy się, co nowego dla programistów Chrome 84.

Skróty do ikon aplikacji

Skróty do ikon aplikacji w wersji PWA Twittera

Skróty w ikonach aplikacji ułatwiają użytkownikom szybkie wykonywanie typowych zadań w aplikacji, np. utworzenie nowego tweeta, wysłanie wiadomości lub wyświetlenie powiadomień. Są one obsługiwane w Chrome na Androida.

Skróty te są wywoływane przez naciśnięcie i przytrzymanie ikony aplikacji na urządzeniu z Androidem. Dodanie skrótu do aplikacji PWA jest proste. Wystarczy utworzyć nową usługę shortcuts w pliku manifestu aplikacji internetowej, opisać skrót i dodać 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.

Interfejs API animacji internetowych

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 zwiększając wydajność.
  • Możesz też teraz łączyć animacje w trybach złożonych – w opcjach add i accumulate.

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 Twoim 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.
}

Szczegółowe informacje znajdziesz w artykule Indeksowanie stron offline za pomocą interfejsu Content Indexing API.

Wake lock API

Implementacja blokady wybudzania na stronie Betty Crocker.

Lubię gotować, ale wykonanie przepisu jest bardzo frustrujące, a wygaszacz ekranu włącza się. 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.

Jest to wykorzystywane na stronie Betty Crocker, która opublikowała na stronie web.dev studium przypadku pokazujące wzrost wskaźników zamiaru zakupu o 300%.

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 nie jest w związku z tym więcej, dlatego sprawdź Nie usypiaj dzięki interfejsowi Screen Wake Lock API, ale mój ekran nie będzie już zasłonięty mąką.

Wersje próbne Origin

Chcę zwrócić uwagę na 2 nowe wersje próbne origin. Jeśli dopiero zaczynasz korzystać z testów origin, przeczytaj artykuł Pierwsze kroki z testami 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. Wprowadzane są operacje mapowane na powszechnie dostępne instrukcje SIMD sprzętowe. 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 jest duży, ale jest też kilka innych ważnych aktualizacji, o których chcę wspomnieć.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Pod poniższymi linkami znajdziesz dodatkowe zmiany w Chrome 84.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj nasz kanał w YouTube dla deweloperó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.