Nowości w Chrome 63

Pete LePage

A to nie wszystko – to tylko część.

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 63 dla deweloperów.

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian w repozytorium źródłowym Chromium.

Importowanie modułów dynamicznych

Importowanie modułów JavaScript jest bardzo wygodne, ale jest to rozwiązanie statyczne. Nie możesz importować modułów na podstawie warunków działania.

Na szczęście w Chrome 63 zmieniliśmy to za pomocą nowej składni importu dynamicznego. Umożliwia dynamiczne wczytywanie kodu do modułów i skryptów w czasie wykonywania. Możesz go używać do wczytywania skryptu tylko wtedy, gdy jest to potrzebne, co poprawia wydajność aplikacji.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Zamiast wczytywać całą aplikację, gdy użytkownik po raz pierwszy wejdzie na Twoją stronę, możesz pobrać zasoby potrzebne do zalogowania się. Początkowy ładunek jest niewielki i bardzo szybki. Gdy użytkownik się zaloguje, reszta zostanie załadowana.

Async iterators and generators

Pisanie kodu, który wykonuje jakiekolwiek iteracje za pomocą funkcji async, może być nieestetyczne. To w istocie główna część mojego ulubionego pytania dotyczącego kodowania na rozmowie kwalifikacyjnej.

Teraz dzięki funkcjom generatora asynchronicznego i iteracji asynchronicznej protokołu, konsumpcja lub implementacja strumieniowych źródeł danych staje się bardziej płynna, a moje pytanie dotyczące kodowania staje się znacznie łatwiejsze.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Iteratorów asynchronicznych można używać w pętlach for-of, a także do tworzenia własnych asynchronicznych iteratorów za pomocą fabryk iteratorów asynchronicznych.

Działanie overscroll

Przewijanie jest jednym z podstawowych sposobów interakcji ze stroną, ale niektóre wzorce mogą być trudne do zinterpretowania. Na przykład funkcja przeciągania do odświeżenia w przeglądarce, która polega na przesunięciu palcem w dół u góry strony, powoduje pełne ponowne wczytanie.

Przed odświeżeniem całej strony.

Następnie odśwież tylko treści.

W niektórych przypadkach możesz chcieć zastąpić to zachowanie i zapewnić użytkownikom własne wrażenia. Właśnie tak działa progresywna aplikacja internetowa Twittera: gdy przewijasz w dół, zamiast wczytywać całą stronę, po prostu dodaje do bieżącego widoku nowe tweety.

Chrome 63 obsługuje teraz właściwość CSS overscroll-behavior, dzięki czemu można łatwo zastąpić domyślne zachowanie przewijania w przypadku przepełnienia.

Możesz go używać do:

Najlepsze jest to, że overscroll-behaviornie ma negatywnego wpływu na skuteczność strony.

Zmiany w interfejsie uprawnień

Uwielbiam powiadomienia push, ale jestem naprawdę sfrustrowana liczbą witryn, które proszą o zgodę podczas wczytywania strony bez żadnego kontekstu. Nie jestem w tym odosobnieniu.

90% wszystkich próśb o uprawnienia jest ignorowanych lub tymczasowo blokowanych.

W Chrome 59 zaczęliśmy rozwiązywać ten problem, tymczasowo blokując uprawnienia, jeśli użytkownik odrzuci prośbę trzy razy. W wersji 63 m przeglądarka Chrome na Androida będzie wyświetlać prośby o uprawnienia w oknach dialogowych.

Pamiętaj, że nie dotyczy to tylko powiadomień push, ale wszystkich próśb o przyznanie uprawnień. Jeśli poprosisz o pozwolenie w odpowiednim momencie i w odpowiednim kontekście, użytkownicy będą dwa i pół razy bardziej skłonni do udzielenia Ci zgody.

I inne funkcje

To tylko kilka z wielu zmian w Chrome 63 dla deweloperów.

  • finally jest teraz dostępna w przypadku instancji Promise i jest wywoływana po spełnieniu lub odrzuceniu Promise.
  • Nowe Device Memory JavaScript API pomaga zrozumieć ograniczenia wydajności, podając wskazówki dotyczące łącznej ilości pamięci RAM na urządzeniu użytkownika. Możesz dostosować działanie aplikacji w czasie jej wykonywania, co zmniejszy złożoność na słabszych urządzeniach i zapewni użytkownikom lepsze wrażenia bez frustracji.
  • Interfejs Intl.PluralRules API umożliwia tworzenie aplikacji, które rozumieją liczbę mnogą w danym języku, wskazując, która forma liczby mnogiej ma zastosowanie w przypadku danej liczby i języka. Może też pomóc w przypadku liczb porządkowych.

Zasubskrybuj nasz kanał w YouTube, aby otrzymywać e-maile z powiadomieniami o publikowaniu nowych filmów.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 64 opowiem Ci, co nowego w Chrome.