Teilen Sie wie eine native App mit der Web Share API

Mit dem API Web Share, las aplicaciones web pueden utilizar las mismas capacidades de uso compartido proporcionadas por el sistema que las aplicaciones nativas. La API Web Share hace posible que las aplicaciones web compartan enlaces, texto y archivos con otras aplicaciones instaladas en el dispositivo de la misma manera que las aplicaciones nativas.

Konzepte und Nutzung

Funktionen und Einschränkungen

Die Webfreigabe weist die folgenden Funktionen und Einschränkungen auf:

• Solo se puede usar en un sitio que admita HTTPS.
• Debe invocarse en respuesta a una acción del Nutzername, como un clic. Invocándolo a través del onload Der Handler ist unmöglich.
• Puede compartir Url, texto o archivos.
• 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 () método, que es un método basado en promesas con un objeto de propiedades requerido. Para evitar que el Browser arroje un 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.

wenn (Navigator.Compartir) {
Navigator.Compartir({
Titel: 'web.dev',
Text: 'Check out web.dev.',
URL: 'https://web.dev/',
})
.then(() => console.Log('Successful share'))
.catch((Error) => console.Log('Error sharing', Error));
}

Si su sitio tiene varias URL para el mismo Inhalt, comparta la URL canónica de la página en lugar de la URL actual. En lugar de compartir
document.location.hrefsollten Sie nach einer kanonischen URL suchen Etikett auf Seite y comparte eso. Esto proporcionará una mejor experiencia al usuario. No solo evita las redirecciones, sino que también garantiza que una URL compartida proporcione la Benutzererfahrung correcta para un Klient en particular. Por ejemplo, si un amigo comparte una URL móvil y la miras en una computadora de escritorio, deberías ver una versión de escritorio:

Lassen URL = Dokument.location.href;
const canonicalElement = Dokument.querySelector('link[rel=canonical]');
wenn (canonicalElement !== Null) {
URL = canonicalElement.href;
}
Navigator.Compartir({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 ():

wenn (Navigator.canShare && Navigator.canShare({ Dateien: filesArray })) {
  Navigator.Compartir({
    Dateien: filesArray,
    Titel: 'Vacation Pictures',
    Text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.Log('Share was successful.'))
  .catch((Error) => console.Log('Sharing failed', Error));
} else {
  console.Log(`Your system doesn't support sharing files.`);
}

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, un proyecto de Open Source, es una tradición navideña en Google. Cada diciembre, puedes celebrar la temporada con juegos y experiencias educativas.

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