Nieuw in Chrome 73

Piet LePage

In Chrome 73 hebben we ondersteuning toegevoegd voor:

En er is nog veel meer !

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 73!

Wijzig logboek

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

Progressieve webapps werken overal

Progressive Web Apps bieden een installeerbare, app-achtige ervaring, rechtstreeks via internet gebouwd en geleverd. In Chrome 73 hebben we ondersteuning voor macOS toegevoegd, waardoor ondersteuning voor Progressive Web Apps beschikbaar komt op alle desktopplatforms (Mac, Windows, ChromeOS en Linux), maar ook op mobiele apparaten, waardoor de ontwikkeling van webapps wordt vereenvoudigd.

Een Progressive Web App is snel en betrouwbaar; altijd laden en presteren met dezelfde snelheid, ongeacht de netwerkverbinding. Ze bieden rijke, boeiende ervaringen via moderne webfuncties die optimaal profiteren van de mogelijkheden van het apparaat.

Gebruikers kunnen uw PWA installeren vanuit het contextmenu van Chrome, of u kunt de installatie-ervaring rechtstreeks promoten met behulp van de beforeinstallprompt gebeurtenis. Eenmaal geïnstalleerd, integreert een PWA met het besturingssysteem en gedraagt ​​het zich als een native applicatie: gebruikers vinden en starten ze vanaf dezelfde plek als andere apps, ze draaien in hun eigen venster, ze verschijnen in de taakwisselaar, hun pictogrammen kunnen meldingsbadges tonen, enzovoort.

We willen de kloof tussen het web en native applicaties dichten en zo een solide basis bieden voor moderne applicaties die via internet worden aangeboden. We werken eraan nieuwe webplatformmogelijkheden toe te voegen die u toegang geven tot zaken als het bestandssysteem , wake lock , het toevoegen van een ambient-badge aan de adresbalk om gebruikers te laten weten dat uw PWA kan worden geïnstalleerd, beleidsinstallatie voor bedrijven en nog veel meer .

Als u al een mobiele PWA aan het bouwen bent, is een desktop-PWA niet anders. Als u responsief ontwerp heeft gebruikt, bent u waarschijnlijk al klaar om aan de slag te gaan. Uw enkele codebase werkt op desktop en mobiel. Als je net begint met PWA's, zul je verbaasd zijn hoe gemakkelijk het is om ze te maken!

  1. Voeg een manifest toe
  2. Maak een set iconen
  3. Voeg een boilerplate-servicemedewerker toe

Herhaal vervolgens vanaf daar.

Ondertekende HTTP-uitwisselingen

Signed HTTP Exchanges (SXG), onderdeel van een opkomende technologie genaamd Web Packages , is nu beschikbaar in Chrome 73. Een Signed HTTP Exchange maakt het mogelijk om 'draagbare' inhoud te creëren die door andere partijen kan worden geleverd, en dit is het belangrijkste aspect: het behoudt de integriteit en toeschrijving van de oorspronkelijke site.

Ondertekende uitwisseling: de essentie

Hierdoor wordt de oorsprong van de inhoud losgekoppeld van de server die deze levert, maar omdat de inhoud is ondertekend, lijkt het alsof deze vanaf uw server wordt afgeleverd. Wanneer de browser deze ondertekende uitwisseling laadt, kan deze veilig uw URL in de adresbalk weergeven, omdat de handtekening in de uitwisseling aangeeft dat de inhoud oorspronkelijk van uw oorsprong kwam.

Ondertekende HTTP-uitwisselingen maken een snellere levering van inhoud voor gebruikers mogelijk, waardoor het mogelijk wordt om van de voordelen van een CDN te profiteren zonder dat u de controle over de privésleutel van uw certificaat hoeft af te staan. Het AMP-team is van plan ondertekende HTTP-uitwisselingen op de zoekresultatenpagina's van Google te gebruiken om AMP-URL's te verbeteren en klikken op zoekresultaten te versnellen.

Bekijk Kinuko's Signed HTTP Exchanges- post voor meer informatie over hoe u aan de slag kunt gaan.

Constructeerbare stijlbladen

Constructable Stylesheets, nieuw in Chrome 73, bieden ons een nieuwe manier om herbruikbare stijlen te maken en te distribueren, wat vooral belangrijk is bij het gebruik van Shadow DOM.

