英文:
Web Share API Doesn't Work on Firefox (React, NextJS)
问题
The typical code (see below) to get the Web Share API doesn't work on my Firefox browser, but it does on Safari. This applies to both desktop and mobile.
// NextJS/React
if (navigator.share) await navigator.share(data);
But a very similar code seems to work (for any browser) on Vanilla JS according to these users on Reddit (Does the Web Share API work in Firefox on Android?) and this Codepen (Web Share API demo):
// VanillaJS
if (navigator.share) {
navigator.share({
title: 'WebShare API Demo',
url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
shareDialog.classList.add('is-open');
}
My educated guess is that this must be a framework dependent issue. Has anyone had any trouble getting the Web Share API to work on NextJS, and Firefox specifically?
Alternatively, I wonder if the Codepen website has custom code to get the API working.
At any case, it can't be my browser configuration because I've tested both on mobile and desktop, and as I said, the Codepen linked works on my browser.
Therefore, this must be an issue with getting the API working on React/NextJS.
A satisfactory solution to this answer would be one that ideally manages to reproduce the situation and offers a clear explanation of the workaround or fix.
英文:
The typical code (see below) to get the Web Share API doesn't work on my Firefox browser, but it does on Safari. This applies to both desktop and mobile.
// NextJS/React
if (navigator.share) await navigator.share(data);
But a very similar code seems to work (for any browser) on Vanilla JS according to these users on Reddit (Does the Web Share API work in Firefox on Android?) and this Codepen (Web Share API demo):
//VanillaJS
if (navigator.share) {
navigator.share({
title: 'WebShare API Demo',
url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
shareDialog.classList.add('is-open');
}
My educated guess is that this must be a framework dependent issue. Has anyone had any trouble getting the Web Share API to work on NextJS, and Firefox specifically?
Alternatively, I wonder if the Codepen website has custom code to get the API working.
At any case, it can't be my browser configuration because I've tested both on mobile and desktop, and as I said, the Codepen linked works on my browser.
Therefore, this must be an issue with getting the API working on React/NextJS.
A satisfactory solution to this answer would be one that ideally manages to reproduce the situation and offers a clear explanation of the workaround or fix.
答案1
得分: 1
https://caniuse.com/web-share
它说在Firefox上不受支持，您的子社区链接被锁定。
英文:
https://caniuse.com/web-share
It says it is not supported on Firefox and your link for the subreddit is locked.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论