Neu in Chrome 102

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Installierte PWAs können als Datei-Handler registriert werden, sodass Nutzer Dateien ganz einfach direkt auf dem Laufwerk öffnen können.
  • Mit dem Attribut inert können Sie Teile des DOM als inaktiv kennzeichnen.
  • Die Navigation API erleichtert Single-Page-Anwendungen die Navigation und Aktualisierungen der URL.
  • Und es gibt noch viele weitere Funktionen.

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

File Handling API

Mit der File Handling API können installierte PWAs beim Betriebssystem als Dateihandler registriert werden. Nach der Registrierung kann ein Nutzer auf eine Datei klicken, um sie mit der installierten PWA zu öffnen. Dies ist perfekt für PWAs, die mit Dateien interagieren, z. B. Bildeditoren, IDEs, Texteditoren usw.

Wenn Sie Ihrer PWA Funktionen zur Dateiverwaltung hinzufügen möchten, müssen Sie das Manifest Ihrer Webanwendung aktualisieren und ein file_handlers-Array mit Details zu den Dateitypen hinzufügen, die von Ihrer PWA verarbeitet werden können. Sie müssen die zu öffnende URL, die MIME-Typen, ein Symbol für den Dateityp und den Starttyp angeben. Mit dem Starttyp wird festgelegt, ob mehrere Dateien in einem oder in mehreren Clients geöffnet werden sollen.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Damit Sie bei der Ausführung der PWA auf diese Dateien zugreifen können, müssen Sie einen Verbraucher für das launchQueue-Objekt angeben. Die Starts werden in der Warteschlange platziert, bis sie vom Verbraucher verarbeitet werden.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Weitere Informationen finden Sie unter Installierte Webanwendungen als Datei-Handler verwenden.

Das Attribut inert

Das Attribut inert ist ein globales HTML-Attribut, das den Browser anweist, Nutzereingabeereignisse für ein Element zu ignorieren, einschließlich Fokusereignisse und Ereignisse von Hilfstechnologien.

Das kann beim Erstellen von UIs nützlich sein. Bei einem modalen Dialogfeld möchten Sie beispielsweise den Fokus im Modalfeld „fangen“, wenn es sichtbar ist. Wenn ein Nutzer nicht immer auf eine Leiste zugreifen kann, sorgt das Hinzufügen von inert dafür, dass ein Nutzer mit Tastatur nicht versehentlich mit der Leiste interagiert, wenn sie nicht auf dem Bildschirm sichtbar ist.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Hier wurde inert für das zweite <div>-Element deklariert. Daher kann der gesamte darin enthaltene Inhalt, einschließlich <button> und <label>, nicht den Fokus erhalten oder angeklickt werden.

inert wird in Chrome 102 unterstützt und wird bald auch in Firefox und Safari eingeführt.

Weitere Informationen finden Sie unter Einführung in Inert.

Viele Webanwendungen sind darauf angewiesen, die URL ohne Seitennavigation aktualisieren zu können. Derzeit verwenden wir die History API. Diese ist jedoch umständlich und funktioniert nicht immer wie erwartet. Anstatt die Mängel der History API zu beheben, wird mit der Navigation API dieser Bereich komplett überarbeitet.

Wenn Sie die Navigation API verwenden möchten, fügen Sie dem globalen navigation-Objekt einen navigate-Listener hinzu.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Das Ereignis ist zentral und wird für alle Arten von Navigationen ausgelöst, unabhängig davon, ob der Nutzer eine Aktion ausgeführt hat, z. B. auf einen Link geklickt, ein Formular gesendet oder zurück- und vorgegangen ist, auch wenn die Navigation programmatisch ausgelöst wird. In den meisten Fällen kann Ihr Code das Standardverhalten des Browsers für diese Aktion überschreiben.

Im Artikel Modernes clientseitiges Routing: die Navigation API finden Sie weitere Informationen und eine Demo, die Sie ausprobieren können.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Ziel der neuen Sanitizer API ist es, einen robusten Prozessor zu entwickeln, mit dem beliebige Strings sicher in eine Seite eingefügt werden können.
  • Mit dem Attribut hidden=until-found kann der Browser Text in ausgeblendeten Bereichen suchen und diesen Bereich anzeigen, wenn eine Übereinstimmung gefunden wird.

Weitere Informationen

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

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

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