Het is altijd mogelijk geweest om stylesheets te maken met JavaScript. Maak een <style> -element met document.createElement('style') . Open vervolgens de eigenschap sheet om een ​​verwijzing naar de onderliggende CSSStyleSheet instantie te verkrijgen en stel de stijl in.

Diagram dat de voorbereiding en toepassing van CSS toont

Het gebruik van deze methode leidt vaak tot een opgeblazen stijlblad. Erger nog, het veroorzaakt een flits van ongestylede inhoud. Constructeerbare stijlbladen maken het mogelijk om gedeelde CSS-stijlen te definiëren en voor te bereiden, en deze stijlen vervolgens eenvoudig en zonder duplicatie toe te passen op meerdere schaduwwortels of het document.

Updates van een gedeelde CSSStyleSheet worden toegepast op alle hoofdpunten waar deze is overgenomen, en het adopteren van een stylesheet gaat snel en synchroon zodra het blad is geladen.

Aan de slag gaan is eenvoudig: maak een nieuw exemplaar van CSSStyleSheet en gebruik vervolgens replace of replaceSync om de stylesheetregels bij te werken.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Bekijk Jason Miller's Constructable Stylesheets: naadloze herbruikbare stijlenpost voor meer details en codevoorbeelden!

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 73 voor ontwikkelaars. Er is natuurlijk nog veel meer.

  • matchAll() is een nieuwe methode voor het matchen van reguliere expressies op het stringprototype en retourneert een array met de volledige overeenkomsten.
  • Het <link> -element ondersteunt nu imagesrcset en imagesizes eigenschappen die overeenkomen met srcset en sizes attributen van HTMLImageElement .
  • De implementatie van de schaduwvervagingsradius van Blink komt nu overeen met Firefox en Safari.
  • De donkere modus voor de gebruikersinterface van Chrome wordt nu ondersteund op Mac en Windows-ondersteuning komt eraan. Daarnaast wordt er gewerkt aan een CSS-mediaquery: prefers-color-scheme , die kan worden gebruikt om te detecteren of de gebruiker het systeem heeft gevraagd een licht of donker kleurthema te gebruiken. De trackingbug hiervoor is Ondersteuning toevoegen voor CSS-mediafunctie prefers-color-scheme voor Chrome en Firefox .

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 74 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!

,

Piet LePage

In Chrome 73 hebben we ondersteuning toegevoegd voor:

En er is nog veel meer !

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 73!

Wijzig logboek

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

Progressieve webapps werken overal

Progressive Web Apps bieden een installeerbare, app-achtige ervaring, rechtstreeks via internet gebouwd en geleverd. In Chrome 73 hebben we ondersteuning voor macOS toegevoegd, waardoor ondersteuning voor Progressive Web Apps beschikbaar komt op alle desktopplatforms (Mac, Windows, ChromeOS en Linux), maar ook op mobiele apparaten, waardoor de ontwikkeling van webapps wordt vereenvoudigd.

Een Progressive Web App is snel en betrouwbaar; altijd laden en presteren met dezelfde snelheid, ongeacht de netwerkverbinding. Ze bieden rijke, boeiende ervaringen via moderne webfuncties die optimaal profiteren van de mogelijkheden van het apparaat.

Gebruikers kunnen uw PWA installeren vanuit het contextmenu van Chrome, of u kunt de installatie-ervaring rechtstreeks promoten met behulp van de beforeinstallprompt gebeurtenis. Eenmaal geïnstalleerd, integreert een PWA met het besturingssysteem en gedraagt ​​het zich als een native applicatie: gebruikers vinden en starten ze vanaf dezelfde plek als andere apps, ze draaien in hun eigen venster, ze verschijnen in de taakwisselaar, hun pictogrammen kunnen meldingsbadges tonen, enzovoort.

We willen de kloof tussen het web en native applicaties dichten en zo een solide basis bieden voor moderne applicaties die via internet worden aangeboden. We werken eraan nieuwe webplatformmogelijkheden toe te voegen die u toegang geven tot zaken als het bestandssysteem , wake lock , het toevoegen van een ambient-badge aan de adresbalk om gebruikers te laten weten dat uw PWA kan worden geïnstalleerd, beleidsinstallatie voor bedrijven en nog veel meer .

