I have created a service that creates multiple images from text. There is a button that you click to download these images. It works fine on desktops, but it doesn’t work on mobile. The problem arises because mobile browsers restrict multiple downloads.

@onClick=

async downloadImages() {
    const delay = (milliseconds) =>
        new Promise((resolve) => {
            setTimeout(resolve, milliseconds);
        });

    if (!this.screens) return;
    for (const screen of this.screens) {
        const index = this.screens.indexOf(screen);
        const canvas = document.getElementById(`canvas-${index}`);
        const link = document.createElement("a");
        link.download = `image_${index + 1}.png`;
        link.href = canvas.toDataURL();
        link.click();
        link.remove();
        // Chrome requires the timeout
        await delay(100);
    }
},

How can we make it so that users can download multiple images with one click on mobiles too? Preferably, these images should be added to a gallery (e.g. iPhone Photos).

I googled every possible option. No luck.