asynciawaitumożliwiają pisanie kodu opartego na obietnicach tak, jakby był on synchroniczny, ale bez blokowania wątku głównego.- Zdarzenia związane z wskaźnikiem zapewniają ujednolicony sposób obsługi wszystkich zdarzeń wprowadzania danych.
- Witryny dodane do ekranu głównego automatycznie otrzymują uprawnienia trwałego przechowywania.
I to nie wszystko.
Nazywam się Pete LePage i opowiem, co nowego w Chrome 55 dla deweloperów.
Zdarzenia wskaźnika
Wskazywanie rzeczy w internecie było kiedyś proste. Mieliśmy mysz, którą można było przesuwać, czasami naciskać przyciski, i to wszystko. Ale tutaj nie działa tak dobrze.
Zdarzenia dotyku są dobre, ale aby obsługiwać dotykowe i mysz, musisz obsługiwać 2 modele zdarzeń:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome umożliwia teraz zintegrowane przetwarzanie danych wejściowych przez wysyłanie PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Zdarzenia związane z wskaźnikiem unifikują model danych wejściowych dla przeglądarki, łącząc w jeden zestaw zdarzeń informacje o dotyku, piórze i myszce. Są one obsługiwane w IE11, Edge, Chrome i Opera oraz częściowo w Firefox.
Więcej informacji znajdziesz w artykule Wskazówki dotyczące dalszych działań.
async i await
Asynchroniczny kod JavaScript może być trudny do zrozumienia. Weź tę funkcję ze wszystkimi „kochanymi” 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ą funkcji promises pomoże uniknąć problemu zagnieżdżenia:
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
Jednak kod oparty na obietnicach może być trudny do odczytania, gdy występują długie łańcuchy asynchronicznych zależności.
Chrome obsługuje teraz słowa kluczowe JavaScript async i await, co pozwala pisać kod JavaScript oparty na obietnicach, który może być tak uporządkowany i czytelny jak kod synchroniczny.
Funkcję asynchroniczną można uprościć do tego:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
Jake opublikował świetny artykuł: Funkcje asynchroniczne – tworzenie przyjaznych obietnic, w którym znajdziesz wszystkie szczegóły.
Pamięć trwała
Okres próbny trwałego miejsca na dane dobiegł końca. Możesz teraz oznaczyć pamięć podręczną jako trwałą, uniemożliwiając Chrome automatyczne czyszczenie pamięci podręcznej Twojej 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.");
});
}
Dodatkowo witryny, które mają wysoką interakcję, zostały dodane do ekranu głównego lub mają włączone powiadomienia push, automatycznie otrzymują zgodę na trwałe przechowywanie danych.
Więcej informacji o tym, jak możesz poprosić o trwałe miejsce na dane dla swojej witryny, znajdziesz w artykule Trwałe miejsce na dane Chrisa Wilsona.
Automatyczne zmiękczenie znaków w CSS
Automatyczne dzielenie wyrazów w CSS, jedna z najczęściej żądanych funkcji układu w Chrome, jest teraz obsługiwana na Androidzie i Macu.
Web Share API
W końcu łatwiej jest wywoływać funkcje udostępniania natywnych za pomocą nowego interfejsu Web Share API, który jest dostępny w ramach testowania origin. Wszystkie szczegóły znajdziesz w artykule Navigator Share autorstwa Paula (Mr. Web Intents) Kinlana.
Zakończenie
To tylko kilka z wielu zmian w Chrome 55 dla deweloperów.
Jeśli chcesz być na bieżąco z aktualnościami dotyczącymi Chrome i wiedzieć, co jest w planach, zasubskrybuj kanał i sprawdź filmy z Chrome Dev Summit, aby dowiedzieć się więcej o niezwykłych rozwiązaniach, nad którymi pracuje zespół Chrome.
Nazywam się Pete LePage i jak tylko pojawi się nowa wersja Chrome 56, opowiem Ci o nowościach w tej przeglądarce.