#StackBounty: #ios #reactjs #safari #mobile-safari #progressive-web-apps React PWA Image Upload in Mobile Safari breaks application?

Bounty: 100

We were surprised we didn’t find any mention of this anywhere online, so we’re posting here in hopes we find a solution.

Using an iPhone with mobile safari is when we hit this issue running the 2 easy to follow tests below, one works, one doesn’t.

Here is the link
https://pwa-react.netlify.com/

Here are the 2 tests we run (both listed in the link), one works when not in PWA mode, and the other fails when in PWA mode.

Test #1: Works Perfectly (Expected Behaviour)

Visit https://pwa-react.netlify.com/ from iPhone in mobile safari
1. Make sure you have google drive on the phone but not logged in.
2. Click "Choose File". It will show you the list of options to choose from.
3. Click "Browse" to look for the photo.
4. Click "Cancel" and you're back here.
5. Click "Choose File" it will still show you the list of options to choose from.
   This works perfectly in mobile safari but NOT in PWA mode below.

Test #2: Does NOT Work (Unexpected Behaviour) (PWA)

Visit https://pwa-react.netlify.com/ from iPhone in mobile safari, hit the share
button, then add to home screen. This will add the PWA app on your phone. Open App.
1. Make sure you have google drive on the phone but not logged in.
2. Click "Choose File". It will show you the list of options to choose from.
3. Click "Browse" to look for the photo.
4. When it shows you the Google Drive logo with Sign In, double click the home 
   button, then go back to the PWA.
5. Click "Choose File" it will NOT show you the list of options to choose from. 
   This is now 100% broken.
   The ONLY way to fix it is to go to Settings>Safari>Clear History and Website Data (all the way down)
   How can we fix this so when the user hits "Choose File" it shows the list of 
   options to choose from in the PWA?

Screenshot #1: These are the options that appear in Test #1 and stop appearing in Test #2

enter image description here

Screenshot #2: This screen allows us to cancel in Test #1 but it disappears in Test #2

enter image description here

Any idea how to get Test #2 to work by allowing us to choose the upload options like in Screenshot #1 without breaking the app and having to go to safari settings to clear history and website data for it to function again?

PS – Here is the repository file https://github.com/MovingGifts/pwa-react/blob/master/src/App.js


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.