Novità di Chrome 76

Pete LePage

In Chrome 76 abbiamo aggiunto il supporto per:

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 76.

Pulsante di installazione PWA nell'omnibox

In Chrome 76, stiamo semplificando l'installazione delle app web progressive su computer aggiungendo un pulsante di installazione alla barra degli indirizzi, a volte chiamata omnibox.

Se il tuo sito soddisfa i criteri di installabilità delle app web progressive, Chrome mostrerà un pulsante di installazione nell'omnibox per indicare all'utente che la tua PWA può essere installata. Se l'utente fa clic sul pulsante di installazione, è essenzialmente lo stesso che chiamare prompt() nell'evento beforeinstallprompt; viene visualizzata la finestra di dialogo di installazione, che consente all'utente di installare facilmente la tua PWA.

Per informazioni dettagliate, consulta Installazione dalla barra degli indirizzi per le app web progressive su computer.


Maggiore controllo sulla mini barra delle informazioni della PWA

Esempio di mini barra delle informazioni Aggiungi a schermata Home per AirHorner

Sui dispositivi mobili, Chrome mostra la mini barra delle informazioni la prima volta che un utente visita il tuo sito se soddisfa i criteri di installabilità delle app web progressive. Ci risulta che vorresti poter impedire la visualizzazione della mini barra informativa e fornire invece la tua promozione di installazione.

A partire da Chrome 76, la chiamata a preventDefault() sull'evento beforeinstallprompt impedirà la visualizzazione della mini barra delle informazioni.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

Assicurati di aggiornare l'interfaccia utente per far sapere agli utenti che la tua PWA può essere installata. Consulta Modelli per promuovere l'installazione di PWA per consultare le nostre best practice consigliate per promuovere l'installazione delle tue app web progressive.

Aggiornamenti più rapidi dei WebAPK

Quando un'app web progressiva è installata su Android, Chrome richiede e installa automaticamente un APK web. Dopo l'installazione, Chrome controlla periodicamente se il file manifest dell'app web è cambiato, ad esempio se hai aggiornato le icone, i colori o il nome dell'app, per verificare se è necessario un nuovo WebAPK.

A partire da Chrome 76, Chrome controllerà il manifest più di frequente, ogni giorno anziché ogni tre giorni. Se una delle proprietà principali è stata modificata, Chrome richiederà e installerà un nuovo WebAPK, assicurandosi che il titolo, le icone e altre proprietà siano aggiornati.

Per informazioni dettagliate, consulta Aggiornare più di frequente i WebAPK.

Modalità Buio

Molti sistemi operativi ora supportano una modalità scura o un tema scuro.

La query media prefers-color-scheme ti consente di modificare l'aspetto del tuo sito in base alla modalità preferita dall'utente.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom ha scritto un ottimo articolo Ciao oscurità, mio vecchio amico su web.dev con tutto ciò che devi sapere, oltre a suggerimenti per progettare i fogli di stile in modo da supportare sia una modalità Luce che Buio.

E tanto altro.

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

Promise.allSettled()

Personalmente, sono molto entusiasta di Promise.allSettled(). È simile a Promise.all(), tranne per il fatto che attende che tutte le promesse siano risolte prima di rientrare.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

La lettura dei blob è più facile

I Blob sono più facili da leggere con tre nuovi metodi: text(), arrayBuffer() e stream(). Ciò significa che non dobbiamo più creare un wrapper per il file reader.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

Supporto delle immagini nell'API Async Clipboard

Inoltre, abbiamo aggiunto il supporto per le immagini all'API Clipboard Asynchronous, semplificando la copia e l'incollaggio delle immagini tramite programmazione.

Per approfondire

Questa pagina illustra solo alcuni dei punti salienti. Per altre modifiche in Chrome 76, consulta i link di seguito.

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciata la versione 77 di Chrome, sarò qui per raccontarti le novità del browser.