J'implémente la nouvelle API Web Share pour un site sur lequel je travaille ( https://developers.google.com/web/updates/2016/09/navigator-share ). Bien qu'il soit pris en charge par Safari Desktop, iOS Safari et Android Chrome, il n'est pris en charge par aucun autre navigateur. Existe-t-il une solution de secours que je peux utiliser pour les navigateurs non pris en charge pour pouvoir partager du texte et un lien depuis mon site?
4 Réponses :
Une solution de secours que j'utilise est Blob, voir un exemple ici https://codesandbox.io/s/bold-leaf-imu3w Il utilise la bibliothèque 'saveAs' de npm.
const blob = new Blob(['"Name","Value"\r\n"Alice","100"\r\n"Bob","200"'], {
type: "text/csv"
});
saveAs(blob, "file.csv");
Une autre suggestion est de simplement afficher une page normale où l'utilisateur peut sélectionner des données et les copier
Probablement trop tard maintenant, mais comme vous pouvez le voir dans la section Utilisation, la ligne
`.catch((error) => console.log('Error sharing', error));`
fournit un moyen de vérifier cela. Ainsi, vous pouvez écouter l'erreur et écrire des boutons de partage personnalisés si vous le souhaitez.
Oui, vous pouvez check.web share API utilise navigator.share
if (navigator.share) {
navigator.share({
title: 'harish tech',
text: 'Check out harishtech.com.',
url: 'https://harishtech.com',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}else{
// Your fall back code here
}
Pour plus d'informations, consultez le partage de liens comme une application native
Si cela peut aider, comme solution de secours dans un projet React, nous avons construit un deuxième composant déclenchant notre propre modal et utilisé https://github.com/nygardk/react-share :
export const ShareButton = props => {
if (typeof navigator !== "undefined" && typeof navigator.share !== "undefined")
return <ShareButtonNativeModal {...props} />
else
return <ButtonShareModal {...props} />
}