Novità di Chrome 84

Pete LePage

Stiamo iniziando l'implementazione della versione stabile di Chrome 84.

Tieni presente quanto segue:

Sono Pete LePage, lavoro e lavoro da casa. Diciamoci e scopriamo le novità di Chrome 84 per gli sviluppatori.

Scorciatoie icone delle app

Scorciatoie delle icone delle app per la PWA di Twitter

Le scorciatoie per le icone delle app consentono agli utenti di avviare facilmente attività comuni all'interno dell'app. Ad esempio, scrivi un nuovo tweet, invia un messaggio o visualizza le relative notifiche. Sono supportate in Chrome per Android.

Queste scorciatoie vengono richiamate premendo a lungo l'icona dell'app su Android. È facile aggiungere una scorciatoia alla PWA: crea una nuova proprietà shortcuts nel file manifest dell'app web, descrivi la scorciatoia e aggiungi le 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 l'articolo Svolgere rapidamente le attività con le scorciatoie delle app.

API Web animazioni

Chrome 84 aggiunge una serie di funzionalità precedentemente non supportate all'API Web Animations.

  • animation.ready e animation.finished sono stati promessi.
  • Il browser può ora pulire e rimuovere vecchie animazioni, risparmiando memoria e migliorando le prestazioni.
  • E ora puoi combinare animazioni usando le modalità composita con le opzioni add e accumulate.

semplicemente non posso rendere giustizia a tutti i miglioramenti o offrire esempi corretti qui, quindi dai un'occhiata ai miglioramenti dell'API Web Animations in Chromium 84 per informazioni dettagliate.

API di indicizzazione dei contenuti

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

Con l'API Content Index, che ha appena superato la prova originale, puoi aggiungere URL e metadati per i contenuti disponibili offline. Utilizzando questi metadati, i contenuti vengono poi mostrati all'utente, migliorando la rilevabilità.

Per aggiungere contenuti all'indice, chiama index.add() sulla registrazione dei service worker e fornisci i metadati richiesti relativi ai 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 i contenuti già presenti nel tuo indice? Chiamata index.getAll() per la registrazione del worker di servizio.

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 che supportano la modalità offline con l'API Content Index.

API Wake Lock

Implementazione del wakelock sul sito web di Betty Crocker.

Mi piace cucinare, ma trovo estremamente frustrante seguire una ricetta e si mette in pratica il salvaschermo. Con l'API wakelock, che passa anche dalla prova dell'origine in Chrome 84, i siti possono richiedere un wakelock per impedire l'oscuramento 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 ricevere un wakelock, chiama navigator.wakeLock.request(), restituisce un oggetto WakeLockSentinel, utilizzato per "rilasciare" il wakelock.


// 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'API Screen Wake Lock, ma almeno il mio schermo non sarà più ricoperto di farina.

Prove dell'origine

Voglio parlare di due nuove prove dell'origine. Se non hai mai utilizzato 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 potrebbe essere potenzialmente lontano dal computer. È un'ottima soluzione per applicazioni di chat o siti di social network, per far sapere agli utenti 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,
});

Per saperne di più sull'API e su come puoi iniziare a sperimentarla, consulta Rilevamento di utenti inattivi con l'API Idle Detection.

SIMD assemblaggio web

Infine, Web Assembly SIMD avvia una prova dell'origine. Introduce operazioni che corrispondono alle 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 parallele veloci con WebAssembly SIMD.

E altro ancora

Chrome 84 è grande, ma ci sono alcuni altri aggiornamenti importanti che voglio sottolineare.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 84.

Abbonati

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

Mi chiamo Pete LePage e ho ancora bisogno di un taglio di capelli, ma non appena uscirà Chrome 85 sarò felice di dirti le novità di Chrome.