Novità di Chrome 76

Pete LePage

In Chrome 76 abbiamo aggiunto il supporto di:

Mi chiamo Pete LePage, analizziamo le novità di Chrome 76 per gli sviluppatori.

Pulsante di installazione omnibox PWA

In Chrome 76, semplificheremo l'installazione delle app web progressive sul desktop per gli utenti, aggiungendo un pulsante di installazione alla barra degli indirizzi, a volte chiamata omnibox.

Se il tuo sito soddisfa i criteri di installazione delle app web progressive, Chrome mostrerà nella omnibox un pulsante di installazione che indica all'utente che è possibile installare la PWA. Se l'utente fa clic sul pulsante Installa, equivale alla chiamata a prompt() nell'evento beforeinstallprompt; viene visualizzata la finestra di dialogo di installazione, in modo che l'utente possa installare facilmente la PWA.

Per i dettagli completi, vedi Installazione della barra degli indirizzi per le app web progressive sul desktop.


Maggiore controllo sulla mini-barra delle informazioni della PWA

Esempio della mini barra informativa Aggiungi alla 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 questo soddisfa i criteri di installabilità delle applicazioni web progressive. Abbiamo saputo che vorresti impedire la visualizzazione della mini-barra delle informazioni e offrire invece la tua promozione per l'installazione.

A partire da Chrome 76, la chiamata a preventDefault() nell'evento beforeinstallprompt interrompe 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 la UI per comunicare agli utenti che la tua PWA può essere installata. Dai un'occhiata alla sezione Pattern per la promozione dell'installazione di PWA per conoscere le nostre best practice consigliate per promuovere l'installazione delle tue app web progressive.

Aggiornamenti più rapidi per WebAPK

Quando un'app web progressiva viene 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 e i colori o se hai modificato il nome dell'app, per verificare se è necessario un nuovo WebAPK.

A partire da Chrome 76, Chrome controllerà il manifest più spesso, effettuando controlli ogni giorno, anziché ogni tre giorni. Se una delle proprietà della chiave è cambiata, Chrome richiederà e installerà un nuovo WebAPK, garantendo che il titolo, le icone e altre proprietà siano aggiornati.

Per informazioni dettagliate, leggi la sezione Aggiornare più spesso i WebAPK.

Modalità Scuro

Molti sistemi operativi ora supportano la modalità Buio, o tema scuro.

La query supporti prefers-color-scheme ti consente di modificare l'aspetto e il design del tuo sito in base alla modalità preferita dell'utente.

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

Tom ha un ottimo articolo Ciao buio, mio vecchio amico su web.dev con tutto ciò che c'è da sapere, oltre a suggerimenti per progettare l'architettura dei fogli di stile in modo da supportare sia la modalità Luce sia quella Buio.

E tanto altro.

Queste sono solo alcune delle modifiche apportate a Chrome 76 per gli sviluppatori, e ovviamente ce ne sono molte altre.

Promise.allSettled()

Personalmente, sono davvero entusiasta di Promise.allSettled(). È simile a Promise.all(), tranne per il fatto che attende la definizione di tutte le promesse prima di tornare.

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).

Leggere i blob è più facile

I Blob sono più facili da leggere con tre nuovi metodi: text(), arrayBuffer() e stream(); questo significa che non dobbiamo più creare un wrapper attorno al lettore di file.

// 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 per gli appunti asincroni

Inoltre, abbiamo aggiunto il supporto delle immagini nell'API Async Clipboard per semplificare la copia e l'incolla delle immagini in modo programmatico.

Per approfondire

Questo articolo illustra solo alcuni dei punti salienti. Controlla i link di seguito per scoprire ulteriori modifiche in Chrome 76.

Iscriviti

Se vuoi tenerti sempre al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Mi chiamo Pete LePage e, non appena uscirà Chrome 77, sarò qui per raccontarvi le novità di Chrome.