Novità di Chrome 55

Guarda su YouTube

  • async e await consentono di scrivere codice basato su promesse come se fosse sincrono, ma senza bloccare il thread principale.
  • Gli eventi puntatore forniscono un modo unificato di gestione di tutti gli eventi di input.
  • Ai siti aggiunti alla schermata Home viene concessa automaticamente l'autorizzazione di archiviazione permanente.

Ma c'è molto altro.

Mi chiamo Pete LePage e ecco le novità per gli sviluppatori di Chrome 55.

Eventi puntatore

Un tempo puntare su qualcosa sul web era semplice. Avevi un mouse, lo spostavi e a volte premi i pulsanti e il gioco è fatto. Ma questo, non funziona molto bene qui.

Gli eventi touch sono una buona idea, ma per supportare il tocco touch e mouse, dovevi supportare due modelli di eventi:

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

Chrome ora consente la gestione unificata dell'input mediante l'invio di PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

Gli eventi puntatore unificano il modello di input puntatore per il browser, riunendo tocco, penne e mouse in un unico insieme di eventi. Sono supportate in IE11, Edge, Chrome, Opera e parzialmente supportate in Firefox.

Per ulteriori dettagli, consulta Indicare la strada da seguire.

async e await

Può essere difficile ragionare su JavaScript asincrono. Prendi questa funzione con tutti i suoi callback "adorabili":

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();
}

Riscriverlo con promises per 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 Promise può essere ancora difficile da leggere quando sono presenti lunghe catene di dipendenze asincrone.

Ora Chrome supporta le parole chiave JavaScript async e await, consentendoti di scrivere codice JavaScript basato su Promise che possa essere strutturato e leggibile come codice sincrono.

Al contrario, la nostra funzione asincrona può essere semplificata in questo modo:

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

Jake ha un ottimo post: Async Functions - fare promesse amichevoli con tutti i dettagli.

Archiviazione permanente

La prova dell'origine dell'archiviazione permanente è terminata. Ora puoi contrassegnare lo spazio di archiviazione web come permanente, impedendo a Chrome di cancellare automaticamente lo spazio di archiviazione del 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 per cui sono state attivate le notifiche push viene concessa automaticamente l'autorizzazione di persistenza.

Per informazioni dettagliate e per informazioni dettagliate su come richiedere l'archiviazione permanente per il tuo sito, consulta il post sull'archiviazione permanente di Chris Wilson.

Trattino automatico CSS

La sillabazione automatica dei CSS, una delle funzionalità di layout richieste più spesso di Chrome, è ora supportata su Android e Mac.

API Web Share

Infine, ora è più facile richiamare le funzionalità di condivisione native con la nuova API Web Share, disponibile come prova dell'origine. Paul (Mr. Web Intents) Kinlan ha tutti i dettagli nel suo post su Navigator Share.

Chiusura

Queste sono solo alcune delle modifiche introdotte in Chrome 55 per gli sviluppatori.

Se vuoi tenerti aggiornato su Chrome e sapere cosa ti aspetta, iscriviti e guarda i video del Chrome Dev Summit per un'analisi approfondita di alcune delle fantastiche cose su cui sta lavorando il team di Chrome.

Mi chiamo Pete LePage e sarò qui per presentarti le novità di Chrome non appena uscirà la versione 56.