Nowości w Chrome 55

Pete LePage

Obejrzyj w YouTube

  • Jednostki async i await umożliwiają pisanie kodu opartego na obietnicach w taki sposób, jakby były synchroniczne, ale bez blokowania wątku głównego.
  • Zdarzenia wskaźnika zapewniają ujednolicony sposób obsługi wszystkich zdarzeń wejściowych.
  • Witryny dodane do ekranu głównego automatycznie otrzymują uprawnienie do pamięci trwałej.

To jeszcze nie wszystko.

Jestem Pete LePage. Oto co nowego dla programistów w Chrome 55.

Zdarzenia wskaźnika

Wskazywanie rzeczy w internecie kiedyś było proste. Mieliśmy mysz, przesuwaliśmy ją, czasami naciskaliśmy przyciski i to wszystko. Ale to tu nie pasuje.

Zdarzenia kliknięcia są przydatne, ale aby były obsługiwane dotyk i mysz, trzeba było obsługiwać 2 modele zdarzeń:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome umożliwia teraz ujednoliconą obsługę danych wejściowych przez wysyłanie zdarzeń PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

Zdarzenia wskaźnika ujednolicają model danych wejściowych wskaźnika dla przeglądarki, łącząc dotknięcia, pióra i myszy w jeden zbiór zdarzeń. Są one obsługiwane w przeglądarkach IE11, Edge, Chrome i Opera, a częściowo też obsługiwane w Firefoksie.

Więcej informacji znajdziesz w artykule Wskazywanie drogi na przyszłość.

async i await

Rozumienie asynchronicznego kodu JavaScript może być trudne. Tę funkcję ze wszystkimi uroczymi wywołaniami zwrotnymi:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

Przepisanie go za pomocą atrybutu promises pomaga uniknąć problemu z zagnieżdżaniem:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Jednak gdy istnieją długie łańcuchy zależności asynchronicznych, kod oparty na obietnicach może być trudny do odczytania.

Chrome obsługuje teraz słowa kluczowe JavaScript async i await, dzięki czemu możesz pisać oparty na obietnicy kod JavaScript, który ma taką samą strukturę i czytelność jak kod synchroniczny.

Funkcję asynchroniczną można uprościć do następującego widoku:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake zamieścił świetny post: Funkcje asynchroniczne – składanie obietnic przyjazne ze wszystkimi szczegółami.

Pamięć trwała

Testowanie origin pamięci trwałej dobiegło końca. Możesz teraz oznaczyć pamięć masową w internecie jako trwałą, dzięki czemu Chrome nie będzie automatycznie czyścić miejsca na dane witryny.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

Ponadto witryny, w przypadku których występuje duże zaangażowanie, zostały dodane do ekranu głównego lub mają włączone powiadomienia push, automatycznie otrzymują takie uprawnienia.

Szczegółowe informacje o tym, jak poprosić o stałą pamięć masową witryny, znajdziesz w poście Chrisa Wilsona na temat pamięci trwałej.

Automatyczne łączenie w CSS

Automatyczne łączenie łączników CSS – jedna z najczęściej wymaganych funkcji układu w Chrome jest teraz obsługiwana na urządzeniach z Androidem i komputerach Mac.

Web Share API

Ułatwiliśmy też wywoływanie natywnych funkcji udostępniania za pomocą nowego interfejsu Web Share API, który jest dostępny w ramach wersji próbnej źródła. Paul (Mr. Web Intents) Kinlan podaje wszystkie szczegóły w swoim poście Navigator Share.

Zakończenie

To tylko kilka zmian, jakie pojawią się w Chrome 55 dla deweloperów.

Jeśli chcesz na bieżąco śledzić nowości w Chrome i nadchodzące nowością, zasubskrybuj tę usługę i obejrzyj filmy z Chrome Dev Summit, w których znajdziesz więcej informacji o tym, nad czym pracuje zespół Chrome.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 56, chętnie opowiem Ci, co nowego w Chrome.