Has anybody else bumped into this challenge? I am implementing the Net Share API and it really works when i examined it utilizing my desktop however when i examined it utilizing my iphone 14 it really works on safari however when i take advantage of chrome, the primary couple of occasions i click on on the share button it doesn’t work ,some occasions it really works and a few occasions it doesn’t so i must spam click on it hoping it really works a type of occasions , what can also be wierd is that when i used a web based digital machine and examined it on iphone12 it labored advantageous so i do not know if it’s a compatibility downside ?
handleCopyOpen = async (socialHandle) => {
if (this.sharingInProgress) {
console.log('Sharing is already in progress.');
return;
}
this.sharingInProgress = true;
attempt {
const targetElement = doc.querySelector('.milestone-popup');
if (!targetElement) throw new Error('Goal factor not discovered.');
// Get the Blob from the prepareScreenshot perform
const blob = await this.prepareScreenshot(targetElement);
if (navigator.canShare && navigator.canShare({ information: [new File([blob], 'screenshot.png', { kind: 'picture/png' })] })) {
const file = new File([blob], 'screenshot.png', { kind: 'picture/png' });
await navigator.share({
title: 'Achievement on Fanstories',
textual content: 'Try my newest achievement!',
information: [file],
});
console.log('Shared efficiently utilizing Net Share API');
} else {
console.warn('Net Share API not supported. Exhibiting fallback.');
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
}
} catch (error) {
if (error.title === 'AbortError') {
console.log('Person canceled the share operation.');
} else {
console.error('Error throughout sharing:', error);
alert('Did not share. Please attempt once more.');
}
} lastly {
this.sharingInProgress = false;
}
};
prepareScreenshot = async (targetElement) => {
// Outline cloneContainer outdoors the attempt block for broader scope
let cloneContainer;
attempt {
// Clone the goal factor to keep away from modifying the unique DOM
cloneContainer = doc.createElement('div');
cloneContainer.fashion.cssText = `
place: fastened;
prime: 0;
left: 0;
width: 100vw;
top: 100vh;
z-index: -1; /* Retains the clone invisible */
opacity: 0; /* Ensures it is not seen to customers */
`;
doc.physique.appendChild(cloneContainer);
const clonedElement = targetElement.cloneNode(true);
cloneContainer.appendChild(clonedElement);
// Regulate cloned content material for capturing
const footerElement = clonedElement.querySelector('.share-footer');
const closeButtonElement = clonedElement.querySelector('.close-button');
const confettiCanvas = clonedElement.querySelector('canvas');
if (footerElement) footerElement.fashion.show = 'none';
if (closeButtonElement) closeButtonElement.fashion.show = 'none';
if (confettiCanvas) confettiCanvas.fashion.show = 'none';
// Enable DOM modifications to replicate
await new Promise((resolve) => setTimeout(resolve, 100));
// Seize the screenshot
const canvas = await html2canvas(clonedElement, {
backgroundColor: null,
useCORS: true,
scale: 2, // Excessive decision
});
// Convert canvas to Blob
return new Promise((resolve, reject) => {
canvas.toBlob(
(blob) => {
if (blob) {
resolve(blob); // Return the Blob straight
} else {
reject(new Error('Did not convert canvas to Blob.'));
}
},
'picture/png', // MIME kind
1.0 // Picture high quality (1.0 = greatest)
);
});
} catch (error) {
console.error('Error throughout screenshot preparation:', error);
throw error;
} lastly {
// Guarantee cloneContainer is cleaned up
if (cloneContainer) {
doc.physique.removeChild(cloneContainer);
}
}
};