Nieuw in Chroom 79

Piet LePage

Chrome 79 wordt nu uitgerold!

Ik ben Pete LePage , laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 79!

Maskeerbare pictogrammen

Als u Android O of hoger gebruikt en u een Progressive Web App hebt geïnstalleerd, heeft u waarschijnlijk de vervelende witte cirkel rond het pictogram opgemerkt.

Gelukkig ondersteunt Chrome 79 nu maskeerbare pictogrammen voor geïnstalleerde Progressive Web Apps. Je moet je pictogram zo ontwerpen dat het binnen de veilige zone past - in wezen een cirkel met een diameter van 80% van het canvas.

Vervolgens moet u in het web-app-manifest een nieuwe purpose aan het pictogram toevoegen en de waarde ervan instellen op maskable . 


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

Tiger Oakes heeft een geweldige post over CSS-trucs - Maskeerbare pictogrammen: Android-adaptieve pictogrammen voor uw PWA met alle details, en heeft een geweldige tool die u kunt gebruiken om uw pictogrammen te testen om er zeker van te zijn dat ze passen.

Web XR

U kunt nu meeslepende ervaringen creëren voor smartphones en op het hoofd gemonteerde beeldschermen met de WebXR Device API.

WebXR maakt een heel spectrum aan meeslepende ervaringen mogelijk. Van het gebruik van augmented reality om te zien hoe een nieuwe bank er bij u thuis uit zou kunnen zien voordat u deze koopt, tot virtual reality-games en 360 graden-films, en meer.

Lees Virtual Reality Comes to the Web om aan de slag te gaan met de nieuwe API.

Nieuwe oorsprongsproeven

Origin-proefversies bieden ons de mogelijkheid om experimentele functies en API's te valideren, en maken het voor u mogelijk om feedback te geven over hun bruikbaarheid en effectiviteit bij een bredere implementatie.

Experimentele functies zijn doorgaans alleen beschikbaar achter een vlag, maar als we een Origin-proefversie voor een functie aanbieden, kunt u zich voor die origin-proefperiode registreren om de functie voor alle gebruikers op uw oorsprong in te schakelen.

Als u zich aanmeldt voor een origin-proefversie, kunt u demo's en prototypes bouwen die uw bètatestgebruikers tijdens de proefperiode kunnen uitproberen, zonder dat ze speciale vlaggen in Chrome hoeven om te zetten.

Er is meer informatie over origin-proefversies in de Origin Trials Guide for Web Developers . U kunt een lijst met actieve Origin-proefversies bekijken en u hiervoor aanmelden op de pagina Chrome Origin-proefversies .

Wake-Lock

Een van mijn grootste ergernissen over Google Presentaties is dat als je het kaartspel te lang open laat staan ​​op een enkele dia, de screensaver in werking treedt. Voordat je verder kunt gaan, moet je je computer ontgrendelen. Uhm.

Maar met de nieuwe Wake Lock API kan een pagina een vergrendeling aanvragen en voorkomen dat het scherm wordt gedimd of dat de screensaver wordt ingeschakeld. Het is perfect voor Presentaties, maar het is ook handig voor zaken als receptensites - waar u ze misschien wilt bewaren het scherm aan terwijl u de instructies volgt.

Om een ​​wake lock aan te vragen, moet u navigator.wakeLock.request() aanroepen en het WakeLockSentinel -object opslaan dat het retourneert.

// 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}`);
  }
};

De vergrendeling blijft gehandhaafd totdat de gebruiker de pagina verlaat, of u release aanroept van het WakeLockSentinel object dat u eerder hebt opgeslagen.

// 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}`);
  }
};

Meer details vindt u op web.dev/wakelock .

rendersubtree attribuut

Er zijn momenten waarop u niet wilt dat een deel van de DOM onmiddellijk wordt weergegeven. Bijvoorbeeld scrollers met een grote hoeveelheid inhoud, of gebruikersinterfaces met tabbladen waarbij slechts een deel van de inhoud op een bepaald moment zichtbaar is.

Het nieuwe rendersubtree attribuut vertelt de browser dat hij het renderen van die subboom kan overslaan. Hierdoor kan de browser meer tijd besteden aan het verwerken van de rest van de pagina, waardoor de prestaties toenemen.

Wanneer rendersubtree is ingesteld op invisible , wordt de inhoud van het element niet getekend of getest, waardoor weergave-optimalisaties mogelijk zijn.

Als u de rendersubtree wijzigt in activatable , wordt de inhoud zichtbaar door het invisible attribuut te verwijderen en de inhoud weer te geven.

Chrome Dev Summit 2019

Als je de Chrome Dev Summit hebt gemist: alle gesprekken staan ​​op ons YouTube-kanaal .

Jake heeft ook een geweldige Twitter-thread met alle leuke dingen die tussen de gesprekken door gebeurden, waaronder het nieuwste lid van ons team, Surjiko .

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 78.

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 80 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!