Freigeben von Inhalten für andere Apps

Artikel
04/04/2023

Die Freigabe von Inhalten zwischen Apps wurde von mobilen Geräten populär gemacht, bei denen das Bearbeiten von Dateien oder Kopieren von Inhalten weniger intuitiv ist als auf Desktop-Betriebssystemen. Beispielsweise ist es auf Mobilgeräten üblich, ein Bild mit einem Freund zu teilen, indem eine SMS gesendet wird. Die Freigabe von Inhalten ist jedoch nicht für mobile Geräte reserviert. Es ist auch möglich, zwischen Apps unter Windows zu teilen.

Es gibt zwei Richtungen für die Freigabe von Inhalten, und beide Richtungen können von Progressive Web-Apps (PWAs) behandelt werden:

Richtung	Beschreibung
Freigeben von Inhalten	Zum Freigeben von Inhalten generiert eine PWA Inhalte (z. B. Text, Links oder Dateien) und übergibt den freigegebenen Inhalt an das Betriebssystem. Das Betriebssystem ermöglicht es dem Benutzer, zu entscheiden, welche App er verwenden möchte, um diesen Inhalt zu empfangen.
Empfangen freigegebener Inhalte	Zum Empfangen von Inhalten fungiert eine PWA als Inhaltsziel. Die PWA wird beim Betriebssystem als Ziel für die Inhaltsfreigabe registriert.

PWAs, die sich als Freigabeziele registrieren, fühlen sich nativ in das Betriebssystem integriert und sind für Benutzer ansprechender.

PWAs können die Webfreigabe-API verwenden, um die Anzeige des Dialogfelds für die Betriebssystemfreigabe auszulösen.

Hinweis

Die Webfreigabe funktioniert nur auf Websites, die über HTTPS bereitgestellt werden (was bei PWAs der Fall ist), und kann nur als Reaktion auf eine Benutzeraktion aufgerufen werden.

Um Inhalte wie Links, Text oder Dateien zu teilen, verwenden Sie die navigator.share -Funktion, wie unten gezeigt. Die navigator.share -Funktion akzeptiert ein -Objekt, das mindestens eine der folgenden Eigenschaften aufweisen sollte:

title: ein kurzer Titel für den freigegebenen Inhalt.
text: eine längere Beschreibung für den freigegebenen Inhalt.
url: Die Adresse einer ressource, die freigegeben werden soll.
files: Ein Array von Dateien, die freigegeben werden sollen.

function shareSomeContent(title, text, url) {
  if (!navigator.share) {
    return;
  }

  navigator.share({title, text, url}).then(() => {
    console.log('The content was shared successfully');
  }).catch(error => {
    console.error('Error sharing the content', error);
  });
}

Im obigen Code überprüfen wir zunächst, ob der Browser die Webfreigabe unterstützt, indem wir testen, ob navigator.share definiert ist. Die navigator.share Funktion gibt ein Promise-Objekt zurück, das aufgelöst wird, wenn die Freigabe erfolgreich ist, und lehnt ab, wenn ein Fehler aufgetreten ist.

Da hier eine Zusage verwendet wird, kann der obige Code wie folgt als async Funktion umgeschrieben werden:

async function shareSomeContent(title, text, url) {
  if (!navigator.share) {
    return;
  }

  try {
    await navigator.share({title, text, url});
    console.log('The content was shared successfully');
  } catch (e) {
    console.error('Error sharing the content', e);
  }
}

Unter Windows löst der obige Code das Freigabedialogfeld aus, sodass der Benutzer eine App auswählen kann, um den freigegebenen Inhalt zu empfangen. Das Freigabedialogfeld wird unten gezeigt:

Sobald der Benutzer eine App ausgewählt hat, um den freigegebenen Inhalt zu empfangen, ist es an dieser App, sie in beliebiger Weise zu behandeln. Beispielsweise kann eine E-Mail-App als title E-Mail-Betreff und als text E-Mail-Textkörper verwenden.

Die navigator.share Funktion akzeptiert auch ein files Array zum Freigeben von Dateien für andere Apps.

Es ist wichtig zu testen, ob die Freigabe von Dateien vom Browser unterstützt wird, bevor Sie sie freigeben. Verwenden Sie die -Funktion, um zu überprüfen, ob die navigator.canShare Freigabe von Dateien unterstützt wird:

function shareSomeFiles(files) {
  if (navigator.canShare && navigator.canShare({files})) {
    console.log('Sharing files is supported');
  } else {
    console.error('Sharing files is not supported');
  }
}

Der files Freigabeobjektmember muss ein Array von File -Objekten sein. Erfahren Sie mehr über die Dateischnittstelle.

Eine Möglichkeit zum Erstellen von File Objekten ist:

Verwenden Sie zunächst die fetch API, um eine Ressource anzufordern.
Verwenden Sie dann die zurückgegebene Antwort, um eine neue Filezu erstellen.

Dieser Ansatz wird unten gezeigt.

async function getImageFileFromURL(imageURL, title) {
  const response = await fetch(imageURL);
  const blob = await response.blob();
  return new File([blob], title, {type: blob.type});
}

Im obigen Code gilt Folgendes:

Die getImageFileFromURL Funktion ruft ein Bild mithilfe einer URL ab.
Die response.blob() Funktion konvertiert das Bild in ein BLOB (Binary Large Object).
Der Code erstellt ein File -Objekt mithilfe des BLOB.

PWAmp ist eine Demo-PWA, die die navigator.share -Funktion verwendet, um Text und Links zu teilen.

So testen Sie das Freigabefeature:

Wechseln Sie zu PWAmp.
Klicken Sie auf der rechten Seite der Adressleiste auf die verfügbare App. Installieren (-Schaltfläche, um PWAmp als PWA zu installieren.
Importieren Sie in der installierten PWAmp-PWA eine lokale Audiodatei (indem Sie sie in das App-Fenster ziehen). Wenn Sie z. B. das Repository MicrosoftEdge/Demos geklont haben, verfügen Sie über eine lokale Kopie von .mp3 Dateien im (Demos-Repository > pwamp/songs-Verzeichnis), z C:\Users\username\GitHub\Demos\pwamp\songs. B. .
Klicken Sie neben dem neu importierten Song auf die Schaltfläche Songaktionen (...), und wählen Sie dann Freigeben aus. Das Dialogfeld Windows-Freigabe wird angezeigt:
Wählen Sie eine App aus, in der der Inhalt freigegeben werden soll.

Den PWAmp-Quellcode finden Sie auf GitHub. Die PWAmp-App verwendet die Web share-API in der app.js Quelldatei.

Empfangen freigegebener Inhalte

Mithilfe der Web share-Ziel-API kann eine PWA registriert werden, um als App im Dialogfeld "Systemfreigabe" angezeigt zu werden. Die PWA kann dann die Webfreigabeziel-API verwenden, um freigegebene Inhalte zu verarbeiten, die von anderen Apps stammen.

Hinweis

Nur installierte PWAs können sich als Freigabeziele registrieren.

Registrieren als Ziel

Um freigegebene Inhalte zu erhalten, müssen Sie zunächst Ihre PWA als Freigabeziel registrieren. Verwenden Sie zum Registrieren den share_target Manifestmember. Nach der Installation Ihrer App verwendet das Betriebssystem das share_target Mitglied, um Ihre App in das Dialogfeld "Systemfreigabe" einzuschließen. Das Betriebssystem weiß, was zu tun ist, wenn Ihre App vom Benutzer ausgewählt wird, um den Inhalt zu teilen.

Das share_target Mitglied muss die erforderlichen Informationen enthalten, damit das System die freigegebenen Inhalte an Ihre App übergeben kann. Betrachten Sie den folgenden Manifestcode:

{
    "share_target": {
        "action": "/handle-shared-content/",
        "method": "GET",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url",
        }
    }
}

Wenn Ihre App vom Benutzer als Ziel für freigegebene Inhalte ausgewählt wird, wird die PWA gestartet. Eine GET HTTP-Anforderung wird an die von der action -Eigenschaft angegebene URL gestellt. Die freigegebenen Daten werden als titleAbfrageparameter , textund url übergeben. Die folgende Anforderung wird gestellt: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Wenn Sie über vorhandenen Code verfügen, der andere Abfrageparameternamen verwendet, können Sie die Standardabfrageparameter title, textund url Ihren anderen Namen zuordnen. Im folgenden Beispiel werden die titleAbfrageparameter , textund url , subjectbodyund addresszugeordnet:

{
    "share_target": {
        "action": "/handle-shared-content/",
        "method": "GET",
        "params": {
            "title": "subject",
            "text": "body",
            "url": "address",
        }
    }
}

Verarbeiten freigegebener GET-Daten

Um die Daten zu verarbeiten, die über die GET-Anforderung in Ihrem PWA-Code freigegeben werden, verwenden Sie den URL Konstruktor, um die Abfrageparameter zu extrahieren:

window.addEventListener('DOMContentLoaded', () => {
    console url = new URL(window.location);

    const sharedTitle = url.searchParams.get('title');
    const sharedText = url.searchParams.get('text');
    const sharedUrl = url.searchParams.get('url');
});

Verarbeiten freigegebener POST-Daten

Wenn die freigegebenen Daten Ihre App in irgendeiner Weise ändern sollen, z. B. durch Aktualisieren einiger der in der App gespeicherten Inhalte, müssen Sie die POST -Methode verwenden und einen Codierungstyp mit enctypedefinieren:

{
    "share_target": {
        "action": "/post-shared-content",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url",
        }
    }
}

Die POST HTTP-Anforderung enthält die freigegebenen Daten, die als multipart/form-datacodiert sind. Sie können auf diese Daten auf Ihrem HTTP-Server zugreifen, indem Sie serverseitigen Code verwenden. Dies funktioniert jedoch nicht, wenn der Benutzer offline ist. Um eine bessere Erfahrung zu bieten, können Sie wie folgt auf die Daten im Service Worker zugreifen, indem Sie einen fetch Ereignislistener verwenden:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method === 'POST' && url.pathname === '/post-shared-content') {
        event.respondWith((async () => {
            const data = await event.request.formData();

            const title = data.get('title');
            const text = data.get('text');
            const url = data.get('url');

            // Do something with the shared data here.

            return Response.redirect('/content-shared-success', 303);
        })());
    }
});

Im obigen Code gilt Folgendes:

Der Service Worker fängt die POST Anforderung ab.
Verwendet die Daten in irgendeiner Weise (z. B. zum lokalen Speichern des Inhalts).
Leitet den Benutzer zu einer Erfolgsseite um. Auf diese Weise kann die App auch dann funktionieren, wenn das Netzwerk ausgefallen ist. Die App kann den Inhalt nur lokal speichern oder den Inhalt später an den Server senden, wenn die Konnektivität wiederhergestellt wird (z. B. mithilfe der Hintergrundsynchronisierung).

Verarbeiten freigegebener Dateien

Apps können auch freigegebene Dateien verarbeiten. Um Dateien in Ihrer PWA zu verarbeiten, müssen Sie die POST -Methode und den Codierungstyp multipart/form-data verwenden. Darüber hinaus müssen Sie die Dateitypen deklarieren, die Ihre App verarbeiten kann.

{
    "share_target": {
        "action": "/store-code-snippet",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "files": [
                {
                    "name": "textFile",
                    "accept": ["text/plain", "text/html", "text/css", 
                               "text/javascript"]
                }
            ]
        }
    }
}

Der obige Manifestcode teilt dem System mit, dass Ihre App Textdateien mit verschiedenen MIME-Typen akzeptieren kann. Dateinamenerweiterungen wie .txtkönnen auch im accept Array übergeben werden.

Um auf die freigegebene Datei zuzugreifen, verwenden Sie die Anforderung formData wie zuvor, und verwenden Sie ein FileReader , um den Inhalt wie folgt zu lesen:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method === 'POST' && url.pathname === '/store-code-snippet') {
        event.respondWith((async () => {
            const data = await event.request.formData();

            const filename = data.get('title');
            const file = data.get('textFile');

            const reader = new FileReader();
            reader.onload = function(e) {
                const textContent = e.target.result;

                // Do something with the textContent here.

            };
            reader.readAsText(file);

            return Response.redirect('/snippet-stored-success', 303);
        })());
    }
});

Empfangen freigegebener Inhalte

Registrieren als Ziel

Verarbeiten freigegebener GET-Daten

Verarbeiten freigegebener POST-Daten

Verarbeiten freigegebener Dateien

Siehe auch

Zusätzliche Ressourcen