È in corso l'implementazione di Chrome 79.
- Le app web progressive installate su Android ora supportano le icone mascherabili.
- Ora puoi creare esperienze immersive con l'API WebXR Device.
- L'API Wake Lock è disponibile come prova dell'origine.
- L'attributo
rendersubtree
è disponibile come prova dell'origine. - I video del Chrome DevSummit sono ora online.
- E molto altro ancora.
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.
- Novità di Chrome DevTools (79)
- Ritiri e rimozioni di Chrome 79
- Aggiornamenti di ChromeStatus.com per Chrome 79
- Novità di JavaScript in Chrome 79
- Elenco delle modifiche al repository di origine di Chromium
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.