'"Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context .." with PWA on iOS

I am currently facing an issue while implementing Web Share API (Level 2) in Vue 3 using it to share/download images on iOS 14 (as experimental feature) and iOS 15 in a Progressive Web App context.

Observation: When the application is running directly in the Browser (not in the PWA Context - which is a local PWA accesible through the homescreen Bookmark on iOS), it also works as expected without any errors.

Installed as a PWA, however, sharing works as expected THE FIRST time, but AFTER saving the image, it refuses to trigger the native sharing mecanism with the error message (note it ALWAYS works once):

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

The navigator.share is triggered directly by a click event, the resource is also loaded in advance and sharing.

It seems to work fine on Android Devices as expected but on IOS



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source