Novità di Chrome 63

Pete LePage

E c'è molto altro.

Mi chiamo Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 63.

Vuoi l'elenco completo delle modifiche? Consulta l'elenco delle modifiche al repository di origine di Chromium.

Importazioni di moduli dinamici

L'importazione dei moduli JavaScript è estremamente utile, ma è statica: non è possibile importare i moduli in base alle condizioni di runtime.

Fortunatamente, questo cambia in Chrome 63, con la nuova sintassi di importazione dinamica. Consente di caricare il codice dinamicamente in moduli e script in fase di runtime. Può essere utilizzato per caricare un script in modo lazy solo quando è necessario, migliorando le prestazioni dell'applicazione.

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

Invece di caricare l'intera applicazione quando l'utente visita per la prima volta la tua pagina, puoi recuperare le risorse necessarie per accedere. Il caricamento iniziale è ridotto e molto veloce. Una volta che l'utente accede, carica il resto e il gioco è fatto.

Iteratori e generatori asincroni

Scrivere codice che esegue qualsiasi tipo di iterazione con le funzioni async può essere brutto. In effetti, è la parte principale della mia domanda di programmazione preferita durante i colloqui.

Ora, con le funzioni generatore asincrone e il protocollo di esecuzione di iterazioni asincrone , l'utilizzo o l'implementazione delle origini dati in streaming diventa più semplice e la mia domanda di programmazione diventa molto più facile.

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

Gli iteratori asincroni possono essere utilizzati nei cicli for-of e anche per creare iteratori asincroni personalizzati tramite fabbriche di iteratori asincroni.

Comportamento over-scroll

Lo scorrimento è uno dei modi più fondamentali per interagire con una pagina, ma alcuni pattern possono essere difficili da gestire. Ad esempio, la funzionalità pull to refresh dei browser, che consente di aggiornare la pagina scorrendo verso il basso nella parte superiore, esegue una ricarica forzata.

Prima, con l'aggiornamento completo della pagina.

Dopodiché, aggiorna solo i contenuti.

In alcuni casi, potresti voler sostituire questo comportamento e offrire la tua esperienza. È ciò che fa l'app web progressiva di Twitter: quando scorri verso il basso, anziché ricaricare l'intera pagina, aggiunge semplicemente i nuovi tweet alla visualizzazione corrente.

Chrome 63 ora supporta la proprietà CSS overscroll-behavior, che consente di ignorare facilmente il comportamento di scorrimento per eccesso predefinito del browser.

Puoi utilizzarla per:

La parte migliore è che overscroll-behavior non influisce negativamente sulle prestazioni della tua pagina.

Modifiche all'interfaccia utente delle autorizzazioni

Adoro le notifiche push web, ma il numero di siti che richiedono l'autorizzazione al caricamento della pagina, senza alcun contesto, mi ha davvero scocciato e non sono la sola.

Il 90% di tutte le richieste di autorizzazione viene ignorato o bloccato temporaneamente.

In Chrome 59, abbiamo iniziato a risolvere il problema bloccando temporaneamente un'autorizzazione se l'utente aveva ignorato la richiesta tre volte. Ora nella versione M63, Chrome per Android mostrerà le richieste di autorizzazione sotto forma di finestre di dialogo modali.

Ricorda che questo non vale solo per le notifiche push, ma per tutte le richieste di autorizzazione. Se chiedi l'autorizzazione al momento giusto e nel contesto giusto, abbiamo riscontrato che gli utenti hanno il doppio delle probabilità di concederla.

E tanto altro.

Queste sono solo alcune delle modifiche in Chrome 63 per gli sviluppatori, ma ce ne sono molte altre.

  • finally è ora disponibile nelle istanze Promise e viene invocato dopo che un Promise è stato soddisfatto o rifiutato.
  • La nuova API JavaScript per la memoria del dispositivo ti aiuta a comprendere i vincoli di rendimento fornendoti suggerimenti sulla quantità totale di RAM sul dispositivo dell'utente. Puoi personalizzare la tua esperienza in fase di esecuzione, riducendo la complessità sui dispositivi di fascia bassa e offrendo agli utenti un'esperienza migliore con meno frustrazioni.
  • L'API Intl.PluralRules ti consente di creare applicazioni che comprendono la formazione del plurale di una determinata lingua indicando quale forma plurale si applica a un determinato numero e lingua. e può aiutarti con i numeri ordinali.

Assicurati di iscriverti al nostro canale YouTube e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 64, sarò qui per raccontarti le novità di Chrome.