Als u al een mobiele PWA aan het bouwen bent, is een desktop-PWA niet anders. Als u responsief ontwerp heeft gebruikt, bent u waarschijnlijk al klaar om aan de slag te gaan. Uw enkele codebase werkt op desktop en mobiel. Als je net begint met PWA's, zul je verbaasd zijn hoe gemakkelijk het is om ze te maken!

  1. Voeg een manifest toe
  2. Maak een set iconen
  3. Voeg een boilerplate-servicemedewerker toe

Herhaal vervolgens vanaf daar.

Ondertekende HTTP-uitwisselingen

Signed HTTP Exchanges (SXG), onderdeel van een opkomende technologie genaamd Web Packages , is nu beschikbaar in Chrome 73. Een Signed HTTP Exchange maakt het mogelijk om 'draagbare' inhoud te creëren die door andere partijen kan worden geleverd, en dit is het belangrijkste aspect: het behoudt de integriteit en toeschrijving van de oorspronkelijke site.

Ondertekende uitwisseling: de essentie

Hierdoor wordt de oorsprong van de inhoud losgekoppeld van de server die deze levert, maar omdat de inhoud is ondertekend, lijkt het alsof deze vanaf uw server wordt afgeleverd. Wanneer de browser deze ondertekende uitwisseling laadt, kan deze veilig uw URL in de adresbalk weergeven, omdat de handtekening in de uitwisseling aangeeft dat de inhoud oorspronkelijk van uw oorsprong kwam.

Ondertekende HTTP-uitwisselingen maken een snellere levering van inhoud voor gebruikers mogelijk, waardoor het mogelijk wordt om van de voordelen van een CDN te profiteren zonder dat u de controle over de privésleutel van uw certificaat hoeft af te staan. Het AMP-team is van plan ondertekende HTTP-uitwisselingen op de zoekresultatenpagina's van Google te gebruiken om AMP-URL's te verbeteren en klikken op zoekresultaten te versnellen.

Bekijk Kinuko's Signed HTTP Exchanges- post voor meer informatie over hoe u aan de slag kunt gaan.

Constructeerbare stijlbladen

Constructable Stylesheets, nieuw in Chrome 73, bieden ons een nieuwe manier om herbruikbare stijlen te maken en te distribueren, wat vooral belangrijk is bij het gebruik van Shadow DOM.

Het is altijd mogelijk geweest om stylesheets te maken met JavaScript. Maak een <style> -element met document.createElement('style') . Open vervolgens de eigenschap sheet om een ​​verwijzing naar de onderliggende CSSStyleSheet instantie te verkrijgen en stel de stijl in.

Diagram dat de voorbereiding en toepassing van CSS toont

Het gebruik van deze methode leidt vaak tot een opgeblazen stijlblad. Erger nog, het veroorzaakt een flits van ongestylede inhoud. Constructeerbare stijlbladen maken het mogelijk om gedeelde CSS-stijlen te definiëren en voor te bereiden, en deze stijlen vervolgens eenvoudig en zonder duplicatie toe te passen op meerdere schaduwwortels of het document.

Updates van een gedeelde CSSStyleSheet worden toegepast op alle hoofdpunten waar deze is overgenomen, en het adopteren van een stylesheet gaat snel en synchroon zodra het blad is geladen.

Aan de slag gaan is eenvoudig: maak een nieuw exemplaar van CSSStyleSheet en gebruik vervolgens replace of replaceSync om de stylesheetregels bij te werken.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

Bekijk Jason Miller's Constructable Stylesheets: naadloze herbruikbare stijlenpost voor meer details en codevoorbeelden!

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 73 voor ontwikkelaars. Er is natuurlijk nog veel meer.

  • matchAll() is een nieuwe methode voor het matchen van reguliere expressies op het stringprototype en retourneert een array met de volledige overeenkomsten.
  • Het <link> -element ondersteunt nu imagesrcset en imagesizes eigenschappen die overeenkomen met srcset en sizes attributen van HTMLImageElement .
  • De implementatie van de schaduwvervagingsradius van Blink komt nu overeen met Firefox en Safari.
  • De donkere modus voor de gebruikersinterface van Chrome wordt nu ondersteund op Mac en Windows-ondersteuning komt eraan. Daarnaast wordt er gewerkt aan een CSS-mediaquery: prefers-color-scheme , die kan worden gebruikt om te detecteren of de gebruiker het systeem heeft gevraagd een licht of donker kleurthema te gebruiken. De trackingbug hiervoor is Ondersteuning toevoegen voor CSS-mediafunctie prefers-color-scheme voor Chrome en Firefox .

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 74 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!