Novità di Chrome 84

Pete LePage

Chrome 84 sta iniziando a essere implementato nella versione stabile.

Tieni presente quanto segue:

Sono Pete LePage, lavoro e filmo da casa. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 84.

Scorciatoie per le icone delle app

Scorciatoie per le icone delle app per la PWA di Twitter

Le scorciatoie delle icone delle app consentono agli utenti di avviare rapidamente attività comuni all'interno della tua app. Ad esempio, scrivere un nuovo tweet, inviare un messaggio o visualizzare le notifiche. Sono supportate in Chrome per Android.

Queste scorciatoie vengono richiamate premendo a lungo l'icona dell'app su Android. Aggiungere una scorciatoia alla tua PWA è facile: crea una nuova proprietà shortcuts nel manifest della tua app web, descrivi la scorciatoia e aggiungi le tue icone.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  },
]

Per informazioni dettagliate, consulta Svolgere attività rapidamente con le scorciatoie delle app.

API di animazione web

Chrome 84 aggiunge una serie di funzionalità non supportate in precedenza all'API Web Animation.

  • animation.ready e animation.finished sono stati trasformati in promise.
  • Ora il browser può ripulire e rimuovere le vecchie animazioni, risparmiando memoria e migliorando le prestazioni.
  • Ora puoi anche combinare le animazioni utilizzando le modalità composite con le opzioni add e accumulate.

Qui non posso descrivere tutti i miglioramenti o offrire buoni esempi, quindi consulta i miglioramenti dell'API Web Animations in Chromium 84 per informazioni complete.

API Content Indexing

Se i tuoi contenuti sono disponibili senza connessione di rete. Ma l'utente non lo sa? È davvero disponibile? Si è verificato un problema di rilevamento.

Con l'API Content Indexing, che ha appena superato la prova originale, puoi aggiungere URL e metadati per i contenuti disponibili offline. Grazie a questi metadati, i contenuti vengono mostrati all'utente, migliorandone la rilevabilità.

Per aggiungere contenuti all'indice, chiama index.add() nella registrazione del servizio worker e fornisci i metadati richiesti sui contenuti.


const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  url: '/articles/123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

Vuoi vedere cosa è già presente nel tuo indice? Chiama index.getAll() per la registrazione degli operatori di servizi.

const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

Per informazioni dettagliate, consulta Indicizzazione delle pagine compatibili con la modalità offline con l'API Content Indexing.

API Wake Lock

Implementazione del blocco di attivazione sul sito web di Betty Crocker.

Mi piace cucinare, ma trovo molto frustrante quando seguo una ricetta e si attiva lo screen saver. Con l'API wakelock, che esce anche dalla versione di prova dell'origine in Chrome 84, i siti possono richiedere un wakelock per impedire lo spegnimento e il blocco dello schermo.

Infatti, il sito web di Betty Crocker utilizza già questa funzionalità e ha pubblicato un case study su web.dev che mostra un aumento del 300% degli indicatori di intenzione di acquisto.

Per ottenere un blocco di attivazione, chiama navigator.wakeLock.request(), che restituisce un oggetto WakeLockSentinel, utilizzato per "rilasciare" il blocco di attivazione.


// Request the wake lock
const wl = await navigator.wakeLock.request('screen');

// Release the wake lock
wl.release();

Ovviamente, c'è un po' di più, quindi dai un'occhiata all'articolo Mantenere attivo lo schermo con l'API Screen Wake Lock, ma almeno il mio schermo non sarà più coperto di farina.

Prove dell'origine

Vorrei segnalare due nuovi test delle origini. Se non hai mai utilizzato le prove dell'origine, consulta Iniziare a utilizzare le prove dell'origine di Chrome.

Rilevamento inattività

L'API Idle Detection ti avvisa quando un utente è inattivo, indicando che è potenzialmente lontano dal computer. Questa funzionalità è ideale per applicazioni di chat o siti di social network, per consentire agli utenti di sapere se i loro contatti sono disponibili o meno.

// Create the idle detector
const idleDetector = new IdleDetector();

// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
  const uState = idleDetector.userState;
  const sState = idleDetector.screenState;
  console.log(`Idle change: ${uState}, ${sState}.`);
});

// Start the idle detector.
await idleDetector.start({
  threshold: 60000,
  signal,
});

Consulta l'articolo Rilevare gli utenti inattivi con l'API Idle Detection per scoprire di più sull'API e su come iniziare a sperimentarla oggi stesso.

SIMD WebAssembly

Inoltre, Web Assembly SIMD avvia una prova dell'origine. Introduce operazioni che mappano le istruzioni SIMD comunemente disponibili nell'hardware. Le operazioni SIMD vengono utilizzate per migliorare le prestazioni, in particolare nelle applicazioni multimediali.

Per scoprire di più su WebAssembly SIMD, consulta Applicazioni rapide e parallele con WebAssembly SIMD.

E altro ancora

Chrome 84 è un aggiornamento importante, ma ci sono altri aggiornamenti importanti che voglio segnalare.

Per approfondire

Sono riportati solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 84.

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 ho ancora bisogno di un taglio di capelli, ma non appena verrà rilasciata la versione 85 di Chrome, sarò qui per raccontarti le novità di Chrome.