Novità di Chrome 79

Pete LePage

Chrome 79 è in fase di implementazione.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 79.

Icone mascherabili

Se utilizzi Android O o versioni successive e hai installato un'app web progressiva, probabilmente avrai notato il fastidioso cerchio bianco attorno 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, essenzialmente un cerchio con un diametro pari all'80% del canvas.

Nel file manifest dell'app web, dovrai quindi 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 scritto un ottimo post su CSS Tricks - Maskable Icons: Android Adaptive Icon per la tua PWA con tutti i dettagli e uno strumento fantastico che puoi utilizzare per testare le icone e assicurarti che siano adatte.

Web XR

Ora puoi creare esperienze immersive per smartphone e display montati sulla testa con l'API WebXR Device.

WebXR consente un intero spettro di esperienze immersive. Dall'utilizzo della realtà aumentata per vedere come potrebbe apparire un nuovo divano in casa prima di acquistarlo, ai giochi di realtà virtuale e ai film a 360 gradi e altro ancora.

Per iniziare a utilizzare la nuova API, leggi l'articolo La realtà virtuale arriva sul web.

Nuove prove dell'origine

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

In genere, le funzionalità sperimentali sono disponibili solo dietro un flag, ma quando offriamo una prova dell'origine per una funzionalità, puoi registrarti per la prova dell'origine per attivare la funzionalità per tutti gli utenti dell'origine.

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

Puoi trovare ulteriori informazioni sulle prove dell'origine nella Guida alle prove dell'origine per gli sviluppatori web. Puoi visualizzare un elenco delle prove delle origini attive e registrarti per partecipare alla sperimentazione nella pagina Prove delle origini di Chrome.

Attivazione/disattivazione

Una delle cose che mi preoccupano di più di Presentazioni Google è che se lasci la presentazione aperta su un'unica slide troppo a lungo, si attiva 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 dello screensaver. È perfetta per Presentazioni, ma è utile anche per siti di ricette, in cui potresti voler mantenere lo schermo acceso mentre segui le istruzioni.

Per richiedere un blocco di attivazione, devi chiamare navigator.wakeLock.request() e memorizzare l'oggetto WakeLockSentinel restituito.

// 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 non chiami release sull'oggetto WakeLockSentinel 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}`);
  }
};

Per ulteriori dettagli, visita la pagina web.dev/wakelock.

rendersubtree attributo

A volte non vuoi che parte del DOM venga visualizzata immediatamente. Ad esempio, scrollbar con una grande quantità di contenuti o interfacce utente con schede in cui solo alcuni contenuti sono visibili 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, aumentando il rendimento.

Se il criterio rendersubtree è impostato su invisible, i contenuti dell'elemento non vengono disegnati o sottoposti a test di hit, consentendo le ottimizzazioni del rendering.

Se cambi rendersubtree in activatable, i contenuti diventano visibili rimuovendo l'attributo invisible e visualizzandoli.

Chrome Dev Summit 2019

Se hai perso il Chrome Dev Summit, tutte le discussioni si svolgono sul nostro canale YouTube.

Jake ha anche un ottimo thread su Twitter con tutte le cose divertenti che hanno seguito tra una discussione e l'altra, compreso il nuovo membro del nostro team, Surjiko.

Per approfondire

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

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