Nieuw in Chrome 73

Pete LePage

In Chrome 73 hebben we ondersteuning toegevoegd voor:

En er is nog veel meer !

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

Wijzigingslogboek

Hieronder worden slechts enkele van de belangrijkste hoogtepunten besproken. Bekijk de onderstaande links voor meer wijzigingen in Chrome 73.

Progressieve web-apps werken overal

Progressive Web Apps bieden een installeerbare, app-achtige ervaring, gebouwd en direct via het web geleverd. In Chrome 73 hebben we ondersteuning voor macOS toegevoegd, waardoor Progressive Web Apps beschikbaar is op alle desktopplatforms - Mac, Windows, ChromeOS en Linux, evenals op mobiele apparaten, wat de ontwikkeling van webapps vereenvoudigt.

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

Gebruikers kunnen uw PWA installeren via het contextmenu van Chrome, of u kunt de installatie-ervaring direct promoten met de beforeinstallprompt -gebeurtenis. Na installatie integreert een PWA met het besturingssysteem en gedraagt ​​zich als een native applicatie: gebruikers vinden en starten ze vanaf dezelfde locatie als andere apps, ze draaien in hun eigen venster, ze verschijnen in de taakwisselaar, hun pictogrammen kunnen meldingsbadges weergeven, enzovoort.

We willen de kloof tussen web en native applicaties dichten en een solide basis leggen voor moderne webapplicaties. We werken aan het toevoegen van nieuwe webplatformfuncties 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 geïnstalleerd kan worden, beleidsinstallatie voor bedrijven en nog veel meer .

Als je al een mobiele PWA bouwt, is een desktop-PWA niet anders. Sterker nog, als je al eens responsive design hebt gebruikt, ben je waarschijnlijk al klaar om aan de slag te gaan. Je codebase werkt op zowel desktop als mobiel. Als je net begint met PWA's, zul je verrast zijn hoe eenvoudig het is om ze te maken!

  1. Een manifest toevoegen
  2. Een set pictogrammen maken
  3. Voeg een standaard service worker toe

Ga vervolgens vanaf daar verder.

Ondertekende HTTP-uitwisselingen

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

Ondertekende uitwisseling: de essentie

Hierdoor wordt de herkomst van de content losgekoppeld van de server die deze aflevert, maar omdat deze ondertekend is, lijkt het alsof deze vanaf jouw server wordt afgeleverd. Wanneer de browser deze Signed Exchange laadt, kan deze jouw URL veilig in de adresbalk weergeven, omdat de handtekening in de exchange aangeeft dat de content oorspronkelijk van jouw bron afkomstig is.

Gesigneerde HTTP-uitwisselingen maken snellere contentlevering voor gebruikers mogelijk, waardoor u kunt profiteren van de voordelen van een CDN zonder de controle over de privésleutel van uw certificaat te hoeven opgeven. Het AMP-team is van plan om ondertekende HTTP-uitwisselingen te gebruiken op Google-zoekresultatenpagina's om AMP-URL's te verbeteren en het aantal klikken op zoekresultaten te versnellen.

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

Constructeerbare stijlbladen

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

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

Diagram dat de voorbereiding en toepassing van CSS laat zien

Deze methode leidt vaak tot een overvolle stylesheet. Sterker nog, het veroorzaakt een flits van ongestyleerde content. Constructable Stylesheets maken het mogelijk om gedeelde CSS-stijlen te definiëren en voor te bereiden, en deze vervolgens eenvoudig en zonder duplicatie toe te passen op meerdere Shadow Roots of het document.

Updates van een gedeelde CSSStyleSheet worden toegepast op alle roots waarin deze is overgenomen. Het overnemen van een stylesheet gebeurt snel en synchroon zodra de sheet 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 het bericht Constructable Stylesheets: seamless reusable styles van Jason Miller voor meer informatie en codevoorbeelden!

En nog veel meer!

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

  • matchAll() is een nieuwe methode voor het matchen van reguliere expressies op het tekenreeksprototype en retourneert een array met de volledige matches.
  • Het <link> -element ondersteunt nu de eigenschappen imagesrcset en imagesizes zodat deze overeenkomen met de kenmerken srcset en sizes 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 ondersteuning voor Windows is onderweg. 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 kleurenthema te gebruiken. De trackingbug hiervoor is: Voeg ondersteuning toe voor CSS prefers-color-scheme mediafunctie voor Chrome en Firefox .

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 74 uitkomt, vertel ik u graag wat er nieuw is in Chrome!