Ich versuche, die Web Share API-Funktionalität in meiner Web-App zu implementieren, aber wenn ich sie auf meinem iPhone ⇐ IOS

[Guest]

Hat jemand das gleiche Problem gehabt? Ich implementieren die Web Share API und sie funktioniert, als ich sie auf meinem Desktop getestet habe, aber als ich sie mit meinem iPhone 14 getestet habe, funktioniert sie auf Safari, aber wenn ich Chrome verwende, klappt es, wenn ich die ersten paar Male auf die Schaltfläche „Teilen“ klicke funktioniert nicht, manchmal funktioniert es und manchmal nicht, also muss ich per Spam darauf klicken und hoffen, dass es einmal funktioniert. Was auch seltsam ist, ist, dass es gut funktioniert hat, als ich eine virtuelle Online-Maschine verwendet und sie auf dem iPhone 12 getestet habe Ich weiß nicht, ob es ein ist Kompatibilitätsproblem?

Code: Select all

handleCopyOpen = async (socialHandle) => {
if (this.sharingInProgress) {
console.log('Sharing is already in progress.');
return;
}
this.sharingInProgress = true;

try {
const targetElement = document.querySelector('.milestone-popup');
if (!targetElement) throw new Error('Target element not found.');

// Get the Blob from the prepareScreenshot function
const blob = await this.prepareScreenshot(targetElement);

if (navigator.canShare && navigator.canShare({ files: [new File([blob], 'screenshot.png', { type: 'image/png' })] })) {
const file = new File([blob], 'screenshot.png', { type: 'image/png' });

await navigator.share({
title: 'Achievement on Fanstories',
text: 'Check out my latest achievement!',
files: [file],
});
console.log('Shared successfully using Web Share API');
} else {
console.warn('Web Share API not supported. Showing fallback.');
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
}
} catch (error) {
if (error.name === 'AbortError') {
console.log('User canceled the share operation.');
} else {
console.error('Error during sharing:', error);
alert('Failed to share. Please try again.');
}
} finally {
this.sharingInProgress = false;
}
};

prepareScreenshot = async (targetElement) => {
// Define cloneContainer outside the try block for broader scope
let cloneContainer;

try {
// Clone the target element to avoid modifying the original DOM
cloneContainer = document.createElement('div');
cloneContainer.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1; /* Keeps the clone invisible */
opacity: 0; /* Ensures it's not visible to users */
`;
document.body.appendChild(cloneContainer);

const clonedElement = targetElement.cloneNode(true);
cloneContainer.appendChild(clonedElement);

// Adjust cloned content for capturing
const footerElement = clonedElement.querySelector('.share-footer');
const closeButtonElement = clonedElement.querySelector('.close-button');
const confettiCanvas = clonedElement.querySelector('canvas');

if (footerElement) footerElement.style.display = 'none';
if (closeButtonElement) closeButtonElement.style.display = 'none';
if (confettiCanvas) confettiCanvas.style.display = 'none';

// Allow DOM changes to reflect
await new Promise((resolve) => setTimeout(resolve, 100));

// Capture the screenshot
const canvas = await html2canvas(clonedElement, {
backgroundColor: null,
useCORS: true,
scale: 2, // High resolution
});

// Convert canvas to Blob
return new Promise((resolve, reject) => {
canvas.toBlob(
(blob) => {
if (blob) {
resolve(blob); // Return the Blob directly
} else {
reject(new Error('Failed to convert canvas to Blob.'));

}
},
'image/png', // MIME type
1.0 // Image quality (1.0 = best)
);
});
} catch (error) {
console.error('Error during screenshot preparation:', error);
throw error;
} finally {
// Ensure cloneContainer is cleaned up
if (cloneContainer) {
document.body.removeChild(cloneContainer);
}
}
};