Novità di Chrome 84

Pete LePage

Stiamo iniziando a rendere disponibile Chrome 84 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 facilmente attività comuni all'interno dell'app, ad esempio scrivere un nuovo tweet, inviare un messaggio o visualizzare le relative notifiche. Sono supportate in Chrome per Android.

Queste scorciatoie vengono richiamate premendo a lungo l'icona dell'app su Android. Aggiungere una scorciatoia alla PWA è facile: crea una nuova proprietà shortcuts nel file manifest dell'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 all'API Web Animations una serie di funzionalità precedentemente non supportate.

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

Semplicemente non riesco a rendere giustizia a tutti i miglioramenti o a fornire buoni esempi qui, quindi dai un'occhiata ai miglioramenti dell'API Web Animations in Chromium 84 per i dettagli completi.

API Content Indexing

Se i tuoi contenuti sono disponibili senza una connessione di rete. Ma l'utente non sa nulla? È 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() sulla registrazione del service 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 wakelock 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 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 lo utilizza oggi 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();

Naturalmente, c'è dell'altro, quindi dai un'occhiata all'articolo Rimani attivo con l'API Screen Wake Lock, ma almeno il mio schermo non sarà più ricoperto di farina.

Prove dell'origine

Ci sono due nuove prove dell'origine che voglio menzionare. Se non hai familiarità con le prove dell'origine, consulta la Guida introduttiva alle 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 Web Assembly

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, soprattutto nelle applicazioni multimediali.

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

E altro ancora

Chrome 84 è di grandi dimensioni, ma ci sono altri aggiornamenti importanti che voglio sottolineare.

Per approfondire

Sono riportati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori 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.

Mi chiamo Pete LePage e mi serve ancora un taglio di capelli, ma non appena uscirà Chrome 85, ti farò sapere le novità di Chrome.