Neu in Chrome 73

Pete LePage

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

Und viele weitere Funktionen!

Ich bin Pete LePage. Sehen wir uns die Neuerungen in Chrome 73 für Entwickler an.

Änderungsprotokoll

Hier werden nur einige der wichtigsten Highlights behandelt. Weitere Änderungen in Chrome 73 finden Sie unter den folgenden Links.

Progressive Web-Apps funktionieren überall

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

Eine progressive Web-App ist schnell und zuverlässig. Sie lädt und arbeitet unabhängig von der Netzwerkverbindung immer mit der gleichen Geschwindigkeit. Sie bieten umfassende, ansprechende Nutzererfahrungen über moderne Webfunktionen, die die Gerätefunktionen voll ausschöpfen.

Nutzer können Ihre PWA über das Kontextmenü von Chrome installieren. Sie können die Installation auch direkt über das Ereignis beforeinstallprompt bewerben. Nach der Installation wird eine PWA in das Betriebssystem eingebunden 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 im Task-Switcher angezeigt, ihre Symbole können Benachrichtigungslogos enthalten usw.

Wir möchten die Funktionslücke zwischen Web und Native schließen, um eine solide Grundlage für moderne Webanwendungen zu schaffen. Wir arbeiten daran, neue Funktionen für die Webplattform hinzuzufügen, die Ihnen Zugriff auf Dinge wie das Dateisystem und die Aktivierungssperre bieten. Außerdem können Sie der Adressleiste ein Ambient-Logo hinzufügen, um Nutzer darüber zu informieren, dass Ihre PWA installiert werden kann. Außerdem gibt es Richtlinien für Unternehmen und viel mehr.

Wenn Sie bereits eine mobile PWA entwickeln, ist das bei einer Desktop-PWA nicht anders. Wenn Sie bereits responsives Webdesign verwendet haben, sind Sie wahrscheinlich schon auf der sicheren Seite. Ihre 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. Symbole erstellen
  3. Service Worker-Vorlage hinzufügen

Und dann iterieren Sie weiter.

Signed HTTP Exchanges

Signed HTTP Exchanges (SXG) ist Teil der neuen Technologie Web Packages und ist jetzt in Chrome 73 verfügbar. Mit einem Signed HTTP Exchange können „tragbare“ Inhalte erstellt werden, die von anderen Parteien bereitgestellt werden können. Das ist der entscheidende Aspekt: Die Integrität und Zuordnung der ursprünglichen Website bleibt erhalten.

Signed Exchange: Die Essenz

Dadurch wird der Ursprung der Inhalte vom Server getrennt, über den sie bereitgestellt werden. Da sie jedoch signiert sind, sieht es so aus, als würden sie von deinem Server bereitgestellt. Wenn der Browser diese Signed Exchange-Datei lädt, kann er Ihre URL sicher in der Adressleiste anzeigen, da die Signatur in der Exchange-Datei angibt, dass die Inhalte ursprünglich von Ihrem Ursprung stammen.

Signierte HTTP-Austausche ermöglichen eine schnellere Inhaltsübermittlung 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, Signed HTTP Exchanges auf Google-Suchergebnisseiten zu nutzen, um AMP-URLs zu verbessern und Klicks auf Suchergebnisse zu beschleunigen.

In Kinukos Beitrag Signed HTTP Exchanges (Unterzeichnete HTTP-Austausche) findest du weitere Informationen zum Einstieg.

Konstruierbare Style Sheets

Mit den in Chrome 73 eingeführten Stylesheets, die sich erstellen lassen, haben wir eine neue Möglichkeit, wiederverwendbare Stile zu erstellen und bereitzustellen. 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. Rufen Sie dann die Eigenschaft „sheet“ auf, um eine Referenz auf die zugrunde liegende CSSStyleSheet-Instanz abzurufen, und legen Sie den Stil fest.

Diagramm zur Vorbereitung und Anwendung von CSS

Die Verwendung dieser Methode führt in der Regel zu einer unnötigen Größe des Stylesheets. Schlimmer noch: Es führt zu einem kurzen Flash von nicht formatierten Inhalten. Mit bearbeitbaren Stylesheets können Sie gemeinsame CSS-Stile definieren und vorbereiten und diese Stile dann ganz einfach und ohne Duplizierung auf mehrere Schatten-Roots oder das Dokument anwenden.

Änderungen an einem freigegebenen CSSStyleSheet werden auf alle Stammelemente angewendet, in denen es ü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 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 Beitrag Konstruktable Stylesheets: nahtlos wiederverwendbare Stile von Jason Miller.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 73 für Entwickler. Es gibt natürlich noch viele weitere.

  • matchAll() ist eine neue Methode zum Abgleichen von regulären Ausdrücken mit dem String-Prototyp und gibt ein Array mit den vollständigen Übereinstimmungen zurück.
  • Das <link>-Element unterstützt jetzt die Eigenschaften imagesrcset und imagesizes, die den srcset- und sizes-Attributen von HTMLImageElement entsprechen.
  • Die Implementierung des Schattenunschärferadius in Blink entspricht jetzt der von Firefox und Safari.
  • Der dunkle Modus für die Chrome-Benutzeroberfläche wird jetzt auf Macs unterstützt. Windows-Support ist in Vorbereitung. Außerdem wird an einer CSS-Medienabfrage gearbeitet: prefers-color-scheme. Damit kann erkannt werden, ob der Nutzer das System aufgefordert hat, ein helles oder dunkles Farbschema zu verwenden. Der Tracking-Fehler dafür lautet: Unterstützung für die CSS-prefers-color-scheme-Medienfunktion 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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 74 veröffentlicht wird, erzähle ich Ihnen gern, was es Neues in Chrome gibt.