asynceawaitti consentono di scrivere codice basato su promesse come se fosse sincrono, ma senza bloccare il thread principale.- Gli eventi del cursore forniscono un modo unificato per gestire tutti gli eventi di input.
- Ai siti aggiunti alla schermata Home viene concessa automaticamente l'autorizzazione di archiviazione persistente.
E non è tutto.
Sono Pete LePage e ti presento le novità per gli sviluppatori in Chrome 55.
Eventi del cursore
In passato, indicare qualcosa sul web era semplice. Avevi un mouse, lo muovevi, a volte premevi i pulsanti e basta. Ma qui non funziona così bene.
Gli eventi tocco sono utili, ma per supportare il tocco e il mouse, devi supportare due modelli di eventi:
elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);
Chrome ora consente la gestione unificata dell'input inviando PointerEvents:
elem.addEventListener('pointermove', pointerMoveEvent);
Gli eventi del cursore unificano il modello di input del cursore per il browser, combinando i dispositivi touch, i pennini e i mouse in un unico insieme di eventi. Sono supportati su IE11, Edge, Chrome, Opera e parzialmente su Firefox.
Per ulteriori dettagli, consulta Indicazioni per il futuro.
async e await
JavaScript asincrono può essere difficile da comprendere. Prendi questa funzione con tutti i suoi "deliziosi" callback:
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();
}
Riscrivere il codice con promises aiuta a evitare il problema di nidificazione:
function logFetch(url) {
return fetch(url)
.then(response => response.text())
.then(text => {
console.log(text);
}).catch(err => {
console.error('fetch failed', err);
});
}
Tuttavia, il codice basato su promesse può essere ancora difficile da leggere quando sono presenti catene lunghe di dipendenze asincrone.
Chrome ora supporta le parole chiave JavaScript async e await, che ti consentono di scrivere codice JavaScript basato su promesse che può essere strutturato e leggibile come il codice sincrono.
La nostra funzione asincrona può invece essere semplificata come segue:
async function logFetch(url) {
try {
const response = await fetch(url);
console.log(await response.text());
}
catch (err) {
console.log('fetch failed', err);
}
}
Jake ha scritto un post fantastico: Funzioni asincrone: rendere le promesse compatibili con tutti i dettagli.
Archiviazione permanente
La prova dell'origine dello spazio di archiviazione permanente è terminata. Ora puoi contrassegnare lo spazio di archiviazione web come permanente, impedendo a Chrome di cancellarlo automaticamente per il tuo sito.
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.");
});
}
Inoltre, ai siti con un elevato livello di coinvolgimento, che sono stati aggiunti alla schermata Home o che hanno attivato le notifiche push viene automaticamente concessa l'autorizzazione di persistenza.
Consulta il post di Chris Wilson sull'archiviazione permanente per informazioni dettagliate e su come richiedere l'archiviazione permanente per il tuo sito.
Spartisilla automatica CSS
La spartizione automatica CSS, una delle funzionalità di layout più richieste di Chrome, è ora supportata su Android e Mac.
API Web Share
Infine, ora è più facile richiamare le funzionalità di condivisione nativa con la nuova API Web Share, disponibile come prova dell'origine. Paul (Mr. Web Intents) Kinlan ha spiegato tutto nel suo post su Navigator Share.
Chiusura
Queste sono solo alcune delle modifiche apportate a Chrome 55 per gli sviluppatori.
Se vuoi rimanere al passo con Chrome e sapere cosa ti aspetta, assicurati di abbonarti e di dare un'occhiata ai video del Chrome Dev Summit per scoprire di più su alcune delle fantastiche funzionalità su cui il team di Chrome sta lavorando.
Sono Pete LePage e, non appena verrà rilasciato Chrome 56, sarò qui per raccontarti le novità di Chrome.