Betriebssystemintegration

Web-Apps haben eine große Reichweite. Sie können auf mehreren Plattformen ausgeführt werden. Sie lassen sich ganz einfach über Links teilen. Traditionell fehlte es jedoch an einer Einbindung in das Betriebssystem. Vor Kurzem konnten sie noch gar nicht installiert werden. Glücklicherweise hat sich das geändert und wir können diese Integration jetzt nutzen, um unseren PWAs nützliche Funktionen hinzuzufügen. Sehen wir uns einige dieser Optionen an.

Mit dem Dateisystem arbeiten

Ein typischer Nutzerablauf 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 Änderungen an diesen Dateien oder Ordnern vor und speichern Sie sie direkt.
• Neue Dateien und Ordner erstellen

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

Datei öffnen

Zum Öffnen einer Datei verwenden wir die Methode window.showOpenFilePicker(). Für diese Methode ist eine Nutzergeste erforderlich, z. B. ein Klick auf eine Schaltfläche. So gehts weiter:

1. Erfassen Sie den Dateihandle aus der Dateiauswahl-API des Dateisystemzugriffs. Sie erhalten dann grundlegende Informationen zur Datei.
2. Wenn Sie die getFile()-Methode des Handles verwenden, erhalten Sie eine spezielle Art von Blob, die File genannt wird und zusätzliche schreibgeschützte Eigenschaften (z. B. Name und Datum der letzten Änderung) der Datei enthält. Da es sich um ein Blob handelt, können Blob-Methoden wie text() aufgerufen werden, um den 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 dazu so vor:

1. Erstelle mit dem Dateihandle eine FileSystemWritableFileStream.
2. Nehmen Sie die gewünschten Änderungen am Stream vor. Die Datei wird dadurch nicht an Ort und Stelle aktualisiert. Stattdessen wird in der Regel eine temporäre Datei erstellt.
3. Wenn Sie mit den Änderungen fertig sind, schließen Sie den Stream. Dadurch werden die Änderungen von temporär in dauerhaft geändert.

Im Code sieht das so aus:

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

Achtung : Safari implementiert die File System Access API nicht für das öffentliche System, sondern als origin-private Sandbox. Sie können mit dieser API nur Dateien in diesem virtuellen Dateisystem lesen und schreiben.

Dateiverwaltung

Mit der File System Access API können Sie Dateien in Ihrer App öffnen. Aber wie sieht es umgekehrt aus? Nutzer möchten ihre bevorzugte App als Standard-App zum Öffnen von Dateien festlegen. Die File Handling API ist eine experimentelle API, mit der installierte PWAs Folgendes tun können: Sie können sich als Datei-Handler auf dem Gerät eines Nutzers registrieren und dabei den MIME-Typ und die Dateiendung angeben, die Ihre PWA im Manifest Ihrer Webanwendung unterstützt. Sie können benutzerdefinierte Dateisymbole für Ihre unterstützten Erweiterungen angeben.

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

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

URL-Verarbeitung

Mit der URL-Verarbeitung kann Ihre PWA Links, die zu ihrem Umfang gehören, vom Betriebssystem abrufen und 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, werden die Inhalte in einem eigenständigen Fenster geöffnet.

Dieses Verhalten ist auf Android-Geräten automatisch verfügbar, wenn WebAPK verwendet wird, z. B. wenn Nutzer eine PWA mit Chrome installieren. Es ist nicht möglich, URLs von PWAs zu erfassen, die auf iOS- und iPadOS-Geräten über Safari installiert wurden.

Für Desktop-Browser hat die Webbrowser-Community eine neue Spezifikation erstellt. Diese Spezifikation ist derzeit experimentell und fügt ein neues Manifestdateimitglied hinzu: url_handlers. Für diese Property ist ein Array mit Ursprüngen erforderlich, die die PWA erfassen soll. Der Ursprung Ihrer PWA wird automatisch gewährt. Alle anderen Ursprünge müssen 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 aus der URL des PWA-Bereichs. Diese Datei muss vom Entwickler erstellt werden. Im folgenden Beispiel sieht die Datei so aus:

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

Unter Android mit WebAPKs werden PWAs automatisch als Handler für den Geltungsbereich des Manifests mit einem Android-Intent-Filter registriert. Es ist nicht möglich, weitere Ursprünge oder Bereiche hinzuzufügen. Unter iOS und iPadOS können Sie nur URLs mit im App Store veröffentlichten PWAs verarbeiten, z. B. solche, die mit dem PWABuilder erstellt wurden.

Umgang mit URL-Protokollen

Die URL-Verarbeitung funktioniert mit standardmäßigen https-Protokoll-URLs. Es ist aber auch möglich, benutzerdefinierte URI-Schemas wie pwa:// zu verwenden. Bei mehreren Betriebssystemen erhalten installierte Apps diese Möglichkeit, indem sie ihre Schemata registrieren.

Bei PWAs wird diese Funktion mithilfe der 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.

Achtung : Bei PWAs, die die URL Protocol Handler API verwenden, muss der Protokollname zu den auf der Zulassungsliste stehenden Schemas gehören oder ein web+-Präfix haben. In unserem Beispiel sollte ein Link auf web+pwa:// verweisen, um unsere PWA zu öffnen.

Sie können die registerProtocolHandler()-Methode oder das Mitglied protocol_handlers in Ihrem Manifest mit dem gewünschten Schema und der URL verwenden, die im Kontext Ihrer PWA geladen werden soll, 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 entkommentierte URL, die den Vorgang ausgelöst hat. Wenn Sie also irgendwo einen Link wie <a href="web+pwa://testing"> haben, öffnet Ihre PWA /from-protocol?value=testing.

Andere Apps anrufen

Mit URI-Schemata können Sie auf allen Plattformen eine Verbindung zu jeder anderen installierten App (PWA oder nicht) auf den Geräten der Nutzer herstellen. Sie müssen lediglich einen Link erstellen oder navigator.href verwenden und auf das gewünschte URI-Schema verweisen. Dabei werden die Argumente in URL-entkommentierter Form übergeben.

Sie können bekannte Standardschemata wie tel: für Telefonanrufe, mailto: für das Senden von E-Mails oder sms: für SMS verwenden. Sie können sich auch über die URL-Schemata anderer Apps informieren, z. B. von bekannten Messaging-, Karten-, Navigations-, Online-Meeting-, Social-Media- und App-Shop-Apps.

Hinweis : Anstatt private URI-Schemata für die Kommunikation mit Messaging- und Social-Media-Apps zu verwenden, können Sie die generische Web Share API verwenden.

Web Share

Browser Support

• 89
• 93
• 
• 12.1

Source

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

Die API ist nur auf Betriebssystemen mit einem share-Mechanismus verfügbar, einschließlich Android, iOS, iPadOS, Windows und ChromeOS. Sie können ein Objekt mit folgenden Inhalten teilen:

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

Wenn Sie prüfen möchten, ob das aktuelle Gerät die Freigabe unterstützt, prüfen Sie bei einfachen Daten wie Text, ob die navigator.share()-Methode vorhanden ist. Wenn Sie Dateien freigeben möchten, prüfen Sie, ob die navigator.canShare()-Methode vorhanden ist.

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

Web Share Target

Mit der Web Share Target API kann Ihre PWA das 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 auf Android mit WebAPK und ChromeOS verfügbar und funktioniert nur, nachdem der Nutzer Ihre PWA installiert hat. Der Browser registriert das Freigabeziel im Betriebssystem, wenn die App installiert wird.

Sie richten im Manifest ein Web Share-Ziel mit dem Mitglied share_target ein, das in der Web Share Target-Entwurfsspezifikation definiert ist. share_target ist auf ein Objekt mit einigen Eigenschaften festgelegt:

action

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

method

Für die Aktion wird die

-HTTP-Verbmethode verwendet, z. B. GET, POST oder PUT.

enctype

(Optional) Codierungstyp für die Parameter. Standardmäßig ist application/x-www-form-urlencoded festgelegt, kann aber auch für Methoden wie POST auf multipart/form-data gesetzt werden.

params

Ein Objekt, das Freigabedaten (aus den Schlüsseln title, text, url und files von Web Share) auf Argumente abbildet, die der Browser mit der ausgewählten Codierung in der URL (auf method: 'GET') oder im Anfragetext übergibt.

Hinweis : Sie können eine POST-Anfrage serverseitig oder in Ihrem Service Worker parsen, um eine Netzwerkverbindung zu vermeiden. Weitere Informationen finden Sie in diesem Beispiel.

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

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

Wenn in unserem Beispiel eine App im System eine URL mit einem Titel freigibt und der Nutzer Ihre PWA im Dialogfeld auswählt, erstellt der Browser eine neue Navigation zur /receive-share/?shared_title=AAA&shared_url=BBB des Ursprungs, wobei AAA der freigegebene Titel und BBB die freigegebene URL ist. Sie können diese Daten mit JavaScript aus dem window.location-String 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 zu erstellen. Sie können dafür kein anderes Set auswählen.

Hinweis : Achten Sie darauf, dass die Seite, auf der die freigegebenen Daten verarbeitet werden, auch offline zugänglich ist. Sie möchten nicht, dass Nutzer Ihre App auswählen und einen Fehler erhalten, weil sie gerade keine Verbindung haben.

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

Kontakte auswählen

Browser Support

• x
• x
• x
• x

Source

Mit der Contact Picker API können Sie das Gerät auffordern, einen nativen Dialog mit allen Kontakten des Nutzers zu rendern, damit er einen oder mehrere 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 die gesamte Interaktion über die Benutzeroberfläche navigator.contacts.

Mit navigator.contacts.getProperties() können Sie die verfügbaren Properties anfordern, die abgefragt werden sollen, und eine einzelne oder mehrere Kontaktauswahlen mit einer Liste der gewünschten Properties anfordern.

Beispiele für Properties 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 Properties übergeben, die Sie als Antwort erhalten möchten.

Achtung : Die API kann nicht garantieren, dass die zurückgegebenen Objekte alle angeforderten Properties enthalten. Sie sollten daher noch einmal prüfen, ob sie vorhanden sind.

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: Zugriff auf lokale Dateien vereinfachen
• Installierte Webanwendungen als Dateihandler verwenden
• Dateien in progressiven Web-Apps verarbeiten
• Einbindung in die Freigabe-UI des Betriebssystems mit der Web Share API
• Inhalte für andere Apps freigeben
• Freigegebene Daten mit der Web Share Target API empfangen
• Eine Kontaktauswahl für das Web