Betriebssystemintegration

Web-Apps haben eine große Reichweite. Sie werden auf mehreren Plattformen ausgeführt. Sie können einfach über Links geteilt werden. Traditionell fehlten jedoch die Integration mit dem Betriebssystem. Vor nicht allzu langer Zeit waren sie noch nicht einmal 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 Nutzer-Workflow mit Dateien sieht so aus:

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

Vor der File System Access API war das für Webanwendungen nicht möglich. Das Öffnen von Dateien erforderte einen Datei-Upload, das Speichern von Änderungen erforderte das Herunterladen der Dateien und das Web hatte überhaupt keinen Zugriff, um neue Dateien und Ordner im Dateisystem des Nutzers zu erstellen.

Datei öffnen

Zum Öffnen einer Datei verwenden wir die Methode window.showOpenFilePicker(). Beachte, dass diese Methode eine Nutzergeste erfordert, z. B. das Klicken auf eine Schaltfläche. Im Folgenden wird der Rest des Setups zum Öffnen einer Datei aufgeführt:

1. Erfassen Sie das Datei-Handle aus der Dateiauswahl-API des Dateisystemzugriffs. Dadurch erhalten Sie grundlegende Informationen über die Datei.
2. Wenn du die getFile()-Methode des Handles verwendest, erhältst du eine spezielle Art von Blob namens File, das 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 für ihn Blob-Methoden aufgerufen werden, z. B. text(), um seinen 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

Um Änderungen an einer Datei zu speichern, ist außerdem eine Nutzergeste erforderlich. Gehen Sie dann so vor:

1. Verwenden Sie das Datei-Handle, um ein FileSystemWritableFileStream zu erstellen.
2. Nehmen Sie die gewünschten Änderungen am Stream vor. Dadurch wird die vorhandene Datei nicht aktualisiert. Stattdessen wird normalerweise eine temporäre Datei erstellt.
3. Wenn Sie mit den Änderungen fertig sind, schließen Sie den Stream. Dadurch werden die Änderungen von vorübergehend zu dauerhaft.

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();

Dateihandhabung

Mit der File System Access API können Sie Dateien innerhalb Ihrer App öffnen – aber was ist mit dem umgekehrten Weg? Nutzer möchten ihre Lieblings-App als Standard-App zum Öffnen von Dateien festlegen. Die File Processing API ist eine experimentelle API, mit der PWAs installiert werden können. Registrieren Sie sich als Datei-Handler auf dem Gerät eines Nutzers und geben Sie in Ihrem Web-App-Manifest den MIME-Typ und die Dateiendung an, die Ihre PWA unterstützt. Sie können benutzerdefinierte Dateisymbole für Ihre unterstützten Erweiterungen angeben.

Nach der Registrierung wird Ihre installierte PWA im Dateisystem des Nutzers als Option angezeigt, über die er die Datei direkt öffnen kann. Hier sehen Sie ein Beispiel für die Einrichtung des Manifests für eine PWA zum Lesen von Textdateien:

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

URL-Handhabung

Mit der URL-Verarbeitung kann Ihre PWA Links erfassen, die Teil des Geltungsbereichs des Betriebssystems sind, und sie in einem PWA-Fenster und nicht 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 in Chrome installieren. Es ist nicht möglich, URLs von PWAs, die unter iOS und iPadOS installiert sind, über Safari zu erfassen.

Die Webbrowser-Community hat eine neue Spezifikation für Desktop-Browser erstellt. Diese Spezifikation ist derzeit experimentell. Sie fügt ein neues Manifestdatei-Mitglied hinzu: url_handlers. Diese Property erwartet ein Array von Ursprüngen, die die PWA erfassen möchte. Der Ursprung Ihrer PWA wird automatisch zugewiesen. Jeder andere Ursprung muss die Verarbeitung über eine Datei namens „web-app-origin-association“ akzeptieren. Wenn das Manifest Ihrer PWA 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 die URL-Verarbeitung aus der URL des PWA-Bereichs akzeptiert. Der Entwickler muss diese Datei erstellen. Im folgenden Beispiel sieht die Datei so aus:

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

URL-Protokollbehandlung

Die URL-Verarbeitung funktioniert mit standardmäßigen https-Protokoll-URLs, es ist jedoch möglich, benutzerdefinierte URI-Schemas wie pwa:// zu verwenden. Bei einigen Betriebssystemen erhalten installierte Apps diese Fähigkeit, indem Apps ihr Schema 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 nur für Mobilgeräte zulassen, wenn Sie Ihre PWA in App-Shops anbieten.

Für die Registrierung können Sie die registerProtocolHandler()-Methode oder das protocol_handlers-Mitglied 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 z. B. einen Link wie <a href="web+pwa://testing"> haben, öffnet Ihre PWA /from-protocol?value=testing.

Andere Apps anrufen

Mithilfe von URI-Schemata können Sie eine Verbindung zu jeder anderen installierten App auf den Geräten der Nutzer auf jeder Plattform herstellen – ob PWA oder nicht. Sie müssen lediglich einen Link erstellen oder navigator.href auf das gewünschte URI-Schema verweisen und die Argumente in URL-Escaping übergeben.

Sie können bekannte Standardschemata verwenden, z. B. tel: für Anrufe, mailto: für E-Mails oder sms: für SMS. Sie können sich aber auch über URL-Schemas anderer Apps informieren, etwa für Messaging, Google Maps, Navigation, Onlinebesprechungen, soziale Netzwerke und App-Shops.

Webfreigabe

Mit der Web Share API kann Ihre PWA Inhalte über den freigegebenen 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 (Attribut „files“).

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

Sie fordern die Aktion zum Teilen 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 Ziel eines Freigabevorgangs von einer anderen App auf diesem Gerät sein, unabhängig davon, ob es sich um eine PWA handelt oder nicht. Ihre PWA empfängt die von einer anderen App freigegebenen Daten.

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

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

action

URL, die in einem PWA-Fenster geladen wird, die die freigegebenen Daten empfangen soll.

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 ist standardmäßig application/x-www-form-urlencoded. Für Methoden wie POST kann er aber auch als multipart/form-data festgelegt werden.

params

Ein Objekt, das freigegebene 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.

So können Sie beispielsweise für Ihre PWA festlegen, dass gemeinsame Daten (nur Titel und URL) empfangen werden sollen. 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 Titel teilt und der Nutzer Ihre PWA im Dialogfeld auswählt, erstellt der Browser eine neue Navigation zum /receive-share/?shared_title=AAA&shared_url=BBB Ihres Ursprungs, wobei „AAA“ der gemeinsame Titel und „BBB“ die freigegebene URL ist. Sie können JavaScript verwenden, um diese Daten aus dem window.location-String zu lesen. Dazu parsen Sie diese mit dem URL-Konstruktor.

Der Browser verwendet den PWA-Namen und das PWA-Symbol aus dem Manifest, um den Freigabeeintrag des Betriebssystems zu erfassen. Sie können für diesen Zweck keinen anderen Satz auswählen.

Ausführlichere Beispiele und das Empfangen von Dateien finden Sie unter Empfang geteilter Daten mit der Web Share Target API.

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, damit der Nutzer einen oder mehrere Kontakte auswählen kann. Ihre PWA kann dann die gewünschten Daten von diesen Kontakten empfangen.

Die Contact Picker API ist hauptsächlich auf Mobilgeräten verfügbar. Auf kompatiblen Plattformen erfolgt alles über die navigator.contacts-Oberfläche.

Sie können die verfügbaren Eigenschaften für die Abfrage mit navigator.contacts.getProperties() und die Auswahl eines oder mehrerer Kontakte mit einer Liste der gewünschten Eigenschaften anfordern.

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 von Eigenschaften übergeben, die Sie zurückgeben möchten.

Im folgenden Beispiel werden die Kontakte aufgelistet, die von der Auswahl empfangen wurden.

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

• File System Access API: vereinfachter Zugriff auf lokale Dateien
• Installierte Webanwendungen als Datei-Handler zulassen
• Dateien in progressiven Web-Apps verarbeiten
• In die Web Share API einbinden
• Inhalte mit anderen Apps teilen
• Freigegebene Daten mit der Web Share Target API empfangen
• Kontaktauswahl für das Web