Neu in Chrome 79

Pete LePage

Chrome 79 wird jetzt eingeführt.

Ich bin Pete LePage. Sehen wir uns an, was in Chrome 79 für Entwickler neu ist.

Maskierbare Symbole

Wenn Sie Android O oder höher verwenden und eine progressive Webanwendung installiert haben, ist Ihnen wahrscheinlich der störende 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, oder Virtual-Reality-Spiele und 360-Grad-Filme.

Weitere Informationen zur neuen API finden Sie unter Virtual Reality kommt ins Web.

Neue Ursprungstests

Origin-Tests bieten uns die Möglichkeit, experimentelle Funktionen und APIs zu validieren. Außerdem können Sie uns Feedback zur Nutzerfreundlichkeit und Effektivität bei einer breiteren Einführung 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 verhindern, dass das Display gedimmt 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 eine 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 Sie release auf das zuvor gespeicherte WakeLockSentinel-Objekt anwenden.

// 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 rendersubtree-Attribut teilt dem Browser mit, dass das Rendern dieses untergeordneten Baums übersprungen werden kann. So kann der Browser mehr Zeit für die Verarbeitung des Rests der Seite aufwenden und die Leistung wird verbessert.

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 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 80 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.