Novità di Chrome 79

È in corso l'implementazione di Chrome 79.

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

Icone mascherabili

Se utilizzi Android O o versioni successive e hai installato un'app web progressiva, avrai probabilmente notato il fastidioso cerchio bianco intorno all'icona.

Fortunatamente, Chrome 79 ora supporta le icone mascherabili per le app web progressive installate.Dovrai progettare l'icona in modo che rientri nella zona sicura, ovvero un cerchio con un diametro pari all'80% della tela.

Successivamente, nel file manifest dell'app web, devi aggiungere una nuova proprietà purpose all'icona e impostare il relativo valore su maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes ha pubblicato un ottimo post sui trucchi per CSS: Maskable Icons: Android Adaptive Icons for Your PWA con tutti i dettagli e ha un ottimo strumento che puoi usare per testare le tue icone e assicurarti che si adattino.

Web XR

Con l'API WebXR Device ora puoi creare esperienze immersive per smartphone e display "head-mount".

WebXR offre un'ampia gamma di esperienze coinvolgenti. Dall'utilizzo della realtà aumentata per vedere come potrebbe apparire un nuovo divano in casa prima di acquistarlo, ai giochi di realtà virtuale, ai film a 360° e altro ancora.

Per iniziare a utilizzare la nuova API, leggi Virtual Reality Comes to the Web.

Nuove prove dell'origine

Le prove dell'origine ci offrono l'opportunità di convalidare funzionalità e API sperimentali e ti permettono di fornire feedback sulla loro usabilità e efficacia in un deployment più ampio.

Le funzionalità sperimentali sono in genere disponibili solo dietro un flag, ma quando offriamo una prova dell'origine per una funzionalità, puoi registrarti alla prova dell'origine per abilitare la funzionalità per tutti gli utenti della tua origine.

L'attivazione di una prova dell'origine ti consente di creare demo e prototipi che gli utenti dei beta test possono provare per tutta la durata della prova senza richiedere loro di capovolgere flag speciali in Chrome.

Per ulteriori informazioni sulle prove dell'origine, consulta la Guida alle prove dell'origine per gli sviluppatori web. Puoi visualizzare un elenco di prove dell'origine attive e registrarti per richiederle nella pagina Prove dell'origine Chrome.

Blocco riattivazione

Uno degli aspetti più preoccupanti di Presentazioni Google è che, se lasci aperta una diapositiva aperta troppo a lungo, entra in gioco il salvaschermo. Prima di poter continuare, devi sbloccare il computer. Ehm.

Tuttavia, con la nuova API Wake Lock, una pagina può richiedere un blocco e impedire l'oscuramento dello schermo o l'attivazione del salvaschermo. È perfetto per Presentazioni, ma è utile anche per cose come i siti di ricette, in cui potresti voler mantenere lo schermo acceso mentre segui le istruzioni.

Per richiedere un wakelock, devi chiamare navigator.wakeLock.request() e salvare l'oggetto WakeLockSentinel che restituisce.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Il blocco viene mantenuto finché l'utente non esce dalla pagina o finché non chiami release sull'oggetto WakeLockSentinel che hai salvato in precedenza.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Maggiori dettagli sono disponibili all'indirizzo web.dev/wakelock.

rendersubtree attributo

A volte non vuoi che una parte del DOM venga visualizzata immediatamente. Ad esempio, gli utenti a scorrimento con una grande quantità di contenuti o le UI a schede in cui è visibile solo una parte dei contenuti in un determinato momento.

Il nuovo attributo rendersubtree indica al browser che può saltare il rendering del sottoalbero. In questo modo il browser può dedicare più tempo all'elaborazione del resto della pagina, migliorando le prestazioni.

Se rendersubtree è impostato su invisible, i contenuti dell'elemento non vengono tracciati o sottoposti a test di hit, il che consente ottimizzazioni del rendering.

Se modifichi il valore rendersubtree in activatable, i contenuti diventano visibili rimuovendo l'attributo invisible e visualizzando i contenuti.

Chrome Dev Summit 2019

Se hai perso il Chrome Dev Summit, tutti gli interventi si terranno sul nostro canale YouTube.

Jake ha anche un fantastico thread su Twitter con tutte le cose divertenti che hanno avuto tra una presentazione e l'altra, incluso l'ultimo membro del nostro team, Surjiko.

Per approfondire

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

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 sarò qui per dirti le novità di Chrome non appena uscirà Chrome 80.