Neu in Chrome 73

Pete LePage

Twitter GitHub Glitch Mastodon Startseite

Chrome 73 bietet Unterstützung für:

• Einfachere Erstellung mobiler Inhalte mit signierten HTTP-Austauschdiensten
• Dynamisches Ändern von Stilen wird mit konstruierbaren Stylesheets wesentlich einfacher.
• Progressive Web-Apps werden ab sofort für Macs unterstützt. Diese werden jetzt auf allen Desktop- und mobilen Plattformen unterstützt. Dadurch ist es ganz einfach, installierbare Apps zu erstellen, die über das Web bereitgestellt werden.

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Sehen wir uns an, was es für Entwickler in Chrome 73 Neues gibt.

Änderungsprotokoll

Hier werden nur einige der wichtigsten Highlights vorgestellt. Weitere Änderungen in Chrome 73 findest du unter den folgenden Links.

• Liste mit Änderungen des Chromium-Quell-Repositorys
• ChromeStatus.com-Updates für Chrome 73
• Chrome 73 wird eingestellt und entfernt
• Medienupdates für Chrome 73
• Neuerungen bei JavaScript in Chrome 73

Progressive Web-Apps funktionieren überall

Progressive Web-Apps bieten eine installierbare, app-ähnliche Erfahrung, die direkt über das Web erstellt und bereitgestellt wird. In Chrome 73 haben wir macOS-Unterstützung hinzugefügt und progressive Web-Apps auf allen Desktop-Plattformen – Mac, Windows, ChromeOS und Linux – sowie auf Mobilgeräten unterstützt. Dies vereinfacht die Entwicklung von Webanwendungen.

Eine progressive Web-App ist schnell und zuverlässig. Sie wird unabhängig von der Netzwerkverbindung immer mit der gleichen Geschwindigkeit geladen und ausgeführt. Sie bieten durch moderne Webfunktionen, die die Gerätefunktionen optimal nutzen, eine umfassende und interaktive Nutzererfahrung.

Nutzer können die PWA über das Kontextmenü von Chrome installieren oder die Installation mithilfe des Ereignisses beforeinstallprompt direkt fördern. Nach der Installation lässt sich eine PWA in das Betriebssystem einbinden und verhält sich dann wie eine native Anwendung: Nutzer finden und starten sie am selben Ort wie andere Apps, sie werden in ihrem eigenen Fenster ausgeführt, sie werden in der Aufgabenauswahl angezeigt, ihre Symbole können Benachrichtigungslogos anzeigen usw.

Wir möchten die Funktionslücke zwischen Web und nativen Systemen schließen, um eine solide Grundlage für moderne, im Web bereitgestellte Anwendungen zu schaffen. Wir arbeiten an neuen Webplattformfunktionen, mit denen Sie beispielsweise auf das Dateisystem und die Wakelock-Funktion zugreifen können. Außerdem fügen wir der Adressleiste ein minimales Badge hinzu, um Nutzer darüber zu informieren, dass Ihre PWA installiert werden kann, sowie die Installation von Richtlinien für Unternehmen und viele weitere Funktionen.

Wenn Sie bereits eine mobile PWA erstellen, gilt das genauso. Wenn Sie schon mal responsives Design verwendet haben, werden Sie dies wahrscheinlich bereits tun. Ihre einzige Codebasis funktioniert sowohl auf Desktop-Computern als auch auf Mobilgeräten. Wenn Sie gerade erst mit PWAs arbeiten, werden Sie überrascht sein, wie einfach es ist, sie zu erstellen.

1. Manifest hinzufügen
2. Symbole erstellen
3. Boilerplate-Service Worker hinzufügen

Wiederholen Sie dann von dort aus.

Signed HTTP Exchanges

Signed HTTP Exchanges (SXG), Teil einer neuen Technologie namens Web Packages, ist jetzt in Chrome 73 verfügbar. Mit Signed HTTP Exchange können "portable" Inhalte erstellt werden, die von anderen Parteien bereitgestellt werden können. Dies ist der wichtigste Aspekt, denn er behält die Integrität und Zuordnung der ursprünglichen Website bei.

Dadurch wird der Ursprung des Inhalts von dem Server entkoppelt, der ihn bereitstellt. Da der Inhalt jedoch signiert ist, sieht es so aus, als würde er von Ihrem Server bereitgestellt. Wenn der Browser diesen Signed Exchange-Dienst lädt, kann Ihre URL sicher in der Adressleiste angezeigt werden, da die Signatur darauf hinweist, dass der Inhalt ursprünglich von Ihrem Ursprungsserver stammt.

Signierte HTTP-Austauschdienste ermöglichen Nutzern eine schnellere Inhaltsübermittlung. Dadurch können Sie die Vorteile eines CDN nutzen, ohne die Kontrolle über den privaten Schlüssel Ihres Zertifikats abtreten zu müssen. Das AMP-Team plant, signierte HTTP-Austausche auf Google-Suchergebnisseiten zu verwenden, um AMP-URLs zu verbessern und mehr Klicks auf Suchergebnisse zu erzielen.

Weitere Informationen zum Einstieg finden Sie im Beitrag Signed HTTP Exchanges von Kinuko.

Konstruierbare Stylesheets

Die neuen konstruktionsfähigen Stylesheets in Chrome 73 bieten eine neue Möglichkeit, wiederverwendbare Stile zu erstellen und zu verteilen. Das ist besonders wichtig, wenn Sie Shadow DOM verwenden.

Es war schon immer möglich, Stylesheets mithilfe von JavaScript zu erstellen. Erstellen Sie mit document.createElement('style') ein <style>-Element. Rufen Sie dann die Tabellenblatteigenschaft auf, um einen Verweis auf die zugrunde liegende CSSStyleSheet-Instanz zu erhalten, und legen Sie den Stil fest.

Die Verwendung dieser Methode führt tendenziell dazu, dass Stylesheets aufgebläht werden. Noch schlimmer ist es, wenn sie unsinnige Inhalte auffallen. Mit konstruierbaren Stylesheets können gemeinsam genutzte CSS-Stile definiert und vorbereitet werden. Diese Stile können dann einfach und ohne Duplizierung auf mehrere Shadow Roots oder das Dokument angewendet werden.

Aktualisierungen eines freigegebenen CSSStyleSheet werden auf alle Stammknoten angewendet, in denen sie übernommen wurde. Die Übernahme eines Stylesheets erfolgt schnell und synchron, sobald das Tabellenblatt geladen wurde.

Der Einstieg ist ganz einfach. Erstellen Sie eine neue Instanz von CSSStyleSheet und aktualisieren Sie dann die Stylesheet-Regeln entweder mit replace oder replaceSync.

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);
  });

Weitere Informationen und Codebeispiele finden Sie im Post Konstruktable Stylesheets: Nahtlose wiederverwendbare Stile von Jason Miller.

…und vieles mehr

Dies sind nur ein paar der Änderungen in Chrome 73 für Entwickler. Und natürlich gibt es noch viel mehr.

• matchAll() ist eine neue Methode zum Abgleichen von regulären Ausdrücken im Stringprototyp und gibt ein Array mit den vollständigen Übereinstimmungen zurück.
• Das <link>-Element unterstützt jetzt die Attribute imagesrcset und imagesizes, die den Attributen srcset und sizes von HTMLImageElement entsprechen.
• Die Implementierung des Radius zur Weichzeichnung von Schatten in Blink entspricht jetzt Firefox und Safari.
• Der dunkle Modus für die Benutzeroberfläche von Chrome wird jetzt auf dem Mac unterstützt. Auch Windows wird demnächst unterstützt. Außerdem gibt es eine CSS-Medienabfrage: prefers-color-scheme, mit der ermittelt werden kann, ob der Nutzer ein helles oder dunkles Farbdesign beim System angefordert hat. Der Tracking-Fehler dafür ist Unterstützung für CSS-Medienfunktion prefers-color-scheme für Chrome und Firefox.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 74 veröffentlicht wird, melde ich mich, um Sie über die Neuheiten in Chrome zu informieren.