Novità di Chrome 63

Pete LePage

E c'è molto altro ancora.

Mi chiamo Pete LePage. Analizziamo le novità di Chrome 63 per gli sviluppatori.

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

Importazioni di moduli dinamici

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

Per fortuna, questa operazione cambia in Chrome 63, grazie alla nuova sintassi di importazione dinamica. Consente di caricare dinamicamente il codice in moduli e script in fase di runtime. Può essere utilizzato per caricare lento uno script solo quando è necessario, migliorando le prestazioni della tua 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 accede per la prima volta alla tua pagina, puoi recuperare le risorse necessarie per accedere. Il caricamento iniziale è ridotto e ad alta velocità. Una volta che l'utente accede, carica gli altri contenuti e sei pronto.

iteratori e generatori asincroni

Scrivere codice che esegue qualsiasi tipo di iterazione con le funzioni async può essere brutto. Di fatto, è la parte fondamentale della mia domanda preferita sulla programmazione di un'intervista.

Ora, con le async generator functions e il protocollo iterazione asincrona, il consumo o l'implementazione delle origini dati in modalità flusso diventa più semplice e la mia domanda di programmazione diventa molto più semplice.

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 in loop for-of e anche per creare iteratori asincroni personalizzati attraverso le fabbriche di iteratori asincroni.

Comportamento over-scroll

Lo scorrimento è uno dei modi fondamentali per interagire con una pagina, ma alcuni modelli possono essere difficili da gestire. Ad esempio, la funzionalità Tiro per aggiornare dei browser, in cui se si scorre verso il basso nella parte superiore della pagina viene eseguito un ricaricamento forzato.

Prima, con un aggiornamento a pagina intera.

Dopodiché, aggiorna solo i contenuti.

In alcuni casi, potresti voler ignorare quel comportamento e offrire la tua esperienza. Questa è la funzione dell'app web progressiva di Twitter. Quando fai scorrere la pagina verso il basso, anziché ricaricare l'intera pagina, si limita ad aggiungere eventuali nuovi tweet alla visualizzazione corrente.

Chrome 63 ora supporta la proprietà CSS overscroll-behavior, che semplifica l'override del comportamento di scorrimento extra del browser predefinito.

Puoi utilizzarla per:

La parte migliore è che overscroll-behavior non influisce negativamente sul rendimento della pagina.

Modifiche all'interfaccia utente delle autorizzazioni

Adoro le notifiche push web, ma sono davvero frustrato dal numero di siti che chiedono l'autorizzazione al caricamento della pagina, senza alcun contesto. E non sono solo.

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

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

Ricorda che la funzionalità non riguarda soltanto le notifiche push, ma anche tutte le richieste di autorizzazione. Abbiamo riscontrato che gli utenti sono due volte e mezzo più propensi a concedere l'autorizzazione nel momento e nel contesto appropriati.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 63 per gli sviluppatori. Ovviamente ce ne sono molte altre.

  • finally è ora disponibile su Promise istanze e viene richiamato dopo che un Promise è stato completato o rifiutato.
  • La nuova API Device Memory JavaScript aiuta a comprendere i vincoli delle prestazioni fornendo suggerimenti sulla quantità totale di RAM sul dispositivo dell'utente. Puoi personalizzare l'esperienza in fase di runtime, 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 il plurale di un determinato linguaggio indicando la forma plurale applicabile per un determinato numero e la lingua. Può essere utile per i numeri ordinali.

Assicurati di iscriverti al nostro canale YouTube. Riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

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