Neu in Chrome 73

Pete LePage

In Chrome 73 haben wir Unterstützung für Folgendes hinzugefügt:

• Signed HTTP Exchanges erleichtern das Erstellen übertragbarer Inhalte.
• Mit erstellbaren Stylesheets wird das dynamische Ändern von Stilen viel einfacher.
• Die Unterstützung für progressive Web-Apps (PWAs) für Mac bedeutet, dass PWAs jetzt auf allen Desktop- und Mobilplattformen unterstützt werden. So lassen sich ganz einfach installierbare Apps erstellen, die über das Web bereitgestellt werden.

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 73 gibt.

Änderungsprotokoll

Dies sind nur einige der wichtigsten Neuerungen. Über die Links unten finden Sie weitere Änderungen in Chrome 73.

• Chromium-Quellcode-Repository – Änderungsliste
• ChromeStatus.com-Updates für Chrome 73
• Einstellung und Entfernung von Funktionen in Chrome 73
• Media-Updates für Chrome 73
• Neuigkeiten bei JavaScript in Chrome 73

Progressive Web-Apps funktionieren überall

Progressive Web-Apps bieten eine installierbare app-ähnliche Nutzererfahrung, die direkt im Web erstellt und bereitgestellt wird. In Chrome 73 haben wir Unterstützung für macOS hinzugefügt. Damit werden progressive Web-Apps auf allen Desktop-Plattformen unterstützt: Mac, Windows, ChromeOS und Linux sowie auf Mobilgeräten. Das vereinfacht die Entwicklung von Web-Apps.

Eine Progressive Web-App ist schnell und zuverlässig. Sie wird immer mit derselben Geschwindigkeit geladen und ausgeführt, unabhängig von der Netzwerkverbindung. Sie bieten mithilfe moderner Webfunktionen, die die Gerätefunktionen voll ausschöpfen, umfassende und ansprechende Nutzererlebnisse.

Nutzer können Ihre PWA über das Kontextmenü von Chrome installieren. Alternativ können Sie die Installation auch direkt über das beforeinstallprompt-Ereignis bewerben. Nach der Installation wird eine PWA in das Betriebssystem integriert und verhält sich wie eine native Anwendung: Nutzer finden und starten sie an derselben Stelle wie andere Apps, sie werden in einem eigenen Fenster ausgeführt, sie werden in der Aufgabenübersicht angezeigt, ihre Symbole können Benachrichtigungsbadges enthalten usw.

Wir möchten die Funktionslücke zwischen Web und nativen Apps schließen, um eine solide Grundlage für moderne Anwendungen zu schaffen, die im Web bereitgestellt werden. Wir arbeiten daran, neue Webplattformfunktionen hinzuzufügen, die Ihnen Zugriff auf Dinge wie das Dateisystem, Wake Lock und das Hinzufügen eines Umgebungsbadges zur Adressleiste ermöglichen, um Nutzer darüber zu informieren, dass Ihre PWA installiert werden kann. Außerdem arbeiten wir an der Richtlinieninstallation für Unternehmen und vielen weiteren Funktionen.

Wenn Sie bereits eine mobile PWA entwickeln, unterscheidet sich eine Desktop-PWA nicht. Wenn Sie responsives Design verwendet haben, sind Sie wahrscheinlich schon gut aufgestellt. Ihre einzige Codebasis funktioniert auf Computern und Mobilgeräten. Wenn Sie gerade erst mit PWAs beginnen, werden Sie überrascht sein, wie einfach es ist, sie zu erstellen.

1. Manifest hinzufügen
2. Symbolgruppe erstellen
3. Standard-Service-Worker hinzufügen

Entwickeln Sie dann die Lösung weiter.

Signed HTTP Exchanges

Signed HTTP Exchanges (SXG), Teil einer neuen Technologie namens Web Packages, sind jetzt in Chrome 73 verfügbar. Mit Signed HTTP Exchange können „portable“ Inhalte erstellt werden, die von anderen Parteien bereitgestellt werden können. Dabei bleiben die Integrität und Zuordnung der ursprünglichen Website erhalten.

Dadurch wird der Ursprung des Inhalts vom Server entkoppelt, der ihn bereitstellt. Da er jedoch signiert ist, ist es so, als würde er von Ihrem Server bereitgestellt. Wenn der Browser diese Signed Exchange lädt, kann er Ihre URL sicher in der Adressleiste anzeigen, da die Signatur in der Exchange angibt, dass die Inhalte ursprünglich von Ihrem Ursprung stammen.

Signierte HTTP-Austausche ermöglichen eine schnellere Inhaltsbereitstellung für Nutzer. So können Sie die Vorteile eines CDN nutzen, ohne die Kontrolle über den privaten Schlüssel Ihres Zertifikats abgeben zu müssen. Das AMP-Team plant, signierte HTTP-Austausche auf Google-Suchergebnisseiten zu verwenden, um AMP-URLs zu verbessern und Klicks auf Suchergebnisse zu beschleunigen.

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

Erstellbare Stylesheets

Mit Constructable Stylesheets, die in Chrome 73 eingeführt wurden, können wir wiederverwendbare Stile erstellen und verteilen. Das ist besonders wichtig, wenn Shadow DOM verwendet wird.

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

Diese Methode führt in der Regel zu einer Aufblähung des Stylesheets. Noch schlimmer: Es kommt zu einem Flash von nicht formatierten Inhalten. Mit Constructable Stylesheets können Sie gemeinsame CSS-Stile definieren und vorbereiten und diese dann einfach und ohne Duplizierung auf mehrere Shadow Roots oder das Dokument anwenden.

Änderungen an einem freigegebenen CSSStyleSheet werden auf alle Roots angewendet, in denen es übernommen wurde. Das Übernehmen eines Stylesheets ist schnell und synchron, sobald das Sheet geladen wurde.

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

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 Beitrag Constructable Stylesheets: seamless reusable styles von Jason Miller.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 73 für Entwickler.

• matchAll() ist eine neue Methode zum Abgleichen regulärer Ausdrücke im String-Prototyp, die ein Array mit den vollständigen Übereinstimmungen zurückgibt.
• Das <link>-Element unterstützt jetzt die Attribute imagesrcset und imagesizes, die den Attributen srcset und sizes von HTMLImageElement entsprechen.
• Der Schattenunschärferadius von Blink entspricht jetzt dem von Firefox und Safari.
• Der dunkle Modus für die Chrome-Benutzeroberfläche wird jetzt auf Mac-Computern unterstützt. Die Unterstützung für Windows ist in Vorbereitung. Außerdem wird an einer CSS-Media-Query gearbeitet: prefers-color-scheme, mit der erkannt werden kann, ob der Nutzer ein helles oder dunkles Farbdesign für das System angefordert hat. Der Tracking-Fehler für dieses Problem ist Unterstützung für die Media-Funktion prefers-color-scheme von CSS hinzufügen 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 erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 74 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.