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.

Poi, nel file manifest dell'app web, dovrai aggiungere una nuova proprietà purpose all'icona e impostarne il 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 offre un ottimo strumento 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.

Blocco attivazione

Uno dei miei principali problemi con Presentazioni Google è che se lasci la serie aperta su una singola diapositiva per troppo tempo, si attiva lo screensaver. 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. È perfetto 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 di quel sottoalbero. In questo modo, il browser può dedicare più tempo all'elaborazione del resto della pagina, aumentando il rendimento.

Quando rendersubtree è impostato su invisible, i contenuti dell'elemento non vengono disegnati o sottoposti a test di hit, il che consente di ottimizzare il rendering.

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

Chrome Dev Summit 2019

Se non hai potuto partecipare al Chrome Dev Summit, tutti i talk sono disponibili sul nostro canale YouTube.

Jake ha anche pubblicato un fantastico thread di Twitter con tutte le cose divertenti che sono successe tra un talk e l'altro, incluso il nuovo membro del nostro team, Surjiko.

Per approfondire

Sono riportati solo alcuni dei 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.

Sono Pete LePage e, non appena verrà rilasciato Chrome 80, sarò qui per raccontarti le novità di Chrome.