Nieuw in Chroom 55

Pete LePage

Kijk op YouTube

• async and await stelt je in staat op belofte gebaseerde code te schrijven alsof deze synchroon is, maar zonder de hoofdthread te blokkeren.
• Pointer-gebeurtenissen bieden een uniforme manier om alle invoergebeurtenissen af ​​te handelen.
• Sites die aan het startscherm worden toegevoegd, krijgen automatisch de permanente opslagtoestemming.

En er is nog veel meer.

Ik ben Pete LePage . Dit is wat er nieuw is voor ontwikkelaars in Chrome 55!

Aanwijzergebeurtenissen

Vroeger was het eenvoudig om naar dingen op internet te wijzen. Je had een muis, je bewoog hem, soms drukte je op knoppen, en dat was het. Maar dit werkt hier niet zo goed.

Aanraakgebeurtenissen zijn goed, maar om aanraking en muis te ondersteunen, moest je 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);

Aanwijzergebeurtenissen verenigen het aanwijzerinvoermodel voor de browser, waardoor aanraking, pennen en muizen samenkomen in één reeks gebeurtenissen. Ze worden ondersteund in IE11, Edge, Chrome, Opera en gedeeltelijk ondersteund in Firefox .

Kijk op Wijs de weg vooruit voor meer details.

async en await

Asynchrone JavaScript kan lastig zijn om over te redeneren. Neem 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();
}

Herschrijven met promises helpt het nestprobleem te voorkomen:

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

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

Chrome ondersteunt nu de async en await -JavaScript-trefwoorden, waardoor u op Promise gebaseerd JavaScript kunt schrijven dat net zo gestructureerd en leesbaar kan zijn als synchrone code.

In plaats daarvan kan onze asynchrone functie tot dit worden vereenvoudigd:

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 geweldige post: Async Functions - beloftes vriendelijk maken met alle details.

Permanente opslag

De proefperiode voor persistente opslagoorsprong is nu voorbij. U kunt de webopslag nu als permanent markeren, zodat Chrome de opslagruimte voor uw site niet automatisch kan vrijmaken.

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 met een hoge betrokkenheid, die aan het startscherm zijn toegevoegd of waarvoor pushmeldingen zijn ingeschakeld, automatisch de persistentietoestemming.

Bekijk Chris Wilson's Persistent Storage- post voor volledige details en hoe u permanente opslag voor uw site kunt aanvragen.

CSS automatische woordafbreking

Automatische woordafbreking van CSS , een van de meest gevraagde lay-outfuncties van Chrome, wordt nu ondersteund op Android en Mac.

Webshare-API

En ten slotte is het nu eenvoudiger om native deelmogelijkheden te gebruiken met de nieuwe Web Share API , die beschikbaar is als origin-proefversie . Paul (Mr. Web Intents) Kinlan heeft alle details in zijn Navigator Share -bericht.

Sluiten

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

Als je op de hoogte wilt blijven van Chrome en wilt weten wat er gaat komen, abonneer je dan en bekijk de video's van de Chrome Dev Summit voor een diepere duik in enkele van de geweldige dingen waar het Chrome-team aan werkt.

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