Teilen Sie wie eine native App mit der Web Share API

Webanwendungen können dieselben vom System bereitgestellten Freigabefunktionen verwenden wie native Anwendungen.

8. November 2019
Aktualisiert 12. Mai 2020

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.

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 TypeErrormuss 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.hrefsollten 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

Web-Sharing-Demos