Neu in Chrome 79

Pete LePage

Chrome 79 wird jetzt eingeführt.

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

Maskierbare Symbole

Wenn Sie Android O oder höher verwenden und eine progressive Web-App installiert haben, ist Ihnen wahrscheinlich schon der nervige weiße Kreis um das Symbol aufgefallen.

Glücklicherweise unterstützt Chrome 79 jetzt maskierbare Symbole für installierte progressive Web-Apps.Sie müssen Ihr Symbol so gestalten, dass es in den sicheren Bereich passt – im Grunde ein Kreis mit einem Durchmesser von 80% des Canvas.

Fügen Sie dann im Manifest der Webanwendung dem Symbol eine neue purpose-Eigenschaft hinzu und legen Sie als Wert maskable fest.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes hat einen tollen Artikel auf CSS Tricks veröffentlicht: Maskable Icons: Android Adaptive Icon for Your PWA (Maskierbare Symbole: Android-Adaptive Symbole für Ihre PWA). Darin finden Sie alle Details und ein tolles Tool, mit dem Sie Ihre Symbole testen können, um sicherzustellen, dass sie passen.

Web XR

Mit der WebXR Device API können Sie jetzt immersive Erlebnisse für Smartphones und Head-Mounted Displays erstellen.

WebXR ermöglicht ein ganzes Spektrum an immersiven Erlebnissen. Beispiele sind Augmented Reality, mit der Sie sich vor dem Kauf ansehen können, wie eine neue Couch in Ihrem Zuhause aussehen könnte, sowie Virtual-Reality-Spiele und 360-Grad-Filme.

Informationen zum Einstieg in die neue API finden Sie unter Virtual Reality kommt ins Web.

Neue Ursprungstests

Ursprungstests bieten uns die Möglichkeit, experimentelle Funktionen und APIs zu validieren und es Ihnen zu ermöglichen, Feedback zu ihrer Nutzerfreundlichkeit und Effektivität in einer umfassenderen Bereitstellung zu geben.

Experimentelle Funktionen sind in der Regel nur mit einem Flag verfügbar. Wenn wir jedoch einen Ursprungstest für eine Funktion anbieten, können Sie sich für diesen Ursprungstest registrieren, um die Funktion für alle Nutzer in Ihrem Ursprung zu aktivieren.

Wenn Sie eine Ursprungstestversion aktivieren, können Sie Demos und Prototypen erstellen, die Ihre Betatester während der Testdauer ausprobieren können, ohne dass sie spezielle Flags in Chrome aktivieren müssen.

Weitere Informationen zu Ursprungstests finden Sie im Leitfaden für Webentwickler zu Ursprungstests. Auf der Seite Chrome-Origin-Tests finden Sie eine Liste der aktiven Origin-Tests und können sich dafür registrieren.

Wakelock

Eines meiner größten Ärgernisse bei Google Präsentationen ist, dass der Bildschirmschoner aktiviert wird, wenn ich das Deck zu lange auf einer einzelnen Folie geöffnet lasse. Bevor Sie fortfahren können, müssen Sie Ihren Computer entsperren. Argh.

Mit der neuen Wake Lock API kann eine Seite jedoch eine Sperre anfordern und so verhindern, dass der Bildschirm abgedunkelt oder der Bildschirmschoner aktiviert wird. Die Funktion eignet sich perfekt für Folien, aber auch für Websites mit Rezepten, bei denen Sie das Display eingeschaltet lassen möchten, während Sie der Anleitung folgen.

Wenn Sie einen Wakelock anfordern möchten, müssen Sie navigator.wakeLock.request() aufrufen und das zurückgegebene WakeLockSentinel-Objekt speichern.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Die Sperre bleibt bestehen, bis der Nutzer die Seite verlässt oder release für das zuvor gespeicherte WakeLockSentinel-Objekt aufruft.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Weitere Informationen finden Sie unter web.dev/wakelock.

rendersubtree Attribut

Manchmal möchten Sie nicht, dass ein Teil des DOM sofort gerendert wird. Dazu gehören beispielsweise Scroller mit einer großen Menge an Inhalten oder Tab-UIs, bei denen jeweils nur ein Teil der Inhalte sichtbar ist.

Das neue Attribut rendersubtree teilt dem Browser mit, dass er das Rendern dieser Unterstruktur überspringen kann. So kann der Browser mehr Zeit für die Verarbeitung des Rests der Seite aufwenden, was die Leistung erhöht.

Wenn rendersubtree auf invisible festgelegt ist, wird der Inhalt des Elements nicht gerendert oder auf Treffer geprüft. Dies ermöglicht Rendering-Optimierungen.

Wenn Sie rendersubtree in activatable ändern, werden die Inhalte sichtbar, da das invisible-Attribut entfernt und der Inhalt gerendert wird.

Chrome Dev Summit 2019

Falls Sie die Chrome Dev Summit-Vorträge verpasst haben, finden Sie sie auf unserem YouTube-Kanal.

Jake hat auch einen Twitter-Thread mit allen lustigen Dingen, die zwischen den Vorträgen passiert sind, einschließlich des neuesten Mitglieds unseres Teams, Surjiko.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 78.

Abonnieren

Wenn du über unsere Videos auf dem Laufenden bleiben möchtest, kannst du unseren YouTube-Kanal für Chrome-Entwickler abonnieren. Dann wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 80 veröffentlicht ist, erzähle ich Ihnen gleich, was es Neues bei Chrome gibt!