Betriebssystemintegration

Web-Apps haben eine große Reichweite. Sie laufen auf mehreren Plattformen. Sie lassen sich ganz einfach über Links teilen. In der Vergangenheit fehlte ihnen jedoch die Integration in das Betriebssystem. Vor Kurzem waren sie noch nicht mal installierbar. Glücklicherweise hat sich das geändert. Jetzt können wir diese Integration nutzen, um unseren PWAs nützliche Funktionen hinzuzufügen. Sehen wir uns einige dieser Optionen an.

Mit dem Dateisystem arbeiten

Ein typischer Nutzerworkflow mit Dateien sieht so aus:

• Wählen Sie eine Datei oder einen Ordner auf dem Gerät aus und öffnen Sie sie direkt.
• Nehmen Sie die gewünschten Änderungen an den Dateien oder Ordnern vor und speichern Sie sie direkt wieder.
• Neue Dateien und Ordner erstellen

Vor der File System Access API war dies nicht für Web-Apps möglich. Zum Öffnen von Dateien war ein Dateiupload erforderlich. Zum Speichern von Änderungen mussten die Nutzer sie herunterladen und das Web hatte keinen Zugriff, um neue Dateien und Ordner im Dateisystem des Nutzers zu erstellen.

Dateien öffnen

Zum Öffnen einer Datei verwenden wir die Methode window.showOpenFilePicker(). Beachten Sie, dass diese Methode eine Nutzergeste erfordert, z. B. das Klicken auf eine Schaltfläche. Zum Öffnen einer Datei gehen Sie dann wie folgt vor:

1. Erfassen Sie das Datei-Handle aus der File Picker API des Dateisystemzugriffs. So erhalten Sie grundlegende Informationen zur Datei.
2. Mit der getFile()-Methode des Handles erhalten Sie eine spezielle Art von Blob namens File, die zusätzliche schreibgeschützte Eigenschaften für die Datei enthält, z. B. den Namen und das Datum der letzten Änderung. Da es sich um einen Blob handelt, können Blob-Methoden wie text() aufgerufen werden, um dessen Inhalt abzurufen.

// Have the user select a file.
const [ handle ] = await window.showOpenFilePicker();
// Get the File object from the handle.
const file = await handle.getFile();
// Get the file content.
// Also available, slice(), stream(), arrayBuffer()
const content = await file.text();

Änderungen werden gespeichert

Zum Speichern von Änderungen an einer Datei ist auch eine Nutzergeste erforderlich: dann:

1. Verwende das Datei-Handle, um einen FileSystemWritableFileStream zu erstellen.
2. Nimm die gewünschten Änderungen am Stream vor. Dadurch wird die Datei nicht aktualisiert. wird in der Regel eine temporäre Datei erstellt.
3. Wenn Sie alle Änderungen vorgenommen haben, schließen Sie den Stream, wodurch die Änderungen von temporären in dauerhaft verschoben werden.

Sehen wir uns das im Code an:

// Make a writable stream from the handle.
const writable = await handle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();

Dateiverwaltung

Mit der File System Access API können Sie Dateien in Ihrer App öffnen, aber was ist umgekehrt? Nutzer möchten ihre bevorzugte App als Standard-App zum Öffnen von Dateien festlegen. Die API zur Dateiverarbeitung ist eine experimentelle API, mit der installierte PWAs folgende Aktionen ausführen können: Registrieren Sie sich als Datei-Handler auf dem Gerät eines Nutzers und geben Sie den MIME-Typ und die Dateiendung an, die Ihre PWA in Ihrem Web-App-Manifest unterstützt. Sie können benutzerdefinierte Dateisymbole für Ihre unterstützten Erweiterungen festlegen.

Nach der Registrierung wird die installierte PWA im Dateisystem des Nutzers als Option angezeigt, damit er die Datei direkt darin öffnen kann. Hier ist ein Beispiel für die Manifesteinrichtung für eine PWA zum Lesen von Textdateien:

...
"file_handlers": [
     {
         "action": "/open-file",
         "accept": {
             "text/*": [".txt"]
         }
     }
]
...

Umgang mit URLs

Mit der URL-Verarbeitung kann Ihre PWA Links erfassen, die Teil ihres Bereichs des Betriebssystems sind, und sie in einem PWA-Fenster statt auf dem Tab des Standardbrowsers rendern. Wenn Sie beispielsweise eine Nachricht mit einem Link zur PWA erhalten oder in Ihrer PWA auf einen Deeplink (eine URL, die auf einen bestimmten Inhalt verweist) klicken, wird der Inhalt in einem eigenständigen Fenster geöffnet.

Dieses Verhalten ist unter Android automatisch verfügbar, wenn WebAPK verwendet wird, z. B. wenn Nutzer eine PWA mit Chrome installieren. Es ist nicht möglich, URLs in PWAs, die unter iOS oder iPadOS installiert sind, über Safari zu erfassen.

Die Webbrowser-Community hat eine neue Spezifikation für Desktop-Browser erstellt. Diese Spezifikation ist derzeit experimentell. wird ein neues Manifestdatei-Mitglied hinzugefügt: url_handlers. Diese Eigenschaft erwartet ein Array von Ursprüngen, die die PWA erfassen möchte. Der Ursprung Ihrer PWA wird automatisch gewährt und jeder andere Ursprung muss diese Verarbeitung über eine Datei namens web-app-origin-association akzeptieren. Wenn das Manifest Ihrer PWA beispielsweise auf web.dev gehostet wird und Sie den Ursprung „app.web.dev“ hinzufügen möchten, sieht das so aus:

"url_handlers": [
    {"origin": "https://app.web.dev"},
]

In diesem Fall prüft der Browser, ob unter app.web.dev/.well-known/web-app-origin-association eine Datei vorhanden ist, und akzeptiert die URL-Verarbeitung von der PWA-Bereichs-URL. Der Entwickler muss diese Datei erstellen. Im folgenden Beispiel sieht die Datei so aus:

{
    "web_apps": [
        {
            "manifest": "/mypwa/app.webmanifest",
            "details": {
                "paths": [ "/*" ]
            }
        }
    ]
}

URL-Protokollverarbeitung

Die URL-Verarbeitung funktioniert mit standardmäßigen https-Protokoll-URLs. Es ist jedoch möglich, benutzerdefinierte URI-Schemas wie pwa:// zu verwenden. In verschiedenen Betriebssystemen bieten installierte Apps diese Möglichkeit, indem sie ihre Schemas registrieren.

Für PWAs wird diese Funktion über die URL Protocol Handler API aktiviert, die nur auf Desktop-Geräten verfügbar ist. Sie können benutzerdefinierte Protokolle für Mobilgeräte nur zulassen, wenn Sie Ihre PWA in App-Shops bereitstellen.

Für die Registrierung können Sie die Methode registerProtocolHandler() oder das Mitglied protocol_handlers in Ihrem Manifest mit dem gewünschten Schema und der URL verwenden, die Sie im Kontext Ihrer PWA laden möchten, z. B.:

...
{
  "protocol_handlers": [
    {
      "protocol": "web+pwa",
      "url": "/from-protocol?value=%s"
    },
  ]
}
...

Sie können die URL from-protocol an den richtigen Handler weiterleiten und den Abfragestring value in Ihrer PWA abrufen. %s ist ein Platzhalter für die maskierte URL, die den Vorgang ausgelöst hat. Wenn Sie also beispielsweise einen Link wie <a href="web+pwa://testing"> haben, öffnet Ihre PWA /from-protocol?value=testing.

Andere Apps anrufen

Mithilfe von URI-Schemas können Sie eine Verbindung zu jeder anderen installierten App (PWA oder nicht) im Nutzer-Konto herstellen. auf allen Plattformen. Dazu erstellen Sie einfach einen Link oder verwenden navigator.href, verweisen auf das gewünschte URI-Schema und übergeben die Argumente in URL-Escaping.

Sie können gängige Standardschemas verwenden, z. B. tel: für Telefonanrufe, mailto: für E-Mail-Versand oder sms: für SMS. Sie können aber auch mehr über die URL-Schemata, zum Beispiel von bekannten Messaging-, Karten-, Navigations-, Online-Meetings, sozialen Netzwerken oder aus App-Shops.

Web Share

Mit der Web Share API kann Ihre PWA Inhalte über den gemeinsam genutzten Kanal an andere auf dem Gerät installierte Apps senden.

Die API ist nur für Betriebssysteme mit einem share-Mechanismus verfügbar, darunter Android, iOS, iPadOS, Windows und ChromeOS. Sie können ein Objekt freigeben, das Folgendes enthält:

• Text (title- und text-Properties)
• Eine URL (url-Property)
• Dateien (Property files).

Wenn Sie prüfen möchten, ob das aktuelle Gerät Daten freigeben kann, prüfen Sie für einfache Daten wie Text, ob die Methode navigator.share() vorhanden ist, um Dateien zu teilen, die Sie auf das Vorhandensein der navigator.canShare()-Methode prüfen.

Sie fordern die Freigabeaktion an, indem Sie navigator.share(objectToShare) aufrufen. Dieser Aufruf gibt ein Promise zurück, das mit undefined aufgelöst oder mit einer Ausnahme abgelehnt wird.

Web Share-Ziel

Mit der Web Share Target API kann Ihre PWA ein Ziel für einen Freigabevorgang über eine andere App auf diesem Gerät sein, unabhängig davon, ob es sich um eine PWA handelt oder nicht. Ihre PWA empfängt Daten, die von einer anderen App geteilt werden.

Sie ist derzeit auf Android mit WebAPK und ChromeOS verfügbar und funktioniert erst, nachdem der Nutzer Ihre PWA installiert hat. Der Browser registriert das Freigabeziel im Betriebssystem, wenn die App installiert wird.

Sie richten das Webfreigabe-Ziel im Manifest ein und verwenden dabei das Mitglied share_target, das in der Entwurfsspezifikation für Web Share Target definiert ist. share_target ist auf ein Objekt mit einigen Attributen festgelegt:

action

URL, die in einem PWA-Fenster geladen wird, in dem die geteilten Daten erwartet werden.

method

Für die Aktion wird die HTTP-Verb-Methode verwendet, z. B. GET, POST oder PUT.

enctype

Optional: Der Codierungstyp für die Parameter. Standardmäßig ist application/x-www-form-urlencoded festgelegt. Für Methoden wie POST kann er aber auch als multipart/form-data festgelegt werden.

params

Ein Objekt, das gemeinsame Daten (aus den Schlüsseln title, text, url und files aus Web Share) Argumenten zuordnet, die der Browser in der URL (auf method: 'GET') oder im Text der Anfrage mit der ausgewählten Codierung übergibt.

Sie können beispielsweise für Ihre PWA festlegen, dass Sie geteilte Daten (nur Titel und URL) erhalten möchten. Fügen Sie dazu in Ihrem Manifest Folgendes hinzu:

...
"share_target": {
   "action": "/receive-share/",
   "method": "GET",
   "params": {
      "title": "shared_title",
      "url": "shared_url"
   }
}
...

Wenn im vorherigen Beispiel eine App im System eine URL mit einem Titel teilt und der Nutzer Ihre PWA aus dem Dialogfeld auswählt, erstellt der Browser eine neue Navigation zum /receive-share/?shared_title=AAA&shared_url=BBB Ihres Ursprungs, wobei AAA der geteilte Titel und BBB die geteilte URL ist. Sie können JavaScript verwenden, um diese Daten aus dem String window.location zu lesen, indem Sie ihn mit dem URL-Konstruktor parsen.

Der Browser verwendet den Namen und das Symbol der PWA aus Ihrem Manifest, um den Freigabeeintrag des Betriebssystems einzuspeisen. Sie können zu diesem Zweck keinen anderen Satz auswählen.

Ausführlichere Beispiele und Informationen zum Empfangen von Dateien finden Sie unter Freigegebene Daten mit der Web Share Target API empfangen.

Kontakte auswählen

Mit der Contact Picker API können Sie das Gerät auffordern, ein natives Dialogfeld mit allen Kontakten des Nutzers zu rendern, sodass der Nutzer einen oder mehrere auswählen kann. Die PWA kann dann die gewünschten Daten von diesen Kontakten empfangen.

Die Contact Picker API ist hauptsächlich auf Mobilgeräten verfügbar. Alle Funktionen werden auf kompatiblen Plattformen über die navigator.contacts-Oberfläche ausgeführt.

Sie können die verfügbaren Eigenschaften für die Abfrage mit navigator.contacts.getProperties() anfordern und einen oder mehrere Kontakte mit einer Liste der gewünschten Eigenschaften auswählen.

Einige Beispielattribute sind name, email, address und tel. Wenn Sie den Nutzer bitten, einen oder mehrere Kontakte auszuwählen, können Sie navigator.contacts.select(properties) aufrufen und ein Array mit Eigenschaften übergeben, die Sie als Gegenleistung erhalten möchten.

Im folgenden Beispiel werden die Kontakte aufgelistet, die die Auswahl empfangen hat.

async function getContacts() {
   const properties = ['name', 'email', 'tel'];
   const options = { multiple: true };
   try {
     const contacts = await navigator.contacts.select(properties, options);
     console.log(contacts);
   } catch (ex) {
     // Handle any errors here.
   }
}

Ressourcen

• Die File System Access API: Vereinfachung des Zugriffs auf lokale Dateien
• Installierte Webanwendungen als Datei-Handler zulassen
• Dateien in progressiven Web-Apps verarbeiten
• Benutzeroberfläche für die Betriebssystemfreigabe mit der Web Share API einbinden
• Inhalte mit anderen Apps teilen
• Freigegebene Daten mit der Web Share Target API empfangen
• Kontaktauswahl für das Web