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 della omnibox PWA

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, è sostanzialmente come chiamare prompt() per l'evento beforeinstallprompt; viene visualizzata la finestra di dialogo di installazione, che consente all'utente di installare più facilmente la PWA.

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


Maggiore controllo sulla mini barra delle informazioni delle PWA

Esempio della mini-infobar Aggiungi alla schermata Home per AirHorner

Sui dispositivi mobili, Chrome mostra la mini barra informativa 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'UI per far sapere agli utenti che la tua PWA può essere installata. Dai un'occhiata ai Pattern per promuovere l'installazione di PWA per 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ù spesso, ogni giorno, anziché ogni tre giorni. Se una delle proprietà chiave è 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 la modalità Buio, o 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 davvero entusiasta di Promise.allSettled(). È simile a Promise.all(), tranne per il fatto che attende che tutte le promesse siano state 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 file Blob sono più facili da leggere grazie a tre nuovi metodi: text(), arrayBuffer() e stream(); ciò 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 Async Clipboard

Inoltre, abbiamo aggiunto il supporto per le immagini all'API Asynchronous Clipboard, in modo da semplificare la copia e incolla in modo programmatico delle immagini.

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.