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 przypadku aplikacji internetowej 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.

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

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

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