Nieuw in Chroom 55

Pete LePage

Bekijk op YouTube

• async en await kunt u promise-gebaseerde code schrijven alsof het synchroon is, maar zonder de hoofdthread te blokkeren.
• Pointergebeurtenissen bieden een uniforme manier om alle invoergebeurtenissen te verwerken.
• Sites die aan het startscherm worden toegevoegd, krijgen automatisch de machtiging voor permanente opslag .

En er is nog veel meer.

Ik ben Pete LePage , en dit is het nieuws voor ontwikkelaars in Chrome 55!

Pointergebeurtenissen

Dingen op het web aanwijzen was vroeger eenvoudig. Je had een muis, je bewoog die, soms drukte je op knoppen, en dat was alles. Maar dit werkt hier niet zo goed.

Aanraakgebeurtenissen zijn goed, maar om aanraking en muis te ondersteunen, moest u twee gebeurtenismodellen ondersteunen:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome maakt nu uniforme invoerverwerking mogelijk door PointerEvents te verzenden:

elem.addEventListener('pointermove', pointerMoveEvent);

Pointergebeurtenissen verenigen het invoermodel voor de browser en brengen aanraking, pennen en muizen samen in één set gebeurtenissen. Ze worden ondersteund in IE11, Edge, Chrome, Opera en gedeeltelijk in Firefox .

Zie Pointing the Way Forward voor meer informatie.

async en await

Asynchrone JavaScript kan lastig te begrijpen zijn. Neem bijvoorbeeld deze functie met al zijn "mooie" callbacks:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

Door het herschrijven met promises wordt het nestprobleem vermeden:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

Maar Promise-gebaseerde code kan nog steeds moeilijk te lezen zijn als er lange ketens van asynchrone afhankelijkheden zijn.

Chrome ondersteunt nu de JavaScript-trefwoorden async en await , waardoor u Promise-gebaseerde JavaScript kunt schrijven die net zo gestructureerd en leesbaar is als synchrone code.

In plaats daarvan kan onze asynchrone functie worden vereenvoudigd tot het volgende:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake heeft een geweldig bericht: Async Functions - making promises friendly with all the details.

Permanente opslag

De proefperiode voor persistente opslag is nu voorbij. U kunt webopslag nu markeren als permanent, zodat Chrome de opslag voor uw site niet automatisch wist.

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

Bovendien krijgen sites die een hoge mate van betrokkenheid hebben, aan het startscherm zijn toegevoegd of pushmeldingen hebben ingeschakeld, automatisch de persistentiemachtiging.

Bekijk het bericht 'Persistent Storage' van Chris Wilson voor meer informatie en hoe u permanente opslag voor uw site kunt aanvragen.

CSS Automatische afbreking

Automatische CSS-afbreking , een van de meestgevraagde lay-outfuncties van Chrome, wordt nu ondersteund op Android en Mac.

Web Share API

En tot slot is het nu eenvoudiger om native deelmogelijkheden aan te roepen met de nieuwe Web Share API , die beschikbaar is als een proefversie . Paul (Mr. Web Intents) Kinlan heeft alle details in zijn Navigator Share- bericht.

Sluiting

Dit zijn slechts enkele van de wijzigingen in Chrome 55 voor ontwikkelaars.

Wilt u op de hoogte blijven van Chrome en weten wat er gaat gebeuren? Abonneer u dan en bekijk de video's van de Chrome Dev Summit voor een diepere duik in de geweldige dingen waar het Chrome-team aan werkt.

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