Nieuw in Chroom 79

Pete LePage

Chrome 79 wordt nu uitgerold!

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 79!

Maskerbare pictogrammen

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

Gelukkig ondersteunt Chrome 79 nu maskerbare pictogrammen voor geïnstalleerde Progressive Web Apps. U moet uw pictogram zo ontwerpen dat het binnen de veilige zone past: een cirkel met een diameter die 80% van het canvas beslaat.

Vervolgens moet u in het manifest van de web-app een nieuwe purpose toevoegen aan het pictogram 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 geweldig bericht op CSS Tricks - Maskable Icons: Android Adaptive Icons for Your PWA met alle details. Ook heeft hij een geweldige tool waarmee je kunt testen of je pictogrammen passen.

Web XR

Met de WebXR Device API kunt u nu meeslepende ervaringen creëren voor smartphones en head-mounted displays.

WebXR maakt een breed scala aan meeslepende ervaringen mogelijk. Van augmented reality om te zien hoe een nieuwe bank er bij jou thuis uitziet voordat je hem koopt, tot virtual reality-games en 360-gradenfilms, en meer.

Wilt u aan de slag met de nieuwe API? Lees dan Virtual Reality Comes to the Web .

Nieuwe oorsprongsproeven

Met Origin-tests kunnen we experimentele functies en API's valideren. Ook kunt u feedback geven over de bruikbaarheid en effectiviteit ervan bij een bredere implementatie.

Experimentele functies zijn normaal gesproken alleen beschikbaar achter een vlaggetje, maar wanneer we een Origin-proefversie voor een functie aanbieden, kunt u zich registreren voor die Origin-proefversie om de functie voor alle gebruikers op uw Origin in te schakelen.

Als u deelneemt aan een Origin-proefversie, kunt u demo's en prototypes bouwen die uw bètatestgebruikers tijdens de proefperiode kunnen uitproberen, zonder dat ze speciale markeringen in Chrome hoeven aan te passen.

Meer informatie over Origin-proefversies vindt u in de Origin Trials Guide voor webontwikkelaars . U kunt een lijst met actieve Origin-proefversies bekijken en u hiervoor aanmelden op de Chrome Origin Trials- pagina.

Wake Lock

Een van mijn grootste ergernissen aan Google Slides is dat als je de presentatie te lang open laat staan ​​bij één dia, de screensaver in werking treedt. Voordat je verder kunt gaan, moet je je computer ontgrendelen. Bah.

Maar met de nieuwe Wake Lock API kan een pagina een vergrendeling aanvragen en voorkomen dat het scherm dimt of de screensaver wordt ingeschakeld. Het is perfect voor Presentaties, maar het is ook handig voor bijvoorbeeld receptenwebsites - waar je het scherm misschien aan wilt houden terwijl je de instructies volgt.

Om een ​​wakelock 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 behouden totdat de gebruiker de pagina verlaat of totdat u release aanroept op 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 informatie vindt u op web.dev/wakelock .

rendersubtree -kenmerk

Soms wil je niet dat een deel van de DOM direct wordt weergegeven. Bijvoorbeeld bij scrollers met een grote hoeveelheid content, of bij tabbladen waar slechts een deel van de content tegelijk zichtbaar is.

Het nieuwe rendersubtree attribuut vertelt de browser dat het renderen van die subtree kan worden overgeslagen. Hierdoor kan de browser meer tijd besteden aan het verwerken van de rest van de pagina, wat de prestaties verbetert.

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

Door rendersubtree te wijzigen naar activatable wordt de inhoud zichtbaar door het invisible -kenmerk te verwijderen en de inhoud te renderen.

Chrome Dev Summit 2019

Als je de Chrome Dev Summit hebt gemist, vind je alle presentaties op ons YouTube-kanaal .

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

Verder lezen

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

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 80 uitkomt, vertel ik u wat er nieuw is in Chrome!