Webanwendungen können dieselben vom System bereitgestellten Freigabefunktionen verwenden wie native Anwendungen.
Aktualisiert
Mit der Web Share-API können Webanwendungen dieselben vom System bereitgestellten Freigabefunktionen verwenden wie native Anwendungen. Mit der Webfreigabe-API können Webanwendungen Links, Text und Dateien mit anderen auf dem Gerät installierten Anwendungen auf dieselbe Weise wie native Anwendungen freigeben.
Teilen ist nur die halbe Magie. Webanwendungen können auch gemeinsam genutzte Ziele sein. Dies bedeutet, dass sie Daten, Links, Text und Dateien von nativen oder Webanwendungen empfangen können. Weitere Informationen zum Registrieren Ihrer Anwendung als Freigabeziel finden Sie im Beitrag "Freigegebene Daten empfangen".
Konzepte und Nutzung
Funktionen und Einschränkungen
Die Webfreigabe weist die folgenden Funktionen und Einschränkungen auf:
- Es kann nur auf einer Site verwendet werden, die HTTPS unterstützt.
- Es muss als Reaktion auf eine Benutzeraktion wie einen Klick aufgerufen werden. Beschwörung durch die
onload
Der Handler ist unmöglich. - Sie können URLs, Text oder Dateien freigeben.
- Ab Mitte 2020 ist es nur auf Safari und Android bei Chromium Forks verfügbar. Uhr
MDN
für Details.
Teile Links und Text
Verwenden Sie die, um Links und Text freizugeben Compartir ()
Methode, bei der es sich um eine vielversprechende Methode mit einem erforderlichen Eigenschaftenobjekt handelt. Um zu verhindern, dass der Browser a auslöst TypeError
muss das Objekt mindestens eine der folgenden Eigenschaften enthalten: Titel
, Text
, URL
oder Dateien
. Sie können beispielsweise Text ohne URL freigeben oder umgekehrt. Ermöglichen Sie allen drei Mitgliedern, die Flexibilität von Anwendungsfällen zu erweitern. Stellen Sie sich vor, der Benutzer hat nach dem Ausführen des folgenden Codes eine E-Mail-Anwendung als Ziel ausgewählt. das Titel
Der Parameter kann zum Betreff der E-Mail werden Text
, den Nachrichtentext und die Dateien, die Anhänge.
if ( navigator . share ) {
Navigator . teilen ( {
Titel : 'web.dev' ,
Text : 'Check out web.dev.' ,
URL : 'https://web.dev/' ,
} )
. then ( ( ) => console . log ( 'Erfolgreiche Freigabe' ) )
. catch ( ( error ) => console . log ( 'Fehlerfreigabe' , Fehler ) ) ;
}}
Wenn Ihre Site mehrere URLs für denselben Inhalt enthält, geben Sie die kanonische URL der Seite anstelle der aktuellen URL frei. Anstatt zu teilen
document.location.href
sollten Sie nach einer kanonischen URL suchen Etikett auf Seite
und teile das. Dies bietet eine bessere Benutzererfahrung. Dies verhindert nicht nur Weiterleitungen, sondern stellt auch sicher, dass eine freigegebene URL die richtige Benutzererfahrung für einen bestimmten Kunden bietet. Wenn ein Freund beispielsweise eine mobile URL freigibt und Sie sie auf einem Desktop anzeigen, sollte eine Desktop-Version angezeigt werden:
let url = document . Lage . href ;
const canonicalElement = document . querySelector ( 'link [rel = canonical]' ) ;
if ( canonicalElement ! == null ) {
url = canonicalElement . href ;
}}
Navigator . teilen ( { url : url } ) ;
Dateien freigeben
Versuchen Sie zunächst, Dateien freizugeben navigator.canShare ()
. Fügen Sie dann ein Array von Dateien in den Aufruf von ein navigator.share ()
:
if ( navigator . canShare && navigator . canShare ( { files : filesArray } ) ) {
Navigator . teilen ( {
Dateien : filesArray ,
Titel : 'Urlaubsbilder' ,
Text : 'Fotos vom 27. September bis 14. Oktober.' ,
} )
. then ( ( ) => console . log ( 'Freigabe war erfolgreich.' ) )
. catch ( ( error ) => console . log ( 'Freigabe fehlgeschlagen' , Fehler ) ) ;
} else {
Konsole . log ( `Ihr System unterstützt keine Freigabe von Dateien '.);
}}
Beachten Sie, dass das Beispiel die Funktionserkennung durch Testen übernimmt
naviagator.canShare ()
statt für navigator.share ()
. Das an übergebene Datenobjekt kann Teilen ()
unterstützt nur die Dateien
Eigentum. Bild-, Video-, Audio- und Textdateien können gemeinsam genutzt werden. (Uhr
Dateierweiterungen in Chromium zulässig.) Weitere Dateitypen können in Zukunft hinzugefügt werden.
Santa Tracker Fallstudie
Santa Tracker, ein Open-Source-Projekt, hat bei Google Weihnachtstradition. Jeden Dezember können Sie die Saison mit Spielen und pädagogischen Erfahrungen feiern.
Im Jahr 2016 verwendete das Santa Tracker-Team die Web Share-API für Android. Diese API war perfekt für mobile Geräte. In den vergangenen Jahren hat das Team das Teilen von Schaltflächen auf Mobilgeräten deaktiviert, da der Platz knapp ist und es nicht gerechtfertigt ist, mehrere Freigabeziele zu haben.
Mit der Web Share API konnten sie jedoch nur eine Schaltfläche präsentieren und so wertvolle Pixel sparen. Sie fanden auch heraus, dass Benutzer, die mit Web Share über 20% geteilt wurden, mehr als Benutzer ohne aktivierte API. Gehe zu
Santa Tracker um Web Share in Aktion zu sehen.
Nützliche